Add styled legal dialogs with unchanged supplied content

assets/legal.mjs

@@ -0,0 +1,83 @@
+const dialogs = new Map(
+  [...document.querySelectorAll('.legal-dialog')].map(dialog => [dialog.id, dialog]),
+);
+let returnFocus;
+
+function syncDialog() {
+  const next = dialogs.get(location.hash.slice(1));
+  let closed = false;
+
+  for (const dialog of dialogs.values()) {
+    if (dialog.open && dialog !== next) {
+      dialog.close();
+      closed = true;
+    }
+  }
+
+  if (next && !next.open) {
+    returnFocus ??= document.querySelector(`[data-legal-open][aria-controls="${next.id}"]`);
+    next.showModal();
+    next.querySelector('.legal-copy').scrollTop = 0;
+    next.querySelector('h1').focus({ preventScroll: true });
+  } else if (!next && closed) {
+    returnFocus?.focus({ preventScroll: true });
+    returnFocus = undefined;
+  }
+}
+
+function dismissDialog() {
+  history.replaceState(null, '', location.pathname + location.search);
+  syncDialog();
+}
+
+for (const link of document.querySelectorAll('[data-legal-open]')) {
+  link.addEventListener('click', event => {
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    returnFocus = link;
+    history.pushState(null, '', link.hash);
+    syncDialog();
+  });
+}
+
+for (const dialog of dialogs.values()) {
+  dialog.querySelector('[data-legal-close]').addEventListener('click', event => {
+    event.preventDefault();
+    dismissDialog();
+  });
+  dialog.addEventListener('cancel', event => {
+    event.preventDefault();
+    dismissDialog();
+  });
+  dialog.addEventListener('keydown', event => {
+    if (event.key !== 'Tab' || event.altKey || event.ctrlKey || event.metaKey) return;
+    const controls = [...dialog.querySelectorAll('a[href], button:not([disabled]), [tabindex="0"]')];
+    const first = controls[0];
+    const last = controls.at(-1);
+    const active = document.activeElement;
+    if (!controls.includes(active) || (event.shiftKey && active === first)
+      || (!event.shiftKey && active === last)) {
+      event.preventDefault();
+      (event.shiftKey ? last : first)?.focus();
+    }
+  });
+
+  // Close only when both ends of a click are on the backdrop, not a text-selection drag.
+  let startedOutside = false;
+  const outside = event => {
+    const rect = dialog.getBoundingClientRect();
+    return event.clientX < rect.left || event.clientX > rect.right
+      || event.clientY < rect.top || event.clientY > rect.bottom;
+  };
+  dialog.addEventListener('pointerdown', event => {
+    startedOutside = event.target === dialog && outside(event);
+  });
+  dialog.addEventListener('click', event => {
+    if (startedOutside && event.target === dialog && outside(event)) dismissDialog();
+    startedOutside = false;
+  });
+}
+
+window.addEventListener('hashchange', syncDialog);
+window.addEventListener('popstate', syncDialog);
+syncDialog();

assets/styles.css

@@ -22,6 +22,10 @@
   --color-sand: #e5cd9c;
   --color-announcement: #f2e6cc;
   --color-focus: #ffc300;
+  --color-accent: #ef3a57;
+  --color-dialog: #721a3d;
+  --color-overlay: rgb(24 8 16 / 72%);
+  --color-shadow: rgb(24 8 16 / 45%);
   /* One design unit is one point on the supplied 1200 × 900 layout. */
   --unit: 0.0833333333vw;
   --font-body: Roboto, system-ui, sans-serif;
@@ -284,6 +288,166 @@ address {
   transform: none;
 }
 
