<nav class="navbar">
  <div class="navbar__container">
    <a class="navbar__brand" href="/">
      <span class="navbar__mark">A</span>
      <span>Anwendung</span>
    </a>
    <div class="navbar__menu">
      <a class="navbar__link navbar__link--active" href="#">Prüfen</a>
      <a class="navbar__link" href="#">Bereinigen</a>
    </div>
    <div class="navbar__user"><span class="navbar__avatar">J</span> Jens S.</div>
  </div>
</nav>

<main class="container page">
  <header class="page-header">
    <div>
      <h1 class="page-header__title">Prüfbericht</h1>
      <p class="page-header__subtitle">Schriftsatz.docx · 148 KB</p>
    </div>
    <span class="badge badge--danger"><span class="badge__dot"></span>4 hoch</span>
  </header>
  <div class="stack"><p>Vier Befunde mit hoher Schwere in zwei Dateien.</p></div>
</main>

<div class="stack">
  <div class="tabs" role="tablist" aria-label="Ansichten" id="reiter-beispiel">
    <button class="tabs__tab tabs__tab--active" role="tab" id="tab-uebersicht" aria-selected="true" aria-controls="panel-uebersicht" tabindex="0">Übersicht</button>
    <button class="tabs__tab" role="tab" id="tab-kommentare" aria-selected="false" aria-controls="panel-kommentare" tabindex="-1">Kommentare <span class="badge badge--sm">5</span></button>
  </div>
  <section class="tab-panel" role="tabpanel" id="panel-uebersicht" aria-labelledby="tab-uebersicht"><p>Drei Befunde in zwei Dateien.</p></section>
  <section class="tab-panel" role="tabpanel" id="panel-kommentare" aria-labelledby="tab-kommentare" hidden><p>Fünf Kommentare von zwei Verfassern.</p></section>
</div>
<script type="module">
  import { connectTabs } from "https://static.jsengenberger.de/v1/tabs/tabs.js";
  connectTabs(document.getElementById("reiter-beispiel"));
</script>

<div class="row">
<button class="btn btn-primary">Dokument öffnen</button>
<button class="btn btn-secondary">Ansehen</button>
<button class="btn btn-danger">Alles entfernen</button>
<button class="btn btn-ghost">Zurücksetzen</button>
<button class="btn btn-secondary btn-sm">klein</button>
<button class="btn btn-primary btn-lg">groß</button>
<button class="btn btn-primary" disabled>gesperrt</button>
</div>

<div class="row">
<span class="badge badge--danger"><span class="badge__dot"></span>Hoch</span>
<span class="badge badge--warning"><span class="badge__dot"></span>Mittel</span>
<span class="badge badge--info"><span class="badge__dot"></span>Gering</span>
<span class="badge badge--success"><span class="badge__dot"></span>Sauber</span>
<span class="badge">70 Befunde</span>
</div>

<section class="card">
  <header class="card__header">
    <h2 class="card__header-title">Was gefunden wurde</h2>
    <span class="badge badge--danger">4 hoch</span>
  </header>
  <div class="card__body"><p>Autor, Firma und zwei Kommentare mit Namen.</p></div>
  <footer class="card__footer">
    <button class="btn btn-secondary">Verwerfen</button>
    <button class="btn btn-primary">Auswahl entfernen</button>
  </footer>
</section>

<div class="grid grid--4">
<div class="stat-card">
  <div class="stat-card__tile stat-card__tile--danger">H</div>
  <div>
    <div class="stat-card__value">4</div>
    <div class="stat-card__label">Hohes Risiko</div>
  </div>
</div>
<div class="stat-card"><div class="stat-card__tile stat-card__tile--warning">M</div><div><div class="stat-card__value">7</div><div class="stat-card__label">Mittleres Risiko</div></div></div>
<div class="stat-card"><div class="stat-card__tile stat-card__tile--info">G</div><div><div class="stat-card__value">12</div><div class="stat-card__label">Geringes Risiko</div></div></div>
<div class="stat-card"><div class="stat-card__tile stat-card__tile--success">S</div><div><div class="stat-card__value">3</div><div class="stat-card__label">Dateien sauber</div></div></div>
</div>

<div class="grid grid--4">
<div class="card is-dragging"><div class="card__body">Seite 1</div></div>
<div class="card is-drop-target" data-side="before"><div class="card__body">Seite 2</div></div>
<div class="card"><div class="card__body">Seite 3</div></div>
<div class="card is-drop-target" data-side="after"><div class="card__body">Seite 4</div></div>
</div>

<div class="form-group">
  <label class="form-label" for="autor">Neuer Autorname</label>
  <input class="form-control" id="autor" placeholder="leer lassen">
  <span class="form-hint">Leer entfernt den Namen vollständig.</span>
