Zum Inhalt
← Navigation

Mensch/Maschine-Umschalter (Agentenansicht)

Segment-Schalter Mensch/Maschine im Kopf einer SaaS-Seite: Die Maschinenansicht zeigt dieselben Inhalte als Markdown mit Kopier-Knopf, wahlweise unter gleicher URL, als Pfad /ai/ oder als llms.txt.

Ein kleiner Zwei-Wege-Schalter („Mensch / Maschine“ oder „Human / Agent“) sitzt im Kopf oder im Menü. Die Maschinenansicht zeigt dieselben Inhalte als reines Markdown oder strukturierten Text, oft mit einem Knopf „Markdown kopieren“ und Links zum Öffnen in KI-Assistenten. Die gestaltete Ansicht für Menschen bleibt das Haupterlebnis.

Der Schalter zeigt technische Souveränität und Zeitgeist, mit Augenzwinkern. Er bedient Agenten, Entwickler und KI-Suche mit einer sauberen Textfassung, ohne die Gestaltung für Menschen aufzugeben.

Wann einsetzen

Tech-affine Studios, Dev-Tools, SaaS, Blogs und Dokumentation. Seiten, deren Leser Inhalte an Assistenten weitergeben (Doku, Preise, Changelog). Kein Versprechen für KI-Suche: Google braucht für AI Overviews und AI Mode keine eigenen Dateien oder Maschinenansichten.

Wann nicht

Wenn es keine echte, gepflegte Maschinenfassung gibt. Dann ist der Schalter nur ein Gag.

Varianten

  • Eigener Pfad: „Machine“ verlinkt auf /ai/… (basement.studio)
  • Gleiche URL, umgeschaltete Darstellung mit „Markdown kopieren“ (OneOffTech)
  • Nur ein Link auf llms.txt im Footer (optional, ohne belegte Wirkung bei Google)

Umsetzung

Schalter als Radiogruppe (fieldset mit legend, zwei Radios) oder zwei Buttons mit aria-pressed. Der Indikator ist ein Element in einer zweispaltigen Spur und gleitet per translate. Maschinenansicht als eigene Route mit statisch erzeugtem Markdown (text/markdown oder <pre>) oder per Umschalten eines Wrappers auf derselben URL. Im Head <link rel="alternate" type="text/markdown" href="…"> ergänzen. Für die eigene Route eine kanonische URL setzen, sonst droht Duplicate Content. In der Demo ist der Seitenwechsel als Zustand mit Ladebalken simuliert; auf der echten Seite ist „Maschine“ dann ein Link. llms.txt ist optional und ohne belegte Wirkung bei Google: Laut Google sind für AI Overviews und AI Mode keine neuen maschinenlesbaren Dateien oder KI-Textdateien nötig (developers.google.com/search/docs/appearance/ai-features, Stand 10.12.2025). Für Sichtbarkeit zählen strukturierte Daten, die zum sichtbaren Text passen; dem Kunden die Maschinenansicht nicht als SEO-Maßnahme verkaufen.

Robust umsetzen

Telefon. Funktioniert gleich. Der Schalter bleibt im Kopf oder wandert ins Menü.

Ohne Bewegung. Der Indikator springt ohne Transition, die Ansicht wechselt ohne Einblenden.

Barrierefrei. Als Radiogruppe mit Legende auszeichnen. Den Wechsel per aria-live ansagen. Die Maschinenansicht ist zugleich eine gute Textalternative.

Code

<!DOCTYPE html>
<!--
  Mensch/Maschine-Umschalter (Agentenansicht)
  Fundus · Navigation · https://cecodesign.de/lab/fundus/navigation/mensch-maschine-umschalter/
  Eigenständige Datei. Bilder liegen hier unter bilder/ – eigene einsetzen.
-->
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mensch/Maschine-Umschalter (Agentenansicht) · Fundus-Demo</title>
<script>document.documentElement.classList.add('js');if(matchMedia('(prefers-reduced-motion: reduce)').matches)document.documentElement.classList.add('reduziert')</script>
<style>
@font-face { font-family: 'Geist'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

:root {
  /* Belegwerk, Aachen: Graustufen tragen alles, ein Markenton (Thermalgrün) für Aktion und Fokus */
  --grund: #fafafa; --karte: #ffffff; --tinte: #161616; --leise: #686c73; --linie: rgba(22, 22, 22, .1); --flaeche: #f0f0f1;
  --marke: #0b7a66; --marke-hell: #e2f2ee;
  --ok: #1f8a4c; --warn: #b7741a; --fehler: #c8372d;
  /* Maschinen-Ansicht: dunkles Schema wie in Dev-Tools */
  --m-grund: #08090a; --m-panel: #161718; --m-text: #f7f8f8; --m-zweit: #d0d6e0; --m-leise: #8a8f98; --m-linie: #242728; --m-marke: #4fd1b2;
  /* Bewegung: easeOutQuad wie Linear, Indikator 200 ms, Ansicht 200 ms */
  --kurve: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --indikator: 200ms;
  --ansicht: 200ms;
  --ui: 150ms;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--tinte); font-family: 'Geist', system-ui, sans-serif; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; transition: background-color var(--ansicht) var(--kurve), color var(--ansicht) var(--kurve); }