+.site-footer {
+  margin-block-start: 28px;
+  border-block-start: 1px solid color-mix(in srgb, var(--color-sand) 35%, transparent);
+  padding-block-start: 8px;
+  color: var(--color-sand);
+  font-size: 14px;
+}
+
+.site-footer nav {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.site-footer a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 44px;
+}
+
+html:has(.legal-dialog[open]),
+html:has(.legal-dialog:target) {
+  overflow: hidden;
+}
+
+.legal-dialog {
+  position: fixed;
+  inset: 0;
+  inline-size: min(48rem, calc(100% - 32px));
+  max-inline-size: none;
+  max-block-size: calc(100svh - 32px);
+  margin: auto;
+  border: 1px solid color-mix(in srgb, var(--color-sand) 45%, transparent);
+  border-block-start: 4px solid var(--color-accent);
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  background: var(--color-dialog);
+  color: var(--color-cream);
+  box-shadow: 0 24px 80px var(--color-shadow);
+}
+
+.legal-dialog::backdrop {
+  background: var(--color-overlay);
+  backdrop-filter: blur(5px);
+}
+
+/* Fragment links still open the complete text if JavaScript is unavailable. */
+.legal-dialog:target:not([open]) {
+  display: block;
+  z-index: 3;
+  box-shadow: 0 0 0 100vmax var(--color-overlay);
+}
+
+.legal-shell {
+  display: flex;
+  flex-direction: column;
+  max-block-size: min(54rem, calc(100svh - 38px));
+}
+
+.legal-header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-block-end: 1px solid color-mix(in srgb, var(--color-sand) 25%, transparent);
+  padding: 12px clamp(18px, 4vw, 36px);
+}
+
+.legal-header img {
+  inline-size: 48px;
+  block-size: 38px;
+}
+
+.legal-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  min-block-size: 44px;
+  border-radius: 6px;
+  padding-inline: 12px;
+  color: var(--color-sand);
+  font-size: 14px;
+}
+
+.legal-close:hover {
+  background: color-mix(in srgb, var(--color-cream) 8%, transparent);
+  text-decoration: none;
+}
+
+.legal-close span {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.legal-copy {
+  min-block-size: 0;
+  padding: clamp(20px, 4vw, 36px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  text-align: start;
+  overflow-wrap: anywhere;
+  font-size: 16px;
+  font-style: normal;
+  line-height: 1.65;
+  scrollbar-color: var(--color-sand) var(--color-dialog);
+}
+
+.legal-copy h1 {
+  margin: 0 0 24px;
+  color: var(--color-cream);
+  font-size: clamp(26px, 4vw, 34px);
+  font-style: italic;
+  line-height: 1.2;
+}
+
+.legal-copy h2 {
+  margin: 32px 0 16px;
+  color: var(--color-sand);
+  font-size: 22px;
+  line-height: 1.35;
+}
+
+.legal-copy h3 {
+  margin: 24px 0 12px;
+  color: var(--color-sand);
+  font-size: 18px;
+  line-height: 1.4;
+}
+
+.legal-copy h4 {
+  margin: 20px 0 10px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+.legal-copy p,
+.legal-copy ul {
+  margin-block: 0 16px;
+}
+
+.legal-copy ul {
+  padding-inline-start: 24px;
+}
+
+.legal-copy li + li {
+  margin-block-start: 8px;
+}
+
+.legal-copy a {
+  color: var(--color-sand);
+  text-decoration: underline;
+}
+
+.legal-copy > :last-child {
+  margin-block-end: 0;
+}
+
 @media (width > 1024px) {
   body::after {
     position: fixed;

docs/implementation.md

@@ -6,6 +6,12 @@ CSS lives in `assets/styles.css`; all colors are CSS custom properties. Its link
 
 At 1024 px and below, both decorative images are ordinary `body` backgrounds. The tape SVG applies the original shadow settings to each strip, including their overlap. Its 270 pt view box leaves room for the shadow without moving or scaling the artwork. The desktop pseudo-elements and isolated stacking context are disabled, leaving mobile touch scrolling to the document without separate decorative layers. At 600 px and below, the whole Kontodaten section is centered, including the account holder, bank name and each complete IBAN/BIC row.
 
+## Legal content
+
+The footer opens native dialogs for Impressum and Datenschutz. All legal HTML lives in `index.html`; `assets/legal.mjs` handles opening, closing, focus, and fragment navigation. The burgundy reading panels scroll independently while the page stays in place. The close link, Escape, backdrop click and browser Back close the popup; fragment links also expose the content without JavaScript. CSS and the legal module have content-hash URL parameters that must be refreshed when their files change.
+
+The supplied, unchanged PDFs are retained under `design/legal/`. The legal content was copied directly from their `imprint_html_de` and `privacy_html_de` form fields, preserving the supplied headings, paragraphs, lists, punctuation and entities. The PDF export's table of contents, integration instructions and duplicate text rendering are not website copy. Only title attributes for dialog accessibility were added. Run `python3 scripts/verify-legal-content.py` with the development dependency `pypdf` to compare the complete embedded HTML against both original fields. It ignores only indentation, line endings and the two title attributes. Do not revise the legal wording without replacement content from the owner.
+
 ## Preview and deployment
 
 Requires Node 20.11 or newer. There are no npm dependencies and no third-party page requests.

docs/verification.md

@@ -44,3 +44,12 @@ Mobile shadow and heading follow-up on 2026-09-07:
 - Added each strip's shadow to the separate mobile tape SVG. At 390 px, initial screenshot differences are confined to the tape and shadow area (the top 146 px); content positions are unchanged. The 1200 px desktop screenshot remains pixel-identical.
 - At 390 px, the Kontodaten heading's text center is 194.99 px against the viewport center of 195 px. Desktop keeps its original alignment. No horizontal overflow is present.
 - The complete bank section is now centered on narrow mobile layouts: account holder, bank name, and each IBAN/BIC label-value row. Text centers match the viewport center at 320, 390 and 600 px, with no horizontal overflow. Checks at 601 and 1200 px retain the original alignment.
+
+Legal dialogs on 2026-09-10:
+
+- Retained both supplied PDFs byte for byte under `design/legal/`. `scripts/verify-legal-content.py` confirms that the complete embedded Impressum (712 characters) and Datenschutz (19,921 characters) HTML match their PDF form fields, allowing only line endings, indentation, and accessible title attributes.
+- Built with `npm run build`; module syntax and `git diff --check` pass. No runtime dependencies or third-party resource requests were added.
+- Inspected both dialogs at 1200, 390 and 320 px, including the final paragraphs. The complete text scrolls to the bottom, the close control remains visible, and neither the document nor reading area overflows horizontally. The popup also fits an 844 × 390 landscape viewport.
+- Close links, Escape, backdrop clicks, browser Back and direct fragment URLs work. Tab and Shift+Tab remain within each modal; closing restores focus to its footer link and preserves the underlying scroll position.
+- Emulated mobile touch input scrolls the Datenschutz reading area while the page remains stationary; after closing, normal page touch scrolling resumes. No JavaScript errors or external requests occurred.
+- With JavaScript disabled, both footer fragment links expose the full legal text through the CSS fallback; the close link returns to the footer.

index.html

@@ -35,8 +35,9 @@
     <link rel="manifest" href="./site.webmanifest">
     <link rel="preload" href="./assets/fonts/roboto-italic-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="./assets/fonts/roboto-latin.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="stylesheet" href="./assets/styles.css?v=608a0e84af62">
+    <link rel="stylesheet" href="./assets/styles.css?v=19b33a80b5f1">
     <script type="module" src="./assets/app.mjs"></script>
+    <script type="module" src="./assets/legal.mjs?v=8e53198bf9c1"></script>
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -145,6 +146,98 @@
         </div>
       </section>
       <p class="visually-hidden" id="copy-status" role="status" aria-live="polite"></p>
+      <footer class="site-footer" id="rechtliches">
+        <nav aria-label="Rechtliche Informationen">
+          <a href="#impressum" data-legal-open aria-haspopup="dialog" aria-controls="impressum">Impressum</a>
+          <a href="#datenschutz" data-legal-open aria-haspopup="dialog" aria-controls="datenschutz">Datenschutz</a>
+        </nav>
+      </footer>
     </main>
+
+    <dialog class="legal-dialog" id="impressum" aria-labelledby="impressum-title">
+      <div class="legal-shell">
+        <header class="legal-header">
+          <img src="./assets/logo.svg" alt="" width="48" height="38">
+          <a class="legal-close" href="#rechtliches" data-legal-close aria-label="Impressum schließen">Schließen <span aria-hidden="true">×</span></a>
+        </header>
+        <article class="legal-copy">
+          <!-- legal:impressum:start -->
+          <h1 id="impressum-title" tabindex="-1">Impressum</h1>
+
+          <p>Buch &amp; Bohne e. V.<br />
+          Markt 5<br />
+          08606 Oelsnitz/Vogtl.</p>
+
+          <p>Vereinsregister: VR 7977<br />
+          Registergericht: Amtsgericht Chemnitz</p>
+
+          <p><strong>Vertreten durch:</strong><br />
+          Lilly M&ouml;bius</p>
+
+          <h2>Kontakt</h2>
+          <p>Telefon: +49 (0) 37421 23633<br />
+          Telefax: +49 (0) 37421 24008<br />
+          E-Mail: lesecafe@buchundbohne.de</p>
+
+          <h2>Redaktionell verantwortlich</h2>
+          <p>Lilly M&ouml;bius<br />
+          Buch &amp; Bohne e. V.<br />
+          Markt 5<br />
+          08606 Oelsnitz/Vogtl.</p>
+
+          <h2>Verbraucher&shy;streit&shy;beilegung/Universal&shy;schlichtungs&shy;stelle</h2>
+          <p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
+          <!-- legal:impressum:end -->
+        </article>
+      </div>
+    </dialog>
+
+    <dialog class="legal-dialog" id="datenschutz" aria-labelledby="datenschutz-title">
+      <div class="legal-shell">
+        <header class="legal-header">
+          <img src="./assets/logo.svg" alt="" width="48" height="38">
+          <a class="legal-close" href="#rechtliches" data-legal-close aria-label="Datenschutz schließen">Schließen <span aria-hidden="true">×</span></a>
+        </header>
+        <article class="legal-copy">
+          <!-- legal:datenschutz:start -->
+          <h1 id="datenschutz-title" tabindex="-1">Datenschutz&shy;erkl&auml;rung</h1>
+          <h2>1. Datenschutz auf einen Blick</h2>
+          <h3>Allgemeine Hinweise</h3> <p>Die folgenden Hinweise geben einen einfachen &Uuml;berblick dar&uuml;ber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie pers&ouml;nlich identifiziert werden k&ouml;nnen. Ausf&uuml;hrliche Informationen zum Thema Datenschutz entnehmen Sie unserer unter diesem Text aufgef&uuml;hrten Datenschutzerkl&auml;rung.</p>
+          <h3>Datenerfassung auf dieser Website</h3> <h4>Wer ist verantwortlich f&uuml;r die Datenerfassung auf dieser Website?</h4> <p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten k&ouml;nnen Sie dem Abschnitt &bdquo;Hinweis zur verantwortlichen Stelle&ldquo; in dieser Datenschutzerkl&auml;rung entnehmen.</p> <h4>Wie erfassen wir Ihre Daten?</h4> <p>Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.&nbsp;B. um Daten handeln, die Sie in ein Kontaktformular eingeben.</p> <p>Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z.&nbsp;B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs). Die Erfassung dieser Daten erfolgt automatisch, sobald Sie diese Website betreten.</p> <h4>Wof&uuml;r nutzen wir Ihre Daten?</h4> <p>Ein Teil der Daten wird erhoben, um eine fehlerfreie Bereitstellung der Website zu gew&auml;hrleisten. Andere Daten k&ouml;nnen zur Analyse Ihres Nutzerverhaltens verwendet werden. Sofern &uuml;ber die Website Vertr&auml;ge geschlossen oder angebahnt werden k&ouml;nnen, werden die &uuml;bermittelten Daten auch f&uuml;r Vertragsangebote, Bestellungen oder sonstige Auftragsanfragen verarbeitet.</p> <h4>Welche Rechte haben Sie bez&uuml;glich Ihrer Daten?</h4> <p>Sie haben jederzeit das Recht, unentgeltlich Auskunft &uuml;ber Herkunft, Empf&auml;nger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben au&szlig;erdem ein Recht, die Berichtigung oder L&ouml;schung dieser Daten zu verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt haben, k&ouml;nnen Sie diese Einwilligung jederzeit f&uuml;r die Zukunft widerrufen. Au&szlig;erdem haben Sie das Recht, unter bestimmten Umst&auml;nden die Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen. Des Weiteren steht Ihnen ein Beschwerderecht bei der zust&auml;ndigen Aufsichtsbeh&ouml;rde zu.</p> <p>Hierzu sowie zu weiteren Fragen zum Thema Datenschutz k&ouml;nnen Sie sich jederzeit an uns wenden.</p>
+          <h2>2. Hosting</h2>
+          <p>Wir hosten die Inhalte unserer Website bei folgendem Anbieter:</p>
+          <h3>All-Inkl</h3> <p>Anbieter ist die ALL-INKL.COM - Neue Medien M&uuml;nnich, Inh. Ren&eacute; M&uuml;nnich, Hauptstra&szlig;e 68, 02742 Friedersdorf (nachfolgend All-Inkl). Details entnehmen Sie der Datenschutzerkl&auml;rung von All-Inkl: <a href="https://all-inkl.com/datenschutzinformationen/" target="_blank" rel="noopener noreferrer">https://all-inkl.com/datenschutzinformationen/</a>.</p> <p>Die Verwendung von All-Inkl erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Wir haben ein berechtigtes Interesse an einer m&ouml;glichst zuverl&auml;ssigen Darstellung unserer Website. Sofern eine entsprechende Einwilligung abgefragt wurde, erfolgt die Verarbeitung ausschlie&szlig;lich auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO und &sect; 25 Abs. 1 TDDDG, soweit die Einwilligung die Speicherung von Cookies oder den Zugriff auf Informationen im Endger&auml;t des Nutzers (z.&nbsp;B. Device-Fingerprinting) im Sinne des TDDDG umfasst. Die Einwilligung ist jederzeit widerrufbar.</p>
+
+          <h4>Auftragsverarbeitung</h4> <p>Wir haben einen Vertrag &uuml;ber Auftragsverarbeitung (AVV) zur Nutzung des oben genannten Dienstes geschlossen. Hierbei handelt es sich um einen datenschutzrechtlich vorgeschriebenen Vertrag, der gew&auml;hrleistet, dass dieser die personenbezogenen Daten unserer Websitebesucher nur nach unseren Weisungen und unter Einhaltung der DSGVO verarbeitet.</p>
+          <h2>3. Allgemeine Hinweise und Pflicht&shy;informationen</h2>
+          <h3>Datenschutz</h3> <p>Die Betreiber dieser Seiten nehmen den Schutz Ihrer pers&ouml;nlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerkl&auml;rung.</p> <p>Wenn Sie diese Website benutzen, werden verschiedene personenbezogene Daten erhoben. Personenbezogene Daten sind Daten, mit denen Sie pers&ouml;nlich identifiziert werden k&ouml;nnen. Die vorliegende Datenschutzerkl&auml;rung erl&auml;utert, welche Daten wir erheben und wof&uuml;r wir sie nutzen. Sie erl&auml;utert auch, wie und zu welchem Zweck das geschieht.</p> <p>Wir weisen darauf hin, dass die Daten&uuml;bertragung im Internet (z.&nbsp;B. bei der Kommunikation per E-Mail) Sicherheitsl&uuml;cken aufweisen kann. Ein l&uuml;ckenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht m&ouml;glich.</p>
+          <h3>Hinweis zur verantwortlichen Stelle</h3> <p>Die verantwortliche Stelle f&uuml;r die Datenverarbeitung auf dieser Website ist:</p> <p>Buch &amp; Bohne e. V.<br />
+          Lilly M&ouml;bius<br />
+          Markt 5<br />
+          08606 Oelsnitz/Vogtl.</p>
+
+          <p>Telefon: +49 (0) 37421 23633<br />
+          E-Mail: lesecafe@buchundbohne.de</p>
+           <p>Verantwortliche Stelle ist die nat&uuml;rliche oder juristische Person, die allein oder gemeinsam mit anderen &uuml;ber die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten (z.&nbsp;B. Namen, E-Mail-Adressen o. &Auml;.) entscheidet.</p>
+
+          <h3>Speicherdauer</h3> <p>Soweit innerhalb dieser Datenschutzerkl&auml;rung keine speziellere Speicherdauer genannt wurde, verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck f&uuml;r die Datenverarbeitung entf&auml;llt. Wenn Sie ein berechtigtes L&ouml;schersuchen geltend machen oder eine Einwilligung zur Datenverarbeitung widerrufen, werden Ihre Daten gel&ouml;scht, sofern wir keine anderen rechtlich zul&auml;ssigen Gr&uuml;nde f&uuml;r die Speicherung Ihrer personenbezogenen Daten haben (z.&nbsp;B. steuer- oder handelsrechtliche Aufbewahrungsfristen); im letztgenannten Fall erfolgt die L&ouml;schung nach Fortfall dieser Gr&uuml;nde.</p>
+          <h3>Allgemeine Hinweise zu den Rechtsgrundlagen der Datenverarbeitung auf dieser Website</h3> <p>Sofern Sie in die Datenverarbeitung eingewilligt haben, verarbeiten wir Ihre personenbezogenen Daten auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO bzw. Art. 9 Abs. 2 lit. a DSGVO, sofern besondere Datenkategorien nach Art. 9 Abs. 1 DSGVO verarbeitet werden. Im Falle einer ausdr&uuml;cklichen Einwilligung in die &Uuml;bertragung personenbezogener Daten in Drittstaaten erfolgt die Datenverarbeitung au&szlig;erdem auf Grundlage von Art. 49 Abs. 1 lit. a DSGVO. Sofern Sie in die Speicherung von Cookies oder in den Zugriff auf Informationen in Ihr Endger&auml;t (z.&nbsp;B. via Device-Fingerprinting) eingewilligt haben, erfolgt die Datenverarbeitung zus&auml;tzlich auf Grundlage von &sect; 25 Abs. 1 TDDDG. Die Einwilligung ist jederzeit widerrufbar. Sind Ihre Daten zur Vertragserf&uuml;llung oder zur Durchf&uuml;hrung vorvertraglicher Ma&szlig;nahmen erforderlich, verarbeiten wir Ihre Daten auf Grundlage des Art. 6 Abs. 1 lit. b DSGVO. Des Weiteren verarbeiten wir Ihre Daten, sofern diese zur Erf&uuml;llung einer rechtlichen Verpflichtung erforderlich sind, auf Grundlage von Art. 6 Abs. 1 lit. c DSGVO. Die Datenverarbeitung kann ferner auf Grundlage unseres berechtigten Interesses nach Art. 6 Abs. 1 lit. f DSGVO erfolgen. &Uuml;ber die jeweils im Einzelfall einschl&auml;gigen Rechtsgrundlagen wird in den folgenden Abs&auml;tzen dieser Datenschutzerkl&auml;rung informiert.</p>
+          <h3>Empf&auml;nger von personenbezogenen Daten</h3> <p>Im Rahmen unserer Gesch&auml;ftst&auml;tigkeit arbeiten wir mit verschiedenen externen Stellen zusammen. Dabei ist teilweise auch eine &Uuml;bermittlung von personenbezogenen Daten an diese externen Stellen erforderlich. Wir geben personenbezogene Daten nur dann an externe Stellen weiter, wenn dies im Rahmen einer Vertragserf&uuml;llung erforderlich ist, wenn wir gesetzlich hierzu verpflichtet sind (z.&nbsp;B. Weitergabe von Daten an Steuerbeh&ouml;rden), wenn wir ein berechtigtes Interesse nach Art. 6 Abs. 1 lit. f DSGVO an der Weitergabe haben oder wenn eine sonstige Rechtsgrundlage die Datenweitergabe erlaubt. Beim Einsatz von Auftragsverarbeitern geben wir personenbezogene Daten unserer Kunden nur auf Grundlage eines g&uuml;ltigen Vertrags &uuml;ber Auftragsverarbeitung weiter. Im Falle einer gemeinsamen Verarbeitung wird ein Vertrag &uuml;ber gemeinsame Verarbeitung geschlossen.</p>
+          <h3>Widerruf Ihrer Einwilligung zur Datenverarbeitung</h3> <p>Viele Datenverarbeitungsvorg&auml;nge sind nur mit Ihrer ausdr&uuml;cklichen Einwilligung m&ouml;glich. Sie k&ouml;nnen eine bereits erteilte Einwilligung jederzeit widerrufen. Die Rechtm&auml;&szlig;igkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf unber&uuml;hrt.</p>
+          <h3>Widerspruchsrecht gegen die Datenerhebung in besonderen F&auml;llen sowie gegen Direktwerbung (Art. 21 DSGVO)</h3> <p>WENN DIE DATENVERARBEITUNG AUF GRUNDLAGE VON ART. 6 ABS. 1 LIT. E ODER F DSGVO ERFOLGT, HABEN SIE JEDERZEIT DAS RECHT, AUS GR&Uuml;NDEN, DIE SICH AUS IHRER BESONDEREN SITUATION ERGEBEN, GEGEN DIE VERARBEITUNG IHRER PERSONENBEZOGENEN DATEN WIDERSPRUCH EINZULEGEN; DIES GILT AUCH F&Uuml;R EIN AUF DIESE BESTIMMUNGEN GEST&Uuml;TZTES PROFILING. DIE JEWEILIGE RECHTSGRUNDLAGE, AUF DENEN EINE VERARBEITUNG BERUHT, ENTNEHMEN SIE DIESER DATENSCHUTZERKL&Auml;RUNG. WENN SIE WIDERSPRUCH EINLEGEN, WERDEN WIR IHRE BETROFFENEN PERSONENBEZOGENEN DATEN NICHT MEHR VERARBEITEN, ES SEI DENN, WIR K&Ouml;NNEN ZWINGENDE SCHUTZW&Uuml;RDIGE GR&Uuml;NDE F&Uuml;R DIE VERARBEITUNG NACHWEISEN, DIE IHRE INTERESSEN, RECHTE UND FREIHEITEN &Uuml;BERWIEGEN ODER DIE VERARBEITUNG DIENT DER GELTENDMACHUNG, AUS&Uuml;BUNG ODER VERTEIDIGUNG VON RECHTSANSPR&Uuml;CHEN (WIDERSPRUCH NACH ART. 21 ABS. 1 DSGVO).</p> <p>WERDEN IHRE PERSONENBEZOGENEN DATEN VERARBEITET, UM DIREKTWERBUNG ZU BETREIBEN, SO HABEN SIE DAS RECHT, JEDERZEIT WIDERSPRUCH GEGEN DIE VERARBEITUNG SIE BETREFFENDER PERSONENBEZOGENER DATEN ZUM ZWECKE DERARTIGER WERBUNG EINZULEGEN; DIES GILT AUCH F&Uuml;R DAS PROFILING, SOWEIT ES MIT SOLCHER DIREKTWERBUNG IN VERBINDUNG STEHT. WENN SIE WIDERSPRECHEN, WERDEN IHRE PERSONENBEZOGENEN DATEN ANSCHLIESSEND NICHT MEHR ZUM ZWECKE DER DIREKTWERBUNG VERWENDET (WIDERSPRUCH NACH ART. 21 ABS. 2 DSGVO).</p>
+          <h3>Beschwerde&shy;recht bei der zust&auml;ndigen Aufsichts&shy;beh&ouml;rde</h3> <p>Im Falle von Verst&ouml;&szlig;en gegen die DSGVO steht den Betroffenen ein Beschwerderecht bei einer Aufsichtsbeh&ouml;rde, insbesondere in dem Mitgliedstaat ihres gew&ouml;hnlichen Aufenthalts, ihres Arbeitsplatzes oder des Orts des mutma&szlig;lichen Versto&szlig;es zu. Das Beschwerderecht besteht unbeschadet anderweitiger verwaltungsrechtlicher oder gerichtlicher Rechtsbehelfe.</p>
+          <h3>Recht auf Daten&shy;&uuml;bertrag&shy;barkeit</h3> <p>Sie haben das Recht, Daten, die wir auf Grundlage Ihrer Einwilligung oder in Erf&uuml;llung eines Vertrags automatisiert verarbeiten, an sich oder an einen Dritten in einem g&auml;ngigen, maschinenlesbaren Format aush&auml;ndigen zu lassen. Sofern Sie die direkte &Uuml;bertragung der Daten an einen anderen Verantwortlichen verlangen, erfolgt dies nur, soweit es technisch machbar ist.</p>
+          <h3>Auskunft, Berichtigung und L&ouml;schung</h3> <p>Sie haben im Rahmen der geltenden gesetzlichen Bestimmungen jederzeit das Recht auf unentgeltliche Auskunft &uuml;ber Ihre gespeicherten personenbezogenen Daten, deren Herkunft und Empf&auml;nger und den Zweck der Datenverarbeitung und ggf. ein Recht auf Berichtigung oder L&ouml;schung dieser Daten. Hierzu sowie zu weiteren Fragen zum Thema personenbezogene Daten k&ouml;nnen Sie sich jederzeit an uns wenden.</p>
+          <h3>Recht auf Einschr&auml;nkung der Verarbeitung</h3> <p>Sie haben das Recht, die Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen. Hierzu k&ouml;nnen Sie sich jederzeit an uns wenden. Das Recht auf Einschr&auml;nkung der Verarbeitung besteht in folgenden F&auml;llen:</p> <ul> <li>Wenn Sie die Richtigkeit Ihrer bei uns gespeicherten personenbezogenen Daten bestreiten, ben&ouml;tigen wir in der Regel Zeit, um dies zu &uuml;berpr&uuml;fen. F&uuml;r die Dauer der Pr&uuml;fung haben Sie das Recht, die Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.</li> <li>Wenn die Verarbeitung Ihrer personenbezogenen Daten unrechtm&auml;&szlig;ig geschah/geschieht, k&ouml;nnen Sie statt der L&ouml;schung die Einschr&auml;nkung der Datenverarbeitung verlangen.</li> <li>Wenn wir Ihre personenbezogenen Daten nicht mehr ben&ouml;tigen, Sie sie jedoch zur Aus&uuml;bung, Verteidigung oder Geltendmachung von Rechtsanspr&uuml;chen ben&ouml;tigen, haben Sie das Recht, statt der L&ouml;schung die Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.</li> <li>Wenn Sie einen Widerspruch nach Art. 21 Abs. 1 DSGVO eingelegt haben, muss eine Abw&auml;gung zwischen Ihren und unseren Interessen vorgenommen werden. Solange noch nicht feststeht, wessen Interessen &uuml;berwiegen, haben Sie das Recht, die Einschr&auml;nkung der Verarbeitung Ihrer personenbezogenen Daten zu verlangen.</li> </ul> <p>Wenn Sie die Verarbeitung Ihrer personenbezogenen Daten eingeschr&auml;nkt haben, d&uuml;rfen diese Daten &ndash; von ihrer Speicherung abgesehen &ndash; nur mit Ihrer Einwilligung oder zur Geltendmachung, Aus&uuml;bung oder Verteidigung von Rechtsanspr&uuml;chen oder zum Schutz der Rechte einer anderen nat&uuml;rlichen oder juristischen Person oder aus Gr&uuml;nden eines wichtigen &ouml;ffentlichen Interesses der Europ&auml;ischen Union oder eines Mitgliedstaats verarbeitet werden.</p>
+          <h3>SSL- bzw. TLS-Verschl&uuml;sselung</h3> <p>Diese Seite nutzt aus Sicherheitsgr&uuml;nden und zum Schutz der &Uuml;bertragung vertraulicher Inhalte, wie zum Beispiel Bestellungen oder Anfragen, die Sie an uns als Seitenbetreiber senden, eine SSL- bzw. TLS-Verschl&uuml;sselung. Eine verschl&uuml;sselte Verbindung erkennen Sie daran, dass die Adresszeile des Browsers von &bdquo;http://&ldquo; auf &bdquo;https://&ldquo; wechselt und an dem Schloss-Symbol in Ihrer Browserzeile.</p> <p>Wenn die SSL- bzw. TLS-Verschl&uuml;sselung aktiviert ist, k&ouml;nnen die Daten, die Sie an uns &uuml;bermitteln, nicht von Dritten mitgelesen werden.</p>
+          <h3>Widerspruch gegen Werbe-E-Mails</h3> <p>Der Nutzung von im Rahmen der Impressumspflicht ver&ouml;ffentlichten Kontaktdaten zur &Uuml;bersendung von nicht ausdr&uuml;cklich angeforderter Werbung und Informationsmaterialien wird hiermit widersprochen. Die Betreiber der Seiten behalten sich ausdr&uuml;cklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-E-Mails, vor.</p>
+          <h2>4. Datenerfassung auf dieser Website</h2>
+          <h3>Cookies</h3> <p>Unsere Internetseiten verwenden so genannte &bdquo;Cookies&ldquo;. Cookies sind kleine Datenpakete und richten auf Ihrem Endger&auml;t keinen Schaden an. Sie werden entweder vor&uuml;bergehend f&uuml;r die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente Cookies) auf Ihrem Endger&auml;t gespeichert. Session-Cookies werden nach Ende Ihres Besuchs automatisch gel&ouml;scht. Permanente Cookies bleiben auf Ihrem Endger&auml;t gespeichert, bis Sie diese selbst l&ouml;schen oder eine automatische L&ouml;schung durch Ihren Webbrowser erfolgt.</p> <p>Cookies k&ouml;nnen von uns (First-Party-Cookies) oder von Drittunternehmen stammen (sog. Third-Party-Cookies). Third-Party-Cookies erm&ouml;glichen die Einbindung bestimmter Dienstleistungen von Drittunternehmen innerhalb von Webseiten (z.&nbsp;B. Cookies zur Abwicklung von Zahlungsdienstleistungen).</p> <p>Cookies haben verschiedene Funktionen. Zahlreiche Cookies sind technisch notwendig, da bestimmte Webseitenfunktionen ohne diese nicht funktionieren w&uuml;rden (z.&nbsp;B. die Warenkorbfunktion oder die Anzeige von Videos). Andere Cookies k&ouml;nnen zur Auswertung des Nutzerverhaltens oder zu Werbezwecken verwendet werden.</p> <p>Cookies, die zur Durchf&uuml;hrung des elektronischen Kommunikationsvorgangs, zur Bereitstellung bestimmter, von Ihnen erw&uuml;nschter Funktionen (z.&nbsp;B. f&uuml;r die Warenkorbfunktion) oder zur Optimierung der Website (z.&nbsp;B. Cookies zur Messung des Webpublikums) erforderlich sind (notwendige Cookies), werden auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO gespeichert, sofern keine andere Rechtsgrundlage angegeben wird. Der Websitebetreiber hat ein berechtigtes Interesse an der Speicherung von notwendigen Cookies zur technisch fehlerfreien und optimierten Bereitstellung seiner Dienste. Sofern eine Einwilligung zur Speicherung von Cookies und vergleichbaren Wiedererkennungstechnologien abgefragt wurde, erfolgt die Verarbeitung ausschlie&szlig;lich auf Grundlage dieser Einwilligung (Art. 6 Abs. 1 lit. a DSGVO und &sect; 25 Abs. 1 TDDDG); die Einwilligung ist jederzeit widerrufbar.</p> <p>Sie k&ouml;nnen Ihren Browser so einstellen, dass Sie &uuml;ber das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben, die Annahme von Cookies f&uuml;r bestimmte F&auml;lle oder generell ausschlie&szlig;en sowie das automatische L&ouml;schen der Cookies beim Schlie&szlig;en des Browsers aktivieren. Bei der Deaktivierung von Cookies kann die Funktionalit&auml;t dieser Website eingeschr&auml;nkt sein.</p> <p>Sofern weitere Cookies und Dienste auf dieser Website eingesetzt werden, k&ouml;nnen Sie dies dieser Datenschutzerkl&auml;rung entnehmen.</p>
+          <h3>Server-Log-Dateien</h3> <p>Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien, die Ihr Browser automatisch an uns &uuml;bermittelt. Dies sind:</p> <ul> <li>Browsertyp und Browserversion</li> <li>verwendetes Betriebssystem</li> <li>Referrer URL</li> <li>Hostname des zugreifenden Rechners</li> <li>Uhrzeit der Serveranfrage</li> <li>IP-Adresse</li> </ul> <p>Eine Zusammenf&uuml;hrung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.</p> <p>Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Der Websitebetreiber hat ein berechtigtes Interesse an der technisch fehlerfreien Darstellung und der Optimierung seiner Website &ndash; hierzu m&uuml;ssen die Server-Log-Files erfasst werden.</p>
+          <h3>Anfrage per E-Mail, Telefon oder Telefax</h3> <p>Wenn Sie uns per E-Mail, Telefon oder Telefax kontaktieren, wird Ihre Anfrage inklusive aller daraus hervorgehenden personenbezogenen Daten (Name, Anfrage) zum Zwecke der Bearbeitung Ihres Anliegens bei uns gespeichert und verarbeitet. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p> <p>Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erf&uuml;llung eines Vertrags zusammenh&auml;ngt oder zur Durchf&uuml;hrung vorvertraglicher Ma&szlig;nahmen erforderlich ist. In allen &uuml;brigen F&auml;llen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO) oder auf Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO) sofern diese abgefragt wurde; die Einwilligung ist jederzeit widerrufbar.</p> <p>Die von Ihnen an uns per Kontaktanfragen &uuml;bersandten Daten verbleiben bei uns, bis Sie uns zur L&ouml;schung auffordern, Ihre Einwilligung zur Speicherung widerrufen oder der Zweck f&uuml;r die Datenspeicherung entf&auml;llt (z.&nbsp;B. nach abgeschlossener Bearbeitung Ihres Anliegens). Zwingende gesetzliche Bestimmungen &ndash; insbesondere gesetzliche Aufbewahrungsfristen &ndash; bleiben unber&uuml;hrt.</p>
+          <!-- legal:datenschutz:end -->
+        </article>
+      </div>
+    </dialog>
   </body>
 </html>

scripts/verify-legal-content.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python3
+"""Verify embedded legal HTML against the original PDFs (development: pypdf)."""
+from pathlib import Path
+import textwrap
+
+from pypdf import PdfReader
+
+ROOT = Path(__file__).resolve().parents[1]
+page = (ROOT / 'index.html').read_text()
+
+for name, filename, field in [
+    ('impressum', 'impressum_buchhandlung_am_markt_de.pdf', 'imprint_html_de'),
+    ('datenschutz', 'datenschutzerklaerung_buchhandlung_am_markt_de.pdf', 'privacy_html_de'),
+]:
+    source = PdfReader(ROOT / 'design/legal' / filename).get_fields()[field]['/V']
+    source = source.replace('\r\n', '\n').replace('\r', '\n').strip()
+    embedded = page.split(f'<!-- legal:{name}:start -->', 1)[1].split(f'<!-- legal:{name}:end -->', 1)[0]
+    embedded = textwrap.dedent(embedded).strip()
+    # The only markup addition is a focusable, labelled title for the dialog.
+    embedded = embedded.replace(f'<h1 id="{name}-title" tabindex="-1">', '<h1>', 1)
+    assert embedded == source, f'{name}: legal content differs from the supplied PDF'
+    print(f'{name}: complete embedded HTML matches the supplied PDF ({len(source)} characters)')