</div>

<div class="form-group">
  <label class="form-label" for="pfad">Vorlagenpfad</label>
  <input class="form-control form-control--mono is-invalid" id="pfad" value="C:\Vorlagen\">
  <span class="form-error">Ein Pfad ist als Autorname nicht zulässig.</span>
</div>

<div class="form-group">
  <label class="form-label" for="tiefe">Prüftiefe</label>
  <select class="form-control form-select" id="tiefe"><option>Gründlich</option><option>Schnell</option></select>
</div>

<div class="form-group">
  <label class="form-label" for="notiz">Anmerkung</label>
  <textarea class="form-control form-textarea" id="notiz"></textarea>
</div>

<div class="stack stack--sm">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" id="a" checked>
    <label class="form-check-label" for="a">Autor und Firma entfernen</label>
  </div>
  <div class="form-switch">
    <input class="form-switch-input" type="checkbox" id="roh" checked>
    <label for="roh">Rohansicht</label>
  </div>
</div>

<div class="form-group">
  <label class="form-label" for="wert">Wert in der Datei</label>
  <div class="input-group">
    <input class="form-control form-control--mono" id="wert" value="Dr. Katharina Vogelsang">
    <button class="btn btn-secondary">Leeren</button>
  </div>
</div>

<div class="form-group">
  <label class="form-label" for="anschrift">Anschrift</label>
  <textarea class="form-control form-control--sm form-textarea--grow" id="anschrift" rows="1"></textarea>
</div>

<div class="dropzone">
  <p class="empty-state__title"><span class="pointer-only">Word-Dokument hierher ziehen</span><span class="touch-only">Word-Dokument auswählen</span></p>
  <p class="empty-state__text"><span class="pointer-only">oder </span><button class="btn btn-secondary btn-sm">Datei auswählen</button></p>
</div>

<div class="table-scroll">
  <table class="table">
    <thead><tr><th>Fundort</th><th>Wert</th><th class="table__num">Anzahl</th></tr></thead>
    <tbody>
      <tr><td class="table__mono">word/people.xml</td><td class="table__mono">Katharina Vogelsang</td><td class="table__num">218</td></tr>
    </tbody>
  </table>
</div>

<table class="table">
  <tbody>
    <tr><th class="table__key" scope="row">Autor</th><td class="table__mono">Dr. Katharina Vogelsang</td></tr>
  </tbody>
</table>

<div class="table-scroll">
  <table class="table table--nowrap table--edit">
    <thead><tr><th class="table__num">Nr.</th><th>Name</th><th class="table__actions"><span class="visually-hidden">Zeile entfernen</span></th></tr></thead>
    <tbody>
      <tr><td class="table__num">1</td><td><input class="form-control form-control--sm" aria-label="Name, Zeile 1" value="Vogelsang"></td><td class="table__actions"><button class="btn btn-ghost btn-sm">Entfernen</button></td></tr>
      <tr><td class="table__num">2</td><td><input class="form-control form-control--sm" aria-label="Name, Zeile 2" value="Schulz"></td><td class="table__actions"><button class="btn btn-ghost btn-sm">Entfernen</button></td></tr>
    </tbody>
  </table>
</div>

<div class="table-scroll">
  <table class="table">
    <thead><tr><th>Feld</th><th>Änderung</th></tr></thead>
    <tbody>
      <tr><th class="table__key" scope="row">Fristende</th><td><span class="diff"><span class="diff__part"><span class="diff__label">vorher</span> <del>12.03.2026</del></span> <span class="diff__part"><span class="diff__label">nachher</span> <ins>15.03.2026</ins></span></span></td></tr>
      <tr><th class="table__key" scope="row">Zuständig</th><td><span class="diff"><span class="diff__part"><span class="diff__label">vorher</span> <del>Amtsgericht Bonn</del></span> <span class="diff__part"><span class="diff__label">nachher</span> <ins>Landgericht Köln, 3. Zivilkammer</ins></span></span></td></tr>
    </tbody>
  </table>
</div>

<div class="stack stack--sm">
  <div class="alert alert--warning">
    <span class="alert__mark" aria-hidden="true">!</span>
    <div class="alert__content">
      <p class="alert__title">Änderungen annehmen verändert den Inhalt</p>
      <p class="alert__message">Das Original bleibt unangetastet.</p>
    </div>
  </div>
  <div class="alert alert--success">
    <span class="alert__mark" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5l3 3 7-7"/></svg></span>
    <div class="alert__content"><p class="alert__title">Bereinigt — keine Metadaten mehr gefunden.</p></div>
  </div>
  <div class="alert alert--danger">
    <span class="alert__mark" aria-hidden="true">!</span>
    <div class="alert__content"><p class="alert__title">Die Datei ist beschädigt und lässt sich nicht öffnen.</p></div>
  </div>
  <div class="alert alert--info">
    <span class="alert__mark" aria-hidden="true">i</span>
    <div class="alert__content"><p class="alert__title">Die Prüfung läuft vollständig im Browser.</p></div>
  </div>