html.maschine { background: var(--m-grund); color: var(--m-text); }
body { min-height: 100svh; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.mono { font: 500 11px/1.35 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.maschine .mono { color: var(--m-leise); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.seite { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 40px); }

/* ---------- Kopf ---------- */
.kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; justify-self: start; }
.marke svg { width: 22px; height: 22px; flex: none; }
.marke .zeichen-a { fill: var(--tinte); transition: fill var(--ansicht) var(--kurve); }
.marke .zeichen-b { fill: var(--marke); transition: fill var(--ansicht) var(--kurve); }
.maschine .marke .zeichen-a { fill: var(--m-text); }
.maschine .marke .zeichen-b { fill: var(--m-marke); }
.nav { display: flex; gap: 2px; list-style: none; padding: 0; }
.nav a { display: block; padding: 8px 13px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--leise); text-decoration: none; transition: color var(--ui) var(--kurve), background-color var(--ui) var(--kurve); }
.nav a:hover { color: var(--tinte); background: rgba(22, 22, 22, .045); }
.maschine .nav a { color: var(--m-leise); }
.maschine .nav a:hover { color: var(--m-text); background: rgba(247, 248, 248, .06); }
.kopf__rechts { justify-self: end; display: flex; align-items: center; gap: 18px; }
.anmelden { font-size: 14.5px; font-weight: 500; color: var(--leise); text-decoration: none; white-space: nowrap; transition: color var(--ui) var(--kurve); }
.anmelden:hover { color: var(--tinte); }
.maschine .anmelden { color: var(--m-leise); }

/* ---------- Der Umschalter: Radiogruppe mit gleitendem Indikator ---------- */
.schalter { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
.schalter legend { float: left; margin-right: 10px; }
.schalter__spur { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); isolation: isolate; transition: background-color var(--ansicht) var(--kurve), border-color var(--ansicht) var(--kurve); }
.schalter label { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 28px; padding: 0 12px; cursor: pointer; font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); white-space: nowrap; transition: color var(--indikator) var(--kurve); }
.schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.schalter label svg { width: 13px; height: 13px; flex: none; }
.schalter label:has(:checked) { color: var(--karte); }
.schalter label:has(:focus-visible) { outline: 2px solid var(--marke); outline-offset: 2px; border-radius: 999px; }
.schalter__daumen { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--tinte); transition: translate var(--indikator) var(--kurve), background-color var(--indikator) var(--kurve); }
.maschine .schalter__spur { background: var(--m-panel); border-color: var(--m-linie); }
.maschine .schalter__daumen { translate: 100% 0; background: var(--m-text); }
.maschine .schalter label { color: var(--m-leise); }
.maschine .schalter label:has(:checked) { color: var(--m-grund); }
.schalter__kbd { font: 500 10px/1 'Geist Mono', monospace; letter-spacing: .04em; color: var(--leise); border: 1px solid var(--linie); border-radius: 5px; padding: 3px 5px; }
.maschine .schalter__kbd { color: var(--m-leise); border-color: var(--m-linie); }

/* Hinweis mit Augenzwinkern unter dem Schalter (nur breite Fenster mit Zeiger) */
.kopf__rechts { position: relative; }
.tipp { position: absolute; right: 70px; top: calc(100% + 4px); width: 250px; padding: 12px 14px; border-radius: 10px; background: var(--tinte); color: #f2f2f2; font-size: 13px; line-height: 1.45; box-shadow: 0 12px 30px rgba(22, 22, 22, .18); opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity var(--ansicht) var(--kurve), translate var(--ansicht) var(--kurve); z-index: 5; }
.tipp::before { content: ""; position: absolute; top: -5px; right: 64px; width: 10px; height: 10px; background: inherit; rotate: 45deg; border-radius: 2px; }
.tipp b { display: block; font: 500 10.5px/1.3 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #7fe0c8; margin-bottom: 4px; }
.tipp.an { opacity: 1; translate: 0 0; }
@media (max-width: 860px), (hover: none) { .tipp { display: none; } }

/* ---------- Ladebalken (Variante eigener Pfad) ---------- */
.lade { position: fixed; left: 0; top: 0; height: 2px; width: 100%; background: var(--marke); transform-origin: 0 50%; scale: 0 1; opacity: 0; z-index: 30; }
.maschine .lade { background: var(--m-marke); }
.lade.laeuft { opacity: 1; scale: 1 1; transition: scale 300ms var(--kurve); }
.lade.fertig { opacity: 0; scale: 1 1; transition: opacity var(--ansicht) var(--kurve); }

/* ---------- Ansichten ---------- */
.ansicht { transition: opacity var(--ansicht) var(--kurve), translate var(--ansicht) var(--kurve); }
.ansicht[hidden] { display: none; }
.ansicht.geht { opacity: 0; translate: 0 -6px; }
.ansicht.kommt { opacity: 0; translate: 0 6px; transition: none; }

/* Mensch: das gestaltete Haupterlebnis */
.held { padding: clamp(36px, 7vh, 76px) 0 0; display: grid; gap: 22px; justify-items: start; }
.neu { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); font-size: 13px; color: var(--leise); text-decoration: none; transition: border-color var(--ui) var(--kurve); }
.neu:hover { border-color: rgba(22, 22, 22, .22); }
.neu b { font: 500 10.5px/1 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--marke); background: var(--marke-hell); padding: 5px 8px; border-radius: 999px; }
.neu span { color: var(--tinte); }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); font-weight: 580; letter-spacing: -.022em; line-height: 1; max-width: 13.5em; text-wrap: balance; }
h1 em { font-style: normal; color: #898d95; }
.held__text { max-width: 56ch; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; color: var(--leise); text-wrap: pretty; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9px; font-size: 14.5px; font-weight: 550; text-decoration: none; border: 1px solid var(--linie); background: var(--karte); transition: background-color var(--ui) var(--kurve), border-color var(--ui) var(--kurve); }
.knopf:hover { border-color: rgba(22, 22, 22, .24); }
.knopf--primaer { background: var(--marke); border-color: var(--marke); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(22, 22, 22, .18); }
.knopf--primaer:hover { background: #096957; border-color: #096957; }
.knopf:focus-visible, .nav a:focus-visible, .anmelden:focus-visible, .neu:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }

/* Produkt-UI als echtes HTML */
.app { margin-top: clamp(36px, 6vh, 56px); border-radius: 14px; background: var(--karte); border: 1px solid var(--linie); box-shadow: 0 1px 0 rgba(22, 22, 22, .04), 0 30px 60px -30px rgba(22, 22, 22, .22); overflow: hidden; display: grid; grid-template-columns: 188px minmax(0, 360px) minmax(0, 1fr); min-height: 420px; font-size: 13.5px; }
.app__seite { background: #f6f6f7; border-right: 1px solid var(--linie); padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
.app__seite p { padding: 6px 10px 10px; }
.app__seite a { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--leise); font-weight: 500; }
.app__seite a.an { background: var(--karte); color: var(--tinte); box-shadow: 0 0 0 1px var(--linie); }
.app__seite a i { font: normal 500 11px/1.6 'Geist Mono', monospace; color: var(--leise); }
.app__liste { border-right: 1px solid var(--linie); display: grid; align-content: start; }
.app__kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
.app__kopf strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.beleg { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.beleg.an { background: var(--marke-hell); box-shadow: inset 2px 0 0 var(--marke); }
.beleg b { font-weight: 550; }
.beleg span { font: 500 12px/1.4 'Geist Mono', monospace; font-variant-numeric: tabular-nums; }
.beleg small { color: var(--leise); font-size: 12.5px; }
.status { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--leise); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.status--warn::before { background: var(--warn); }
.status--fehler::before { background: var(--fehler); }
.status--gebucht::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--leise); }
.app__detail { padding: 18px 22px; display: grid; align-content: start; gap: 16px; }
.detail__kopf { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.detail__kopf h2 { font-size: 18px; font-weight: 600; letter-spacing: -.016em; }
.detail__kopf p { color: var(--leise); font-size: 12.5px; margin-top: 3px; }
.detail__betrag { font: 500 22px/1 'Geist', sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pruefung { list-style: none; padding: 0; border: 1px solid var(--linie); border-radius: 10px; }
.pruefung li { display: grid; grid-template-columns: 18px 72px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--linie); }
.pruefung li:first-child { border-top: 0; }
.pruefung svg { width: 14px; height: 14px; color: var(--ok); }
.pruefung code { font: 500 11.5px/1 'Geist Mono', monospace; color: var(--leise); }
.pruefung em { font-style: normal; font: 500 12px/1 'Geist Mono', monospace; font-variant-numeric: tabular-nums; color: var(--leise); }
.buchung { display: grid; gap: 8px; }
.buchung table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.buchung td { padding: 7px 0; border-bottom: 1px dashed var(--linie); }
.buchung td:first-child { font: 500 12px/1 'Geist Mono', monospace; color: var(--leise); width: 56px; }
.buchung td:last-child { text-align: right; font-family: 'Geist Mono', monospace; font-size: 12.5px; }
.detail__fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail__fuss .knopf { height: 34px; font-size: 13.5px; }

.fuss { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 28px 0 110px; margin-top: 56px; border-top: 1px solid var(--linie); font-size: 13.5px; color: var(--leise); }
.fuss nav { display: flex; gap: 18px; flex-wrap: wrap; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--tinte); }
.fuss a[data-llms] { font: 500 12px/1.4 'Geist Mono', monospace; color: var(--marke); }
.maschine .fuss { border-color: var(--m-linie); color: var(--m-leise); }
.maschine .fuss a[data-llms] { color: var(--m-marke); }
.maschine .fuss a:hover { color: var(--m-text); }