</div>

<details class="disclosure">
  <summary>Einzelheiten zu den Links ansehen (3)</summary>
  <div class="stack stack--sm">
    <div class="list-item">https://example.org/rechnung</div>
    <div class="list-item">https://example.org/konto</div>
    <div class="list-item">https://example.org/hilfe</div>
  </div>
</details>

<div class="form-group">
  <label class="form-label" for="zugang">Bekanntgabe des Bescheids</label>
  <button class="info-btn" type="button" popovertarget="info-zugang" aria-controls="info-zugang" aria-label="Erläuterung: Bekanntgabe">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6.25"/><path d="M8 7.25v3.75"/><circle cx="8" cy="5" r="0.5" fill="currentColor"/></svg>
  </button>
  <span class="info-pop" id="info-zugang" popover>Ein schriftlicher Verwaltungsakt gilt am vierten Tag nach der Aufgabe zur Post als bekannt gegeben (§ 41 Abs. 2 Satz 1 VwVfG).</span>
  <input class="form-control" id="zugang" type="date">
</div>

<div class="stack stack--sm">
  <div class="progress progress--sm"><div class="progress__fill" style="width: 30%"></div></div>
  <div class="progress"><div class="progress__fill" style="width: 60%"></div></div>
  <div class="progress progress--lg"><div class="progress__fill progress__fill--success" style="width: 100%"></div></div>
</div>

<div class="empty-state">
  <div class="empty-state__mark" aria-hidden="true">∅</div>
  <h2 class="empty-state__title">Noch kein Dokument geöffnet</h2>
  <p class="empty-state__text">Ziehen Sie eine Word-Datei hierher.</p>
  <button class="btn btn-primary">Datei auswählen</button>
</div>

<div class="modal-overlay">
  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="t">
    <header class="modal__header">
      <div>
        <h2 class="modal__title" id="t">Änderungen annehmen?</h2>
        <p class="modal__subtitle">16 Revisionen von drei Personen</p>
      </div>
      <button class="btn btn-ghost btn-sm" aria-label="Schließen">×</button>
    </header>
    <div class="modal__body"><p>Die Revisionen werden übernommen und aus dem Dokument entfernt. Das lässt sich nicht rückgängig machen.</p></div>
    <footer class="modal__footer">
      <button class="btn btn-secondary">Abbrechen</button>
      <button class="btn btn-primary">Annehmen</button>
    </footer>
  </div>
</div>

<p>Der Wert steht in <code>word/people.xml</code>.</p>

<pre><span class="code-mark--high">m.schulz@kanzlei.example</span></pre>

<div id="karte-beispiel"></div>
<script type="module">
  import { createMap } from "https://static.jsengenberger.de/v1/map/map.js";

  const map = await createMap(document.getElementById("karte-beispiel"), {
    label: "Bonn, Innenstadt",
    center: [7.0995, 50.734],
    zoom: 15,
  });
  const innenstadt = [7.09, 50.728, 7.11, 50.74];
  await map.highlightStreet("Poststraße", { area: innenstadt, category: 1, fit: false,
    info: "Vom Hauptbahnhof zum Münsterplatz" });
  await map.highlightStreet("Sternstraße", { area: innenstadt, category: 2, fit: false,
    info: "Fußgängerzone zwischen Friedensplatz und Markt" });
  map.addMarker([7.1029, 50.7351], { label: "Altes Rathaus", info: "Markt 2" });
  map.addMarker([7.0968, 50.732], { label: "Bonn Hauptbahnhof", text: "Hbf", category: 5 });
  map.setLegend({
    title: "Legende",
    toggle: true,
    items: [
      { label: "Poststraße", category: 1 },
      { label: "Sternstraße", category: 2 },
      { label: "Sehenswürdigkeit", kind: "marker" },
      { label: "Bahnhof", kind: "marker", category: 5 },
    ],
  });
</script>

<header class="print-header">
  <p class="print-header__title">Fristenberechnung — Ergebnis</p>
  <dl class="print-header__meta">
    <div><dt>Version</dt><dd>2.1.0</dd></div>
    <div><dt>Stand</dt><dd>01.11.2026</dd></div>
    <div><dt>Erstellt</dt><dd><time datetime="2026-11-01T14:32">01.11.2026, 14:32 Uhr</time></dd></div>
  </dl>
</header>