/* Maschine: dieselben Inhalte als Markdown */
.dok { padding: clamp(24px, 4vh, 40px) 0 0; display: grid; gap: 14px; }
.dok__leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.dok__info { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.dok__info .adresse { color: var(--m-zweit); letter-spacing: .04em; text-transform: none; font-size: 12px; }
.dok__info .adresse b { color: var(--m-marke); font-weight: 500; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--m-marke); box-shadow: 0 0 0 3px rgba(79, 209, 178, .16); }
.dok__aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.mknopf { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--m-linie); background: var(--m-panel); color: var(--m-text); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color var(--ui) var(--kurve), border-color var(--ui) var(--kurve), color var(--ui) var(--kurve); }
.mknopf:hover { background: #1d1e20; border-color: #34383a; }
.mknopf:focus-visible { outline: 2px solid var(--m-marke); outline-offset: 2px; }
.mknopf svg { width: 14px; height: 14px; flex: none; }
.mknopf .ok { display: none; }
.mknopf.kopiert { color: var(--m-marke); border-color: rgba(79, 209, 178, .4); }
.mknopf.kopiert .ok { display: block; }
.mknopf.kopiert .kopie { display: none; }
.mknopf--primaer { background: var(--m-text); color: var(--m-grund); border-color: var(--m-text); }
.mknopf--primaer:hover { background: #ffffff; border-color: #ffffff; }
.mknopf--primaer.kopiert { background: var(--m-text); color: #0b6b58; }
.code { position: relative; border: 1px solid var(--m-linie); border-radius: 12px; background: var(--m-panel); overflow: hidden; }
.code__kopf { display: flex; justify-content: space-between; align-items: center; gap: 4px 16px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--m-linie); }
.code pre { margin: 0; padding: 14px 0 18px; overflow-x: auto; font: 400 13.5px/1.75 'Geist Mono', ui-monospace, monospace; color: var(--m-zweit); counter-reset: z; tab-size: 2; }
.code pre span.z { display: block; padding: 0 20px 0 64px; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.75em; }
.code pre span.z::before { counter-increment: z; content: counter(z); position: absolute; left: 0; width: 44px; text-align: right; color: #4a4e55; font-variant-numeric: tabular-nums; }
.z.h1 { color: var(--m-text); font-weight: 600; }
.z.h2 { color: var(--m-text); font-weight: 600; }
.z .zeichen { color: var(--m-marke); }
.z .link { color: var(--m-text); text-decoration: underline; text-decoration-color: rgba(79, 209, 178, .45); text-underline-offset: 3px; }
.z .url { color: var(--m-leise); }
.z .fett { color: var(--m-text); font-weight: 600; }
.z .inl { color: var(--m-marke); }
.z.meta { color: var(--m-leise); }
.z.meta .schl { color: var(--m-zweit); }
.z.tab { color: var(--m-zweit); }
.z.tab .rohr { color: #4a4e55; }
.z.zitat { color: var(--m-text); }
.z.kommentar { color: var(--m-leise); }
/* Zeilen kommen nacheinander, nur Deckkraft und 4 px */
.code.zeigt span.z { animation: zeile var(--ansicht) var(--kurve) both; animation-delay: calc(var(--i) * 10ms); }
@keyframes zeile { from { opacity: 0; translate: 0 4px; } }

/* ---------- Variante llms.txt: kein Schalter im Kopf, Link im Footer ---------- */
.v-llms .schalter { display: none; }
.zurueck { display: none; }
.v-llms .zurueck { display: inline-flex; }

/* ---------- Demo-Leiste: Variante und Werte ---------- */
.leiste { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 20; display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 32px); padding: 7px 8px 7px 16px; border-radius: 14px; background: rgba(250, 250, 250, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linie); box-shadow: 0 10px 30px rgba(22, 22, 22, .1); transition: background-color var(--ansicht) var(--kurve), border-color var(--ansicht) var(--kurve); }
.leiste b { color: var(--tinte); font-weight: 500; }
.modi { display: flex; gap: 4px; }
.modi button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--leise); background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; height: 28px; padding: 0 11px; cursor: pointer; transition: background-color var(--ui) var(--kurve), color var(--ui) var(--kurve); }
.modi button[aria-pressed="true"] { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }
.maschine .leiste { background: rgba(22, 23, 24, .9); border-color: var(--m-linie); }
.maschine .leiste b { color: var(--m-text); }
.maschine .modi button { background: var(--m-panel); color: var(--m-leise); border-color: var(--m-linie); }
.maschine .modi button[aria-pressed="true"] { background: var(--m-text); color: var(--m-grund); border-color: var(--m-text); }

/* Vorführung: gezeichneter Zeiger */
.zeiger { position: fixed; left: 0; top: 0; z-index: 40; width: 18px; height: 18px; pointer-events: none; display: none; transition: scale var(--ui) var(--kurve); }
.vorfuehrung .zeiger { display: block; }
.zeiger.drueckt { scale: .8; }
.vorschau body { overflow: hidden; }

/* ---------- Schmal und Touch ---------- */
@media (max-width: 1080px) { .app { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); } .app__seite { display: none; } }
@media (max-width: 860px) {
  .kopf { grid-template-columns: auto 1fr; }
  .nav, .anmelden { display: none; }
  .schalter legend { display: none; }
}
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; min-height: 0; }
  .app__liste { border-right: 0; border-bottom: 1px solid var(--linie); }
  .app__liste .beleg:nth-child(n+4) { display: none; }
  .pruefung li { grid-template-columns: 18px 1fr auto; }
  .pruefung code { display: none; }
  .leiste .werte__lang { display: none; }
  .code pre { font-size: 12px; }
  .code pre span.z { padding: 0 14px 0 40px; }
  .code pre span.z::before { width: 26px; }
  .dok__info .mono:not(.adresse) { display: none; }
}
@media (max-width: 420px) {
  .schalter__kbd { display: none; }
  .schalter label { padding: 0 10px; letter-spacing: .08em; }
  .schalter label svg { display: none; }
  .marke span { font-size: 17px; }
  .app__detail { padding: 16px; }
  .detail__kopf { flex-direction: column; gap: 8px; }
}
@media (hover: none) {
  .schalter__kbd { display: none; }
  .schalter label { height: 34px; }      /* größere Trefferfläche */
  .mknopf { height: 38px; }
}

/* ---------- Reduzierte Bewegung: Indikator springt, Ansicht wechselt ohne Einflug ---------- */
.reduziert *, .reduziert *::before, .reduziert *::after { transition: none !important; animation: none !important; }
.reduziert .ansicht.geht, .reduziert .ansicht.kommt { opacity: 1; translate: none; }
.reduziert .lade { display: none; }
@media (forced-colors: active) {
  button, [role=button], [role=tab], [role=switch] { border: 1px solid ButtonText !important; }
}
</style>
</head>
<body>
<div class="lade" data-lade aria-hidden="true"></div>
<div class="seite">
  <header class="kopf">
    <a class="marke" href="#start" aria-label="Belegwerk, Startseite">
      <svg viewBox="0 0 22 22" aria-hidden="true"><path class="zeichen-a" d="M3 2h10.5L19 7.5V20H3z"/><path class="zeichen-b" d="M7 11h8v2H7zm0 4h5v2H7z"/><path d="M13.5 2v5.5H19" fill="none" stroke="#fafafa" stroke-opacity=".35"/></svg>
      <span>Belegwerk</span>
    </a>
    <ul class="nav">
      <li><a href="#produkt">Produkt</a></li>
      <li><a href="#api">API</a></li>
      <li><a href="#preise">Preise</a></li>
      <li><a href="#changelog">Changelog</a></li>
    </ul>
    <div class="kopf__rechts">
      <fieldset class="schalter" data-schalter>
        <legend class="mono">Ansicht</legend>
        <div class="schalter__spur">
          <span class="schalter__daumen" aria-hidden="true"></span>
          <label><input type="radio" name="ansicht" value="mensch" checked><svg viewBox="0 0 14 14" aria-hidden="true"><circle cx="7" cy="4.6" r="2.4" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M2.4 12.5c.6-2.5 2.4-3.8 4.6-3.8s4 1.3 4.6 3.8" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>Mensch</label>
          <label><input type="radio" name="ansicht" value="maschine"><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M4.6 4 1.8 7l2.8 3M9.4 4l2.8 3-2.8 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>Maschine</label>
        </div>
        <kbd class="schalter__kbd" title="Tastenkürzel">M</kbd>
      </fieldset>
      <a class="anmelden" href="#anmelden">Anmelden</a>
      <p class="tipp" data-tipp aria-hidden="true"><b>Für Agenten</b>Diese Seite gibt es auch als Markdown. Umschalten oder Taste M.</p>
    </div>
  </header>

  <main>
    <!-- Ansicht Mensch -->
    <section class="ansicht" data-ansicht="mensch" aria-label="Gestaltete Ansicht">
      <div class="held" id="start">
        <a class="neu" href="#changelog"><b>Neu</b><span>Abgleich mit Bestellungen</span> in Version 4.2 →</a>
        <h1>E-Rechnungen prüfen, <em>bevor sie jemand liest.</em></h1>
        <p class="held__text">Belegwerk nimmt XRechnung und ZUGFeRD an, prüft jede Rechnung nach EN&nbsp;16931 und schlägt den Buchungssatz vor. Entwickelt in Aachen, gehostet in Frankfurt am Main.</p>
        <div class="ctas">
          <a class="knopf knopf--primaer" href="#start">Kostenlos testen</a>
          <a class="knopf" href="#demo">Demo vereinbaren</a>
        </div>
      </div>

      <div class="app" role="img" aria-label="Ausschnitt aus der Belegwerk-App: Eingang mit fünf Rechnungen, rechts die Prüfung der Rechnung RE-2026-1147 der Schreinerei Kremer mit vier bestandenen Regeln und Buchungsvorschlag.">
        <div class="app__seite">
          <p class="mono">Belege</p>
          <a class="an" href="#e">Eingang <i>12</i></a>
          <a href="#g">Geprüft <i>148</i></a>
          <a href="#b">Gebucht <i>1.906</i></a>
          <a href="#r">Prüfregeln</a>
          <a href="#x">Export</a>
        </div>
        <div class="app__liste">
          <div class="app__kopf"><strong>Eingang</strong><span class="mono">Heute</span></div>
          <div class="beleg an"><b>Schreinerei Kremer</b><span>2.380,00 €</span><small>RE-2026-1147</small><span class="status">Geprüft</span></div>
          <div class="beleg"><b>Druckhaus am Templergraben</b><span>486,15 €</span><small>2026-0912</small><span class="status status--warn">1 Hinweis</span></div>
          <div class="beleg"><b>Elektro Gülpen GmbH</b><span>12.904,20 €</span><small>R-55817</small><span class="status status--fehler">Fehler</span></div>
          <div class="beleg"><b>Rösterei Lousberg</b><span>89,90 €</span><small>LB-30418</small><span class="status">Geprüft</span></div>
          <div class="beleg"><b>IT-Service Laurensberg</b><span>1.190,00 €</span><small>2026/311</small><span class="status status--gebucht">Gebucht</span></div>
        </div>
        <div class="app__detail">
          <div class="detail__kopf">
            <div><h2>Schreinerei Kremer</h2><p>RE-2026-1147 · XRechnung 3.0 (UBL) · fällig 14.11.2026</p></div>
            <span class="detail__betrag">2.380,00 €</span>
          </div>
          <ul class="pruefung">
            <li><svg viewBox="0 0 14 14" aria-hidden="true"><path d="m3 7.4 2.6 2.6L11 4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><code>BR-16</code><span>Mindestens eine Rechnungsposition</span><em>3</em></li>
            <li><svg viewBox="0 0 14 14" aria-hidden="true"><path d="m3 7.4 2.6 2.6L11 4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><code>BR-CO-10</code><span>Summe der Positionen</span><em>2.000,00</em></li>
            <li><svg viewBox="0 0 14 14" aria-hidden="true"><path d="m3 7.4 2.6 2.6L11 4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><code>BR-CO-15</code><span>Brutto = Netto + Umsatzsteuer</span><em>2.380,00</em></li>
            <li><svg viewBox="0 0 14 14" aria-hidden="true"><path d="m3 7.4 2.6 2.6L11 4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><code>BR-DE-15</code><span>Käuferreferenz vorhanden</span><em>K-0417</em></li>
          </ul>
          <div class="buchung">
            <p class="mono">Buchungsvorschlag · SKR03</p>
            <table>
              <tr><td>0420</td><td>Büroeinrichtung (Empfangstresen Eiche)</td><td>2.000,00</td></tr>
              <tr><td>1576</td><td>Vorsteuer 19 %</td><td>380,00</td></tr>
              <tr><td>1600</td><td>an Verbindlichkeiten aus Lieferungen</td><td>2.380,00</td></tr>
            </table>
          </div>
          <div class="detail__fuss"><span class="mono">Geprüft in 412 ms</span><a class="knopf knopf--primaer" href="#buchen">Buchen</a></div>
        </div>
      </div>
    </section>

    <!-- Ansicht Maschine -->
    <section class="ansicht dok" data-ansicht="maschine" aria-label="Maschinenansicht als Markdown" hidden>
      <div class="dok__leiste">
        <div class="dok__info">
          <span class="punkt" aria-hidden="true"></span>
          <span class="mono adresse" data-adresse>belegwerk.de/<b></b></span>
          <span class="mono" data-format>text/markdown · gleiche Adresse</span>
        </div>
        <div class="dok__aktionen">
          <a class="mknopf zurueck" href="#start" data-zurueck>← Zur Website</a>
          <button class="mknopf" type="button" data-kopiere="frage"><svg class="kopie" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 3.5h7.5v7.5H2zM4.5 1h7.5v7.5" fill="none" stroke="currentColor" stroke-width="1.3"/></svg><svg class="ok" viewBox="0 0 14 14" aria-hidden="true"><path d="m3 7.4 2.6 2.6L11 4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span data-text="Frage für Assistenten">Frage für Assistenten</span></button>
          <button class="mknopf mknopf--primaer" type="button" data-kopiere="markdown"><svg class="kopie" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 3.5h7.5v7.5H2zM4.5 1h7.5v7.5" fill="none" stroke="currentColor" stroke-width="1.3"/></svg><svg class="ok" viewBox="0 0 14 14" aria-hidden="true"><path d="m3 7.4 2.6 2.6L11 4.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span data-text="Markdown kopieren">Markdown kopieren</span></button>
        </div>
      </div>
      <div class="code" data-code>
        <div class="code__kopf"><span class="mono" data-datei>start.md</span><span class="mono" data-umfang></span></div>
        <pre data-pre></pre>
      </div>
      <p class="sr" aria-live="polite" data-ansage></p>
    </section>

    <footer class="fuss">
      <span>© 2026 Belegwerk GmbH · Pontstraße 41 · 52062 Aachen</span>
      <nav aria-label="Rechtliches und Maschinen">
        <a href="#impressum">Impressum</a><a href="#datenschutz">Datenschutz</a><a href="#status">Status</a><a href="#llms" data-llms>llms.txt</a>
      </nav>
    </footer>
  </main>
</div>

<div class="leiste mono">
  <p><b>Indikator 200 ms</b> · easeOutQuad<span class="werte__lang"> (.25,.46,.45,.94) · Ansicht 200 ms, 6 px · Zeilen 10 ms Versatz</span></p>
  <div class="modi" role="group" aria-label="Variante">
    <button type="button" data-variante="gleich" aria-pressed="true">Gleiche URL</button>
    <button type="button" data-variante="pfad" aria-pressed="false">Pfad /ai/</button>
    <button type="button" data-variante="llms" aria-pressed="false">llms.txt</button>
  </div>
</div>
<svg class="zeiger" data-zeiger viewBox="0 0 18 18" aria-hidden="true"><path d="M2 1.5 15.5 9.2l-6 1.3-2.9 5.6Z" fill="#161616" stroke="#ffffff" stroke-width="1.2" stroke-linejoin="round"/></svg>

<script>
(() => {
  const html = document.documentElement;
  const reduziert = () => html.classList.contains('reduziert');
  const $ = (s, w = document) => w.querySelector(s);
  const $$ = (s, w = document) => [...w.querySelectorAll(s)];

  const ANSICHT_MS = 200, LADE_MS = 300;
  const radios = $$('[data-schalter] input');
  const mensch = $('[data-ansicht="mensch"]'), maschine = $('[data-ansicht="maschine"]');
  const pre = $('[data-pre]'), code = $('[data-code]'), lade = $('[data-lade]');
  const adresse = $('[data-adresse] b'), format = $('[data-format]'), datei = $('[data-datei]'), umfang = $('[data-umfang]'), ansage = $('[data-ansage]');

  // Dieselben Inhalte wie die gestaltete Seite, gepflegt als Markdown
  const START_MD = `---
titel: Belegwerk · E-Rechnungen prüfen und buchen
kanonisch: /
stand: 2026-10-28
---

# E-Rechnungen prüfen, bevor sie jemand liest.

Belegwerk nimmt XRechnung und ZUGFeRD an, prüft jede Rechnung nach EN 16931 und schlägt den Buchungssatz vor. Entwickelt in Aachen, gehostet in Frankfurt am Main.

- [Kostenlos testen](/start): 30 Tage, ohne Kreditkarte
- [Demo vereinbaren](/demo): 20 Minuten mit dem Team

## So arbeitet Belegwerk

1. **Empfangen:** per Postfach, Upload oder API (\`POST /v1/belege\`)
2. **Prüfen:** Pflichtfelder, Summen und Steuersätze nach EN 16931
3. **Buchen:** Vorschlag nach SKR03 oder SKR04, Export an die Buchhaltung

## Beispiel aus dem Eingang

| Lieferant                  | Nummer       | Betrag      | Status    |
|----------------------------|--------------|------------:|-----------|
| Schreinerei Kremer         | RE-2026-1147 |  2.380,00 € | geprüft   |
| Druckhaus am Templergraben | 2026-0912    |    486,15 € | 1 Hinweis |
| Elektro Gülpen GmbH        | R-55817      | 12.904,20 € | Fehler    |

## Preise

- **Start:** 0 € für 50 Belege im Monat
- **Team:** 49 € im Monat für 1.000 Belege
- **Konzern:** auf Anfrage

## Für Agenten

- [API-Referenz](/ai/api.md): REST, JSON, Webhooks
- [Alle Seiten](/llms.txt): Übersicht für Sprachmodelle`;

  const LLMS_TXT = `# Belegwerk

> E-Rechnungs-Software aus Aachen. Empfängt XRechnung und ZUGFeRD, prüft nach EN 16931 und schlägt Buchungssätze nach SKR03 oder SKR04 vor.

Alle Seiten gibt es als Markdown unter /ai/. Stand: 28.10.2026.

## Seiten

- [Start](/ai/start.md): Was Belegwerk tut und für wen
- [Preise](/ai/preise.md): Start, Team, Konzern
- [Changelog](/ai/changelog.md): Versionen ab 4.0

## Entwickler

- [API-Referenz](/ai/api.md): REST, JSON, Webhooks
- [Prüfregeln](/ai/regeln.md): jede Regel mit Beispiel

## Optional

- [Impressum](/impressum)
- [Datenschutz](/datenschutz)`;

  const tipp = $('[data-tipp]');
  let tippUhr = setTimeout(() => tipp.classList.add('an'), 900);
  const FRAGE = 'Lies belegwerk.de/ai/start.md und erkläre mir in drei Sätzen, was Belegwerk kostet.';

  // Einfache Markdown-Hervorhebung pro Zeile (Text bleibt Markdown, nur eingefärbt)
  const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  function inline(s) {
    return esc(s)
      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<span class="zeichen">[</span><span class="link">$1</span><span class="zeichen">]</span><span class="url">($2)</span>')
      .replace(/\*\*([^*]+)\*\*/g, '<span class="zeichen">**</span><span class="fett">$1</span><span class="zeichen">**</span>')
      .replace(/`([^`]+)`/g, '<span class="inl">`$1`</span>')
      .replace(/^(\s*)([-*]|\d+\.)(\s)/, '$1<span class="zeichen">$2</span>$3');
  }
  function zeichnen(text) {
    let meta = false;
    pre.innerHTML = text.split('\n').map((z, i) => {
      let k = '', inhalt;
      if (z === '---' && (i === 0 || meta)) { meta = i === 0; k = 'meta'; inhalt = `<span class="zeichen">${esc(z)}</span>`; }
      else if (meta) { k = 'meta'; inhalt = esc(z).replace(/^([^:]+):/, '<span class="schl">$1</span>:'); }
      else if (/^# /.test(z)) { k = 'h1'; inhalt = `<span class="zeichen">#</span>${esc(z.slice(1))}`; }
      else if (/^## /.test(z)) { k = 'h2'; inhalt = `<span class="zeichen">##</span>${esc(z.slice(2))}`; }
      else if (/^> /.test(z)) { k = 'zitat'; inhalt = `<span class="zeichen">&gt;</span>${esc(z.slice(1))}`; }
      else if (/^\|/.test(z)) { k = 'tab'; inhalt = esc(z).replace(/\|/g, '<span class="rohr">|</span>'); }
      else inhalt = inline(z);
      return `<span class="z ${k}" style="--i:${Math.min(i, 40)}">${inhalt || ' '}</span>`;
    }).join('');
    const zeichen = text.length, tokens = Math.round(zeichen / 3.6 / 10) * 10;
    umfang.textContent = `${zeichen.toLocaleString('de-DE')} Zeichen · ≈ ${tokens} Tokens`;
  }

  // Variante: gleiche Adresse, eigener Pfad /ai/ oder llms.txt im Footer
  let variante = 'gleich', ansicht = 'mensch', wechselUhr = 0;
  const TEXTE = {
    gleich: { pfad: '', format: 'text/markdown · gleiche Adresse, umgeschaltet', datei: 'start.md', text: START_MD },
    pfad:   { pfad: 'ai/start.md', format: 'GET 200 · text/markdown; charset=utf-8', datei: '/ai/start.md', text: START_MD },
    llms:   { pfad: 'llms.txt', format: 'text/plain · optional, ohne belegte Wirkung bei Google', datei: '/llms.txt', text: LLMS_TXT },
  };

  function setzeAnsicht(ziel, { still = false } = {}) {
    if (ziel === ansicht) return;
    ansicht = ziel;
    tipp.classList.remove('an'); clearTimeout(tippUhr);
    radios.forEach(r => { r.checked = r.value === ziel; });
    const alt = ziel === 'maschine' ? mensch : maschine, neu = ziel === 'maschine' ? maschine : mensch;
    const t = TEXTE[variante];
    if (ziel === 'maschine') {
      adresse.textContent = t.pfad; format.textContent = t.format; datei.textContent = t.datei;
      zeichnen(t.text);
    }
    clearTimeout(wechselUhr);
    const tauschen = () => {
      html.classList.toggle('maschine', ziel === 'maschine');
      alt.hidden = true; alt.classList.remove('geht');
      neu.hidden = false;
      if (!reduziert()) {
        neu.classList.add('kommt'); void neu.offsetWidth; neu.classList.remove('kommt');
        code.classList.remove('zeigt'); if (ziel === 'maschine') { void code.offsetWidth; code.classList.add('zeigt'); }
      }
      if (!still) ansage.textContent = ziel === 'maschine' ? 'Maschinenansicht: Inhalt als Markdown.' : '';
      if (!still) scrollTo({ top: 0 });
    };
    if (reduziert()) { tauschen(); return; }
    // Eigener Pfad: wie ein echter Seitenwechsel mit Ladebalken; gleiche URL: nur Überblenden
    const echterWechsel = variante !== 'gleich';
    alt.classList.add('geht');
    if (echterWechsel) {
      lade.className = 'lade'; void lade.offsetWidth; lade.classList.add('laeuft');
      wechselUhr = setTimeout(() => { lade.className = 'lade fertig'; tauschen(); }, LADE_MS);
    } else {
      // Kopf, Indikator und Fläche wechseln sofort mit, die Inhalte überblenden
      html.classList.toggle('maschine', ziel === 'maschine');
      wechselUhr = setTimeout(tauschen, ANSICHT_MS);
    }
  }
  radios.forEach(r => r.addEventListener('change', () => setzeAnsicht(r.value)));
  addEventListener('keydown', e => {
    if (e.key.toLowerCase() !== 'm' || e.metaKey || e.ctrlKey || e.altKey || variante === 'llms') return;
    if (e.target.closest('input[type=text], textarea')) return;
    setzeAnsicht(ansicht === 'mensch' ? 'maschine' : 'mensch');
  });
  $('[data-llms]').addEventListener('click', e => { e.preventDefault(); if (variante !== 'llms') setzeVariante('llms'); setzeAnsicht('maschine'); });
  $('[data-zurueck]').addEventListener('click', e => { e.preventDefault(); setzeAnsicht('mensch'); });
  $$('a[href^="#"]').forEach(a => { if (!a.hasAttribute('data-llms') && !a.hasAttribute('data-zurueck')) a.addEventListener('click', e => e.preventDefault()); });

  function setzeVariante(v) {
    variante = v;
    $$('[data-variante]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.variante === v)));
    html.classList.toggle('v-llms', v === 'llms');
    if (ansicht === 'maschine') {
      const t = TEXTE[v];
      adresse.textContent = t.pfad; format.textContent = t.format; datei.textContent = t.datei; zeichnen(t.text);
      if (!reduziert()) { code.classList.remove('zeigt'); void code.offsetWidth; code.classList.add('zeigt'); }
    }
  }
  $$('[data-variante]').forEach(b => b.addEventListener('click', () => setzeVariante(b.dataset.variante)));

  // Kopieren mit Rückmeldung (1,6 s)
  async function kopieren(knopf) {
    const text = knopf.dataset.kopiere === 'markdown' ? TEXTE[variante].text : FRAGE;
    try { await navigator.clipboard.writeText(text); } catch (e) { /* ohne Berechtigung: Rückmeldung trotzdem zeigen, Text bleibt markierbar */ }
    rueckmeldung(knopf);
  }
  function rueckmeldung(knopf) {
    const span = knopf.querySelector('[data-text]');
    knopf.classList.add('kopiert'); span.textContent = 'Kopiert';
    clearTimeout(knopf._uhr);
    knopf._uhr = setTimeout(() => { knopf.classList.remove('kopiert'); span.textContent = span.dataset.text; }, 1600);
  }
  $$('[data-kopiere]').forEach(b => b.addEventListener('click', () => kopieren(b)));

  /* ---------- Vorführung: gedachter Zeiger schaltet hin und her ---------- */
  const zeiger = $('[data-zeiger]');
  let laeuft = false, runde = 0, uhren = [], zpos = { x: innerWidth * .62, y: innerHeight * .62 }, zAnim = 0;
  const easeInOut = t => t < .5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
  function fahre(el, ms = 650) {
    if (!el) return;
    const r = el.getBoundingClientRect(), von = { ...zpos }, nach = { x: r.left + r.width * .55, y: r.top + r.height * .6 }, t0 = performance.now();
    cancelAnimationFrame(zAnim);
    const s = t => {
      const p = Math.min(1, (t - t0) / ms), k = easeInOut(p);
      zpos = { x: von.x + (nach.x - von.x) * k, y: von.y + (nach.y - von.y) * k };
      zeiger.style.transform = `translate(${zpos.x - 2}px, ${zpos.y - 1}px)`;
      if (p < 1) zAnim = requestAnimationFrame(s);
    };
    zAnim = requestAnimationFrame(s);
  }
  function druecke(fn) { zeiger.classList.add('drueckt'); setTimeout(() => { zeiger.classList.remove('drueckt'); fn && fn(); }, 140); }
  const nach = (ms, fn) => uhren.push(setTimeout(fn, ms));
  const label = v => radios.find(r => r.value === v).closest('label');

  function runde1() {
    if (!laeuft) return;
    const v = runde % 2 ? 'pfad' : 'gleich'; runde++;
    setzeVariante(v);
    nach(300, () => fahre(label('maschine')));
    nach(1050, () => druecke(() => setzeAnsicht('maschine', { still: true })));
    nach(2000, () => fahre($('[data-kopiere="markdown"]')));
    nach(2800, () => druecke(() => rueckmeldung($('[data-kopiere="markdown"]'))));
    nach(4600, () => fahre(label('mensch')));
    nach(5350, () => druecke(() => setzeAnsicht('mensch', { still: true })));
    nach(5600, () => fahre($('h1'), 900));
    nach(7600, runde1);
  }
  function stoppe() { uhren.forEach(clearTimeout); uhren = []; cancelAnimationFrame(zAnim); }

  function neustart() {
    stoppe(); laeuft = false; html.classList.remove('vorfuehrung');
    setzeVariante('gleich'); setzeAnsicht('mensch', { still: true });
  }
  function vorfuehren() {
    stoppe(); laeuft = true; runde = 0;
    html.classList.add('vorfuehrung');
    setzeAnsicht('mensch', { still: true });
    zpos = { x: innerWidth * .62, y: innerHeight * .62 };
    zeiger.style.transform = `translate(${zpos.x}px, ${zpos.y}px)`;
    runde1();
  }
  function pause() { stoppe(); laeuft = false; }
  function weiter() { if (html.classList.contains('vorfuehrung') && !laeuft) { laeuft = true; runde1(); } }

})();
</script>
</body>
</html>