Druckansicht als System
Ein Druckstil für Speisekarte, Rezept, Rechtstext und Exposé: A4 mit Kopf, Fuß und „Seite 2 von 3“, weiße Flächen, Umbrüche an der richtigen Stelle, Linkadressen als Liste am Ende, Knopf „Drucken“ mit Optionen und eine Papieransicht mit demselben Stil.
Ein gemeinsamer Druckstil für alle Seiten, die Menschen ausdrucken: Speisekarte, Rezept, Exposé, Rechtstexte. @page legt A4, Ränder sowie Kopf und Fuß mit Seitenzahl „Seite 2 von 3“ fest. Navigation, Knöpfe, Karten und Banner fallen weg. Flächen werden weiß, Text schwarz, Bilder auf Wunsch weggelassen. Überschriften bleiben bei ihrem Text, Tabellenzeilen und Rezeptschritte brechen nicht. Linkadressen stehen als nummerierte Liste am Ende statt mitten im Satz. Ein Knopf „Drucken“ mit zwei, drei Optionen (mit Bildern, Linkliste) ruft den Druckdialog des Browsers. Eine Papieransicht zeigt denselben Druckstil auf dem Bildschirm.
Gedruckt wird, was man in der Hand braucht: die Karte für den Tisch, das Rezept in der Küche („nicht mit schmutzigen Fingern das Handy bedienen“), das Exposé zur Besichtigung, die AGB zum Abheften. Ohne Druckstil kommen Menüleiste, Cookie-Banner und graue Flächen mit. Ein sauberes Blatt mit Marke, Stand-Datum und Seitenzahl wirkt wie ein gesetztes Dokument und spart Toner.
Wann einsetzen
Gastronomie (Speisekarte, Mittagstisch), Lebensmittelhandwerk und Hofladen (Rezepte, Bestellliste), Immobilien (Exposé, Grundriss), Bestattung (Ablauf, Checkliste), Apotheke (Medikationsplan-Hilfe), Weingut (Preisliste), Rechtstexte aller Branchen. Als Grundausstattung in jede Seite mit langem Inhalt.
Wann nicht
Nicht als Ersatz für ein echtes PDF, wenn das Dokument verbindlich und unverändert sein muss (Vertrag, unterschriebenes Formular). Kein eigener „Druckversion“-Link auf eine zweite Seite: derselbe Inhalt mit @media print reicht. Keine Pflichtangaben nur im Druck oder nur am Bildschirm; Inhalt und Stand müssen gleich sein. Rechtstexte vom Kunden prüfen lassen.
Varianten
- Speisekarte: Rubriken ohne Umbruch, Preise rechtsbündig mit Tabellenziffern, Allergene als Fußnote
- Rezept: Zutaten und Schritte nebeneinander, Portionen vor dem Druck wählen, Schritte brechen nicht
- Rechtstext: Stand-Datum im Kopf, Abschnittsnummern, Linkadressen als Liste, Seitenzahl „von“
- Exposé: Titelseite mit Foto, Eckdaten-Tabelle, Grundriss auf eigener Seite, Ansprechperson im Fuß
Umsetzung
Ein Druckstil als <style media="print"> bzw. print.css, der nur Klassen des Inhalts anspricht. @page { size: A4; margin: 18mm 16mm 20mm; @top-left { content: "Marke · Dokument" } @bottom-right { content: "Seite " counter(page) " von " counter(pages) } }, dazu @page :first ohne Kopf. Im Druck: Navigation, Knöpfe, Pult, Video und Karten display: none; Flächen weiß, Text #000, Linien 0,5 pt; Schrift in pt (10,5 bis 11 pt), Zeilenhöhe 1,35; orphans und widows 3; h2, h3 break-after: avoid; Rezeptschritte, Tabellenzeilen, Gerichte break-inside: avoid; thead wiederholt sich von selbst. Grid und Flex vor dem Umbruch in Blöcke auflösen, weil sie schlecht brechen. Linkadressen: vor dem Druck (beforeprint) sammelt ein Skript alle externen Links, setzt hochgestellte Nummern und eine Liste „Links in diesem Dokument“ ans Ende; ohne Skript greift a[href^="http"]::after mit attr(href). Optionen vor dem Druck (Bilder, Linkliste, Portionen) setzen Klassen am <html>. Der Knopf „Drucken“ ruft window.print(). Die Papieransicht schaltet denselben <style> per media="all" auf den Bildschirm und zeigt ihn als A4-Blatt; maßgeblich bleibt die Druckvorschau des Browsers bzw. ein PDF aus page.pdf().
Robust umsetzen
Telefon. Der Knopf „Drucken“ steht auch auf dem Telefon, denn Telefone drucken über AirPrint oder Mopria und speichern als PDF. Die Papieransicht skaliert das A4-Blatt auf die Breite. Optionen als große Schalter.
Ohne Bewegung. Der Wechsel zur Papieransicht passiert sofort, ohne Gleiten.
Barrierefrei. Der Druck ändert keinen Inhalt, nur die Darstellung. Bedeutung nie nur über Farbe (Graustufendruck): Allergene, Status und Hinweise mit Wort oder Zeichen. Der Knopf „Drucken“ ist ein echter <button> mit sichtbarem Namen; Optionen als Checkboxen mit Label. Die Papieransicht ist per Tastatur umschaltbar und meldet den Wechsel in einer role=status-Zeile.
Code
<!DOCTYPE html>
<!--
Druckansicht als System
Fundus · Zugang & Robustheit · https://cecodesign.de/lab/fundus/zugang/druckansicht-print/
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>Druckansicht als System · 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: 'Fraunces'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/fraunces:vf@latest/latin-full-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Commissioner'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/commissioner:vf@latest/latin-full-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Libre Caslon Display'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/libre-caslon-display@latest/latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; 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; }
/* Rezept gastro-warm-appetitlich (Grundwelt), Exposé: immobilien-diskret-hochwertig */
:root {
--grund: #F0ECE0; --text: #353839; --leise: #5B5F5C; --salbei: #7F937A; --dunkel: #293E3A; --senf: #EAC16E; --rose: #E1A894; --linie: rgba(53, 56, 57, .22); --flaeche: #E6E0CF;
--kopf: 'Fraunces', Georgia, serif; --sans: 'Commissioner', system-ui, sans-serif;
--kurve: cubic-bezier(0.16, 1, 0.3, 1); --kurve-aus: cubic-bezier(0.7, 0, 0.84, 0); --d-ui: 200ms; --d-auf: 400ms; --d-zu: 280ms;
}
:root[data-v="expose"] {
--grund: #FCFAF5; --text: #313131; --leise: #716F6D; --dunkel: #02385C; --flaeche: #EFE8DF; --linie: #D9D3CB; --senf: #ED7F1A;
--kopf: 'Libre Caslon Display', Georgia, serif; --sans: 'Hanken Grotesk', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--text); font: 400 17px/1.55 var(--sans); font-variation-settings: 'FLAR' 0; -webkit-text-size-adjust: 100%; }
:root:has(:focus-visible) { scroll-behavior: auto; }
body { min-height: 100svh; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--dunkel); outline-offset: 3px; border-radius: 2px; }
.label { font: 500 11px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
img { max-width: 100%; height: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.druck-nur { display: none; }
/* ── Website-Rahmen ───────────────────── */
.site-kopf { border-bottom: 1px solid var(--linie); }
.site-kopf__innen { max-width: 1180px; margin: 0 auto; padding: 16px clamp(16px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.wortmarke { font: 500 1.375rem/1 var(--kopf); font-variation-settings: 'SOFT' 100, 'opsz' 48; letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.wortmarke svg { width: 30px; height: 30px; flex: none; }
.wortmarke small { font: 500 10px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); display: block; margin-top: 5px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: auto; font-size: .9375rem; }
.site-nav a { text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--d-ui) var(--kurve); }
.site-nav a:hover, .site-nav a[aria-current] { background-size: 100% 1px; }
.pille { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 22px; background: var(--dunkel); color: #fff; text-decoration: none; font-weight: 500; }
.site-fuss { border-top: 1px solid var(--linie); margin-top: 64px; }
.site-fuss__innen { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px) 40px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--leise); font-size: .875rem; }
/* ── Dokument (das, was gedruckt wird) ── */
.doc { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) 0; }
.doc-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--linie); }
.doc-kopf h1 { font: 500 clamp(2.5rem, 1.6rem + 4vw, 5rem)/1.02 var(--kopf); font-variation-settings: 'SOFT' 80, 'opsz' 144; letter-spacing: -.015em; text-wrap: balance; }
:root[data-v="expose"] .doc-kopf h1 { font-weight: 400; letter-spacing: -.005em; line-height: 1.06; font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem); }
.doc-kopf p { margin-top: 12px; max-width: 56ch; color: var(--leise); }
.stand { font: 500 11px/1.4 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
/* Druckleiste */
.druckleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 10px 10px 18px; border-radius: 30px; background: #fff; border: 1px solid var(--linie); box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35); justify-self: end; }
.druckleiste .opt { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.druckleiste input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--dunkel); }
.druckleiste select { min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--linie); background: var(--grund); font-size: .875rem; }
.drucken { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 20px; border-radius: 22px; background: var(--dunkel); color: #fff; font-weight: 600; transition: transform var(--d-ui) var(--kurve), background-color var(--d-ui) var(--kurve); }
.drucken:hover { transform: translateY(-1px); }
.drucken:active { transform: translateY(1px); }
.drucken svg { width: 18px; height: 18px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--linie); border-radius: 22px; background: var(--grund); }
.stepper button { width: 36px; height: 36px; border-radius: 50%; font-size: 1.125rem; line-height: 1; }
.stepper button:hover { background: rgba(0, 0, 0, .06); }
.stepper output { min-width: 5.5em; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; }
/* Speisekarte */
.karte { margin-top: 40px; columns: 2 380px; column-gap: clamp(32px, 6vw, 88px); }
.rubrik { break-inside: avoid-column; margin-bottom: 36px; }
.rubrik h2 { font: 500 1.625rem/1.1 var(--kopf); font-variation-settings: 'SOFT' 100, 'opsz' 72; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1.5px solid currentColor; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rubrik h2 .label { font-size: 10px; }
.gericht { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 0; border-bottom: 1px dotted var(--linie); break-inside: avoid; }
.gericht h3 { font: 600 1.0625rem/1.3 var(--sans); }
.gericht p { grid-column: 1; font-size: .9375rem; color: var(--leise); }
.preis { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; white-space: nowrap; }
.allergen { font: 500 .6875rem/1 'Geist Mono', monospace; letter-spacing: .06em; color: var(--leise); vertical-align: .15em; margin-left: 4px; }
.fussnote { margin-top: 8px; padding: 18px 20px; border-radius: 12px; background: var(--flaeche); font-size: .875rem; color: var(--text); break-inside: avoid; }
.fussnote b { font-weight: 600; }
.karte-bild { margin: 0 0 36px; break-inside: avoid; }
.karte-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
.karte-bild figcaption { font-size: .8125rem; color: var(--leise); margin-top: 8px; }
/* Rezept */
.rezept { margin-top: 40px; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.rezept-bild { grid-column: 1 / -1; margin: 0; }
.rezept-bild img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 16px; display: block; }
.eckdaten { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; font-size: .9375rem; }
.eckdaten dt { font: 500 10px/1.2 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.eckdaten dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.zutaten { position: sticky; top: 20px; background: #fff; border-radius: 16px; padding: 24px; border: 1px solid var(--linie); }
.zutaten h2, .schritte h2 { font: 500 1.625rem/1.1 var(--kopf); font-variation-settings: 'SOFT' 100, 'opsz' 72; margin-bottom: 14px; }
.zutaten h3 { font: 600 .8125rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 6px; }
.zutaten ul { list-style: none; padding: 0; }
.zutaten li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--linie); font-size: .9375rem; break-inside: avoid; }
.zutaten li b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.schritte ol { list-style: none; padding: 0; counter-reset: s; }
.schritt { counter-increment: s; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); break-inside: avoid; }
.schritt::before { content: counter(s); font: 500 1.625rem/1 var(--kopf); color: var(--dunkel); grid-row: span 2; }
.schritt h3 { font: 600 1.0625rem/1.3 var(--sans); }
.schritt h3 small { font: 500 11px/1 'Geist Mono', monospace; letter-spacing: .08em; color: var(--leise); margin-left: 8px; }
.schritt p { font-size: .9375rem; max-width: 60ch; }
.tipp { margin-top: 22px; padding: 18px 20px; border-left: 3px solid var(--senf); background: rgba(234, 193, 110, .16); border-radius: 0 12px 12px 0; font-size: .9375rem; break-inside: avoid; }
/* Rechtstext */
.recht { margin-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.recht nav { position: sticky; top: 20px; font-size: .875rem; }
.recht nav ol { list-style: none; padding: 0; border-left: 1px solid var(--linie); }
.recht nav a { display: block; padding: 6px 0 6px 14px; text-decoration: none; color: var(--leise); }
.recht nav a:hover { color: var(--text); }
.recht-text { max-width: 68ch; }
.recht-text section { padding-bottom: 22px; }
.recht-text h2 { font: 500 1.375rem/1.2 var(--kopf); font-variation-settings: 'SOFT' 60, 'opsz' 48; margin: 10px 0 8px; display: flex; align-items: baseline; gap: 14px; scroll-margin-top: 20px; }
.recht-text h2 span { font: 500 12px/1 'Geist Mono', monospace; color: var(--leise); }
.recht-text p, .recht-text li { font-size: .9688rem; hyphens: auto; }
.recht-text p + p { margin-top: 8px; }
.recht-text ul { margin: 8px 0 0 1.2em; }
.recht-text a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.platzhalter { background: rgba(234, 193, 110, .3); border-radius: 3px; padding: 0 3px; }
/* Exposé */
.expose-titel { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.expose-titel figure { margin: 0; }
.expose-titel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.expose-titel figcaption { font-size: .8125rem; color: var(--leise); margin-top: 8px; }
.daten { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.daten caption { text-align: left; font: 500 11px/1.2 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); padding-bottom: 10px; }
.daten th, .daten td { padding: 9px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.daten th { font-weight: 400; color: var(--leise); width: 46%; }
.daten td { font-weight: 600; }
.preisblock { margin-top: 18px; padding: 16px 18px; background: var(--flaeche); }
.preisblock b { display: block; font: 400 2rem/1.1 var(--kopf); color: var(--dunkel); }
.preisblock p { font-size: .8125rem; color: var(--leise); margin-top: 4px; }
.expose-text { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.expose-text h2, .grundriss-seite h2 { font: 400 1.75rem/1.15 var(--kopf); color: var(--dunkel); margin-bottom: 12px; }
.expose-text p { font-size: .9688rem; max-width: 60ch; }
.expose-text p + p { margin-top: 10px; }
.energie { margin-top: 20px; }
.grundriss-seite { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--linie); }
.grundriss { width: 100%; max-width: 760px; height: auto; display: block; background: #fff; border: 1px solid var(--linie); }
.ansprech { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: .9375rem; }
.ansprech b { font-weight: 600; }
/* ── Papieransicht (Bildschirm) ───────── */
html.papier { background: #7d817c; }
html.papier .site-kopf, html.papier .site-fuss { display: none; }
html.papier .doc { width: 210mm; max-width: none; margin: 28px auto 64px; padding: 26mm 16mm 28mm; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 24px 60px -24px rgba(0, 0, 0, .45); zoom: var(--z, 1); position: relative; animation: blatt-auf var(--d-auf) var(--kurve) both; }
.blatt-rand { display: none; }
html.papier .blatt-rand { display: flex; justify-content: space-between; gap: 12px; position: absolute; left: 16mm; right: 16mm; font: 400 8pt/1.2 var(--sans); color: #555; }
html.papier .blatt-rand--kopf { top: 10mm; }
html.papier .blatt-rand--fuss { bottom: 10mm; }
html.papier .doc [data-umbruch] { position: relative; margin-top: 36px; }
html.papier .doc [data-umbruch]::before { content: 'Seitenumbruch'; position: absolute; left: -16mm; right: -16mm; top: -14px; border-top: 1.5px dashed #9aa09a; font: 500 9px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #6d736d; padding-top: 4px; text-align: center; }
html.papier.zurueck .doc { animation: blatt-zu var(--d-zu) var(--kurve-aus) both; }
@keyframes blatt-auf { from { opacity: 0; transform: translateY(16px); } }
@keyframes blatt-zu { to { opacity: 0; transform: translateY(8px); } }
.papier-hinweis { display: none; }
html.papier .papier-hinweis { display: block; max-width: 210mm; margin: 0 auto; padding: 18px 4px 0; font: 500 11px/1.5 'Geist Mono', monospace; letter-spacing: .06em; color: #f4f4f0; text-align: center; zoom: var(--z, 1); }
/* ── Pult ─────────────────────────────── */
.pult { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px 8px 14px; border-radius: 10px; background: rgba(28, 30, 29, .94); color: #eeece6; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); max-width: calc(100vw - 24px); }
.pult .gruppe { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.pult span.l { font: 500 10px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(238, 236, 230, .68); margin-right: 6px; }
.pult button { font: 500 10.5px/1 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(238, 236, 230, .78); padding: 7px 9px; border-radius: 5px; transition: background-color 150ms var(--kurve); }
.pult button:hover { background: rgba(255, 255, 255, .08); }
.pult button[aria-pressed="true"] { background: #eeece6; color: #1c1e1d; }
.pult :focus-visible { outline-color: #fff; }
@media (max-width: 860px) {
.doc-kopf, .rezept, .recht, .expose-titel, .expose-text { grid-template-columns: minmax(0, 1fr); }
.druckleiste { justify-self: start; border-radius: 18px; }
.zutaten, .recht nav { position: static; }
.site-nav { display: none; }
}
@media (max-width: 420px) {
.druckleiste { padding: 12px; }
.drucken { width: 100%; justify-content: center; }
.karte { columns: 1; }
.site-kopf .pille { display: none; }
}
.vorschau body { overflow: hidden; }
.vorschau .site-fuss { display: none; }
:root.reduziert *, :root.reduziert *::before, :root.reduziert *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
@media (hover: none) { .drucken:hover { transform: none; } }
@media (forced-colors: active) {
button, [role=button], [role=tab], [role=switch], input, select, textarea { border: 1px solid ButtonText !important; }
html.papier .doc { border: 1px solid CanvasText; }
}
</style>
<!-- Der Druckstil: gilt beim Drucken. Die Papieransicht schaltet ihn mit media="all" auf den Bildschirm. Er spricht nur Klassen des Inhalts an. -->
<style id="druckstil" media="print">
@page { size: A4; margin: 22mm 16mm 22mm;
@top-left { content: "Landgasthof Haselmaus"; font: 8pt 'Commissioner', sans-serif; color: #444; }
@top-right { content: "Stand 05.11.2026"; font: 8pt 'Commissioner', sans-serif; color: #444; }
@bottom-left { content: "Marktplatz 7 · 86720 Nördlingen · 09081 0 27 15"; font: 8pt 'Commissioner', sans-serif; color: #444; }
@bottom-right { content: "Seite " counter(page) " von " counter(pages); font: 8pt 'Commissioner', sans-serif; color: #444; }
}
@page karte { @top-left { content: "Landgasthof Haselmaus · Speisekarte"; } }
@page rezept { @top-left { content: "Landgasthof Haselmaus · Rezept aus der Backstube"; } }
@page recht { @top-left { content: "Landgasthof Haselmaus · Gutscheinbedingungen"; } }
@page expose { margin: 22mm 18mm 24mm;
@top-left { content: "Bernsdorff Immobilien · Exposé HAL-2611"; font: 8pt 'Hanken Grotesk', sans-serif; color: #444; }
@top-right { content: "Stand 05.11.2026 · Angaben ohne Gewähr"; font: 8pt 'Hanken Grotesk', sans-serif; color: #444; }
@bottom-left { content: "Clara Bernsdorff · 0791 0 93 40 12 · Am Markt 3, 74523 Schwäbisch Hall"; font: 8pt 'Hanken Grotesk', sans-serif; color: #444; }
@bottom-right { content: "Seite " counter(page) " von " counter(pages); font: 8pt 'Hanken Grotesk', sans-serif; color: #444; }
}
@page expose:first { @top-left { content: none; } @top-right { content: none; } }
.site-kopf, .site-fuss, .druckleiste, .nur-bildschirm, .recht nav, .papier-hinweis { display: none !important; }
.doc { max-width: none; margin: 0; padding: 0; color: #000; background: #fff; font-size: 10.5pt; line-height: 1.38; }
.doc[data-pane="speisekarte"] { page: karte; }
.doc[data-pane="rezept"] { page: rezept; }
.doc[data-pane="rechtstext"] { page: recht; }
.doc[data-pane="expose"] { page: expose; }
.doc * { color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
.doc p, .doc li { orphans: 3; widows: 3; }
.doc h1, .doc h2, .doc h3 { break-after: avoid; }
.doc a { text-decoration: none; }
.doc .label, .doc .stand, .doc .allergen { color: #333 !important; }
.druck-nur { display: block; }
sup.druck-nur { display: inline; font: 600 6.5pt/1 'Commissioner', sans-serif; margin-left: 1px; }
.links-im-text .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
.ohne-bilder .doc figure { display: none !important; }
.doc-kopf { display: block; padding-bottom: 5mm; border-bottom: .75pt solid #000; }
.doc-kopf h1 { font-size: 26pt; line-height: 1.05; }
.doc-kopf p { font-size: 10pt; color: #222 !important; }
.stand { margin-top: 3mm; }
.karte { columns: 2; column-gap: 9mm; margin-top: 6mm; }
.rubrik { margin-bottom: 5mm; break-inside: auto; }
.rubrik h2 { font-size: 13pt; padding-bottom: 1.5mm; margin-bottom: 1mm; border-bottom-width: 1pt; }
.gericht { padding: 1.6mm 0; border-bottom: .4pt dotted #888; }
.gericht h3 { font-size: 10pt; }
.gericht p { font-size: 9pt; color: #333 !important; }
.karte-bild { margin-bottom: 5mm; }
.karte-bild img { aspect-ratio: 3 / 2; border-radius: 0; }
.fussnote { background: none !important; border: .5pt solid #000; border-radius: 0; padding: 3mm; font-size: 8.5pt; }
.rezept { display: grid; grid-template-columns: 58mm minmax(0, 1fr); gap: 8mm; margin-top: 6mm; }
.rezept-bild img { aspect-ratio: 21 / 6; border-radius: 0; }
.zutaten { position: static; background: none !important; border: .75pt solid #000; border-radius: 0; padding: 4mm; }
.zutaten h2, .schritte h2 { font-size: 14pt; margin-bottom: 2mm; }
.zutaten li { font-size: 9.5pt; padding: 1.2mm 0; border-bottom-color: #999; grid-template-columns: 4.6em minmax(0, 1fr); gap: 2mm; }
.schritt { padding: 2.6mm 0; border-bottom: .4pt solid #999; grid-template-columns: 9mm minmax(0, 1fr); }
.schritt::before { font-size: 16pt; }
.schritt h3 { font-size: 10.5pt; }
.schritt p { font-size: 10pt; }
.tipp { background: none !important; border-left: 2pt solid #000; padding: 2mm 4mm; }
.recht { display: block; margin-top: 6mm; }
.recht-text { max-width: none; columns: 1; }
.recht-text h2 { font-size: 12pt; margin: 4mm 0 1.5mm; }
.recht-text p, .recht-text li { font-size: 9.8pt; }
.recht-text section { padding-bottom: 2mm; break-inside: auto; }
.platzhalter { background: none !important; border-bottom: .75pt dashed #000; }
.expose-titel { display: block; margin-top: 4mm; }
.expose-titel img { aspect-ratio: 16 / 9; }
.expose-titel figcaption { font-size: 8pt; }
.expose-titel .daten { margin-top: 6mm; }
.daten { font-size: 10pt; }
.daten th, .daten td { padding: 1.5mm 0; border-bottom: .4pt solid #999; }
.daten tr { break-inside: avoid; }
.preisblock { background: none !important; border: .75pt solid #000; padding: 3mm 4mm; }
.preisblock b { font-size: 18pt; }
.expose-text { display: block; margin-top: 0; break-before: page; }
.expose-text > div + div { margin-top: 6mm; }
.expose-text h2, .grundriss-seite h2 { font-size: 15pt; }
.expose-text p { font-size: 10pt; max-width: none; }
.grundriss-seite { break-before: page; border-top: 0; padding-top: 0; margin-top: 0; }
.grundriss { max-width: none; border: .5pt solid #000; }
.ansprech { font-size: 9.5pt; }
.druck-links { margin-top: 8mm; padding-top: 3mm; border-top: .75pt solid #000; break-inside: avoid; }
.druck-links h2 { font: 600 9pt/1.3 'Commissioner', sans-serif; margin-bottom: 1.5mm; }
.druck-links ol { margin: 0; padding-left: 5mm; font-size: 8.5pt; }
.druck-links li { word-break: break-all; }
</style>
<style media="print">
html, body { background: #fff !important; }
body { min-height: 0 !important; }
[data-fundus-pult], fundus-pult-knopf, [data-ansage], .blatt-rand { display: none !important; }
</style>
</head>
<body>
<header class="site-kopf" data-welt="haselmaus">
<div class="site-kopf__innen">
<a class="wortmarke" href="#"><svg viewBox="0 0 30 30" aria-hidden="true"><circle cx="15" cy="15" r="15" fill="#293E3A"/><path d="M8 19c1.5-5 5-8 9-8 2.4 0 4 1.3 4 3.3 0 2.6-2.6 4.7-6.2 4.7H8z" fill="#EAC16E"/><circle cx="18" cy="14" r="1.1" fill="#293E3A"/><path d="M9.5 12.5a2.2 2.2 0 1 1 3.4-1.8" fill="none" stroke="#EAC16E" stroke-width="1.6"/></svg><span>Landgasthof Haselmaus<small>Nördlingen im Ries</small></span></a>
<nav class="site-nav" aria-label="Hauptmenü"><a href="#" data-nav="speisekarte">Karte</a><a href="#" data-nav="rezept">Aus der Backstube</a><a href="#" data-nav="rechtstext">Gutscheine</a><a href="#">Anfahrt</a></nav>
<a class="pille" href="#">Tisch reservieren</a>
</div>
</header>
<header class="site-kopf" data-welt="bernsdorff" hidden>
<div class="site-kopf__innen">
<a class="wortmarke" href="#" style="font-family:'Libre Caslon Display',serif;font-weight:400;color:#02385C"><svg viewBox="0 0 30 30" aria-hidden="true"><rect width="30" height="30" fill="#02385C"/><path d="M9 22V8h7a4 4 0 0 1 0 8H9m7 0a3.4 3.4 0 0 1 0 6H9" fill="none" stroke="#FCFAF5" stroke-width="1.6"/></svg><span>Bernsdorff Immobilien<small>Schwäbisch Hall · Hohenlohe</small></span></a>
<nav class="site-nav" aria-label="Hauptmenü"><a href="#">Kaufen</a><a href="#">Verkaufen</a><a href="#">Bewertung</a><a href="#">Über uns</a></nav>
<a class="pille" href="#" style="background:#ED7F1A;color:#1d1a16">Besichtigung anfragen</a>
</div>
</header>
<main class="doc" id="doc">
<!-- ───── Speisekarte ───── -->
<article data-pane="speisekarte" aria-labelledby="h-karte">
<div class="doc-kopf">
<div>
<p class="label">Mittag und Abend · ab 11:30</p>
<h1 id="h-karte">Unsere Karte im November</h1>
<p>Was die Höfe im Ries gerade liefern: Kraut, Zwiebeln, Lamm aus Heroldingen und Äpfel vom Rollenberg. Brot aus dem eigenen Ofen.</p>
<p class="stand">Stand 05.11.2026 · Preise in Euro inkl. MwSt.</p>
</div>
<div class="druckleiste" role="group" aria-label="Drucken">
<label class="opt"><input type="checkbox" data-opt="bilder" checked> Mit Bild</label>
<label class="opt">Links <select data-opt="links" aria-label="Linkadressen im Druck"><option value="liste">als Liste</option><option value="text">im Text</option></select></label>
<button class="drucken" type="button" data-drucken><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 9V3h10v6M7 17H4v-7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v7h-3"/><rect x="7" y="14" width="10" height="7"/></svg>Karte drucken</button>
</div>
</div>
<div class="karte">
<figure class="karte-bild"><img src="bilder/zitronen-tisch.jpg" alt="Heller Teller mit einer halbierten und einer ganzen Zitrone auf dunklem Schiefer" width="1600" height="900" loading="lazy"><figcaption>Zitronentarte mit Rieser Quark, dazu Thymian aus dem Hofgarten</figcaption></figure>
<section class="rubrik"><h2>Zum Anfang <span class="label">Vorspeisen</span></h2>
<div class="gericht"><h3>Zwiebelsuppe mit Bergkäse-Croûton <span class="allergen">A G L</span></h3><span class="preis">8,50</span><p>Langsam geschmorte Zwiebeln, kräftige Rinderbrühe</p></div>
<div class="gericht"><h3>Rote Bete, Meerrettich, Walnuss <span class="allergen">G H</span></h3><span class="preis">9,80</span><p>Gebacken und roh, mit Schmand vom Hof Kerler</p></div>
<div class="gericht"><h3>Brotzeitbrett für zwei <span class="allergen">A G I</span></h3><span class="preis">16,00</span><p>Bauernbrot aus dem Ofen, Obatzda, Schinken, Essiggurken</p></div>
</section>
<section class="rubrik"><h2>Aus dem Ries <span class="label">Hauptgerichte</span></h2>
<div class="gericht"><h3>Lammschulter aus Heroldingen <span class="allergen">L</span></h3><span class="preis">27,50</span><p>Zwölf Stunden geschmort, Wirsing, Kartoffelstampf</p></div>
<div class="gericht"><h3>Rieser Zwiebelrostbraten <span class="allergen">A G I</span></h3><span class="preis">29,00</span><p>Vom Weiderind, Röstzwiebeln, handgeschabte Spätzle</p></div>
<div class="gericht"><h3>Krautkrapfen mit Speck <span class="allergen">A C G</span></h3><span class="preis">17,50</span><p>Auch ohne Speck, mit Bratensoße oder Rahm</p></div>
<div class="gericht"><h3>Kürbis aus dem Ofen <span class="allergen">G H</span></h3><span class="preis">19,00</span><p>Graupen, Bergkäse, geröstete Kerne, Salbeibutter</p></div>
</section>
<section class="rubrik"><h2>Zum Schluss <span class="label">Nachspeisen</span></h2>
<div class="gericht"><h3>Zitronentarte, Rieser Quark <span class="allergen">A C G</span></h3><span class="preis">7,50</span><p>Mürbeteig aus der Backstube, Thymian</p></div>
<div class="gericht"><h3>Apfelküchle, Zimtzucker <span class="allergen">A C G</span></h3><span class="preis">8,00</span><p>Äpfel vom Rollenberg, Vanilleeis</p></div>
</section>
<p class="fussnote"><b>Allergene:</b> A Gluten, C Ei, G Milch, H Schalenfrüchte, I Senf, L Sellerie. <span class="platzhalter">Angaben nach Rezeptur, vom Betrieb prüfen lassen.</span> Fragen Sie uns gern, wir kochen auch ohne.</p>
</div>
</article>
<!-- ───── Rezept ───── -->
<article data-pane="rezept" aria-labelledby="h-rezept" hidden>
<div class="doc-kopf">
<div>
<p class="label">Aus der Backstube · Rezept zum Nachbacken</p>
<h1 id="h-rezept">Rieser Bauernbrot mit Sauerteig</h1>
<p>Das Brot, das bei uns auf dem Brotzeitbrett liegt. Roggen aus Wallerstein, eine Nacht Zeit und ein heißer Ofen.</p>
<dl class="eckdaten"><div><dt>Zeit</dt><dd>ca. 16 Std., davon 40 Min. Arbeit</dd></div><div><dt>Backen</dt><dd>250 °C, dann 210 °C</dd></div><div><dt>Schwierigkeit</dt><dd>mittel</dd></div></dl>
</div>
<div class="druckleiste" role="group" aria-label="Drucken">
<span class="stepper" role="group" aria-label="Menge"><button type="button" data-laibe="-1" aria-label="Ein Laib weniger">−</button><output data-laibe-zahl aria-live="polite">1 Laib</output><button type="button" data-laibe="1" aria-label="Ein Laib mehr">+</button></span>
<label class="opt"><input type="checkbox" data-opt="bilder" checked> Mit Bild</label>
<button class="drucken" type="button" data-drucken><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 9V3h10v6M7 17H4v-7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v7h-3"/><rect x="7" y="14" width="10" height="7"/></svg>Rezept drucken</button>
</div>
</div>
<div class="rezept">
<figure class="rezept-bild"><img src="bilder/foto-hero-mit-leiste-backstube.webp" alt="Runde und lange Sauerteiglaibe mit eingeschnittener, bemehlter Kruste auf Leinen und Holzbrett" width="1600" height="1000" loading="lazy"></figure>
<section class="zutaten" aria-labelledby="h-zutaten">
<h2 id="h-zutaten">Zutaten</h2>
<h3>Sauerteig, am Vorabend</h3>
<ul data-zutaten>
<li><b data-g="150">150 g</b>Roggenmehl Type 1150</li>
<li><b data-g="150">150 g</b>Wasser, lauwarm</li>
<li><b data-g="15">15 g</b>Anstellgut</li>
</ul>
<h3>Hauptteig</h3>
<ul data-zutaten>
<li><b data-g="350">350 g</b>Roggenmehl Type 1150</li>
<li><b data-g="200">200 g</b>Weizenmehl Type 1050</li>
<li><b data-g="360">360 g</b>Wasser, warm</li>
<li><b data-g="14">14 g</b>Salz</li>
<li><b data-g="4">4 g</b>frische Hefe</li>
<li><b data-g="6">6 g</b>Brotgewürz (Kümmel, Fenchel, Koriander)</li>
</ul>
</section>
<section class="schritte" aria-labelledby="h-schritte">
<h2 id="h-schritte">So geht’s</h2>
<ol>
<li class="schritt"><h3>Sauerteig ansetzen <small>12–16 Std.</small></h3><p>Mehl, Wasser und Anstellgut verrühren, abdecken und bei Zimmerwärme über Nacht reifen lassen. Er ist fertig, wenn er sich gut verdoppelt hat und säuerlich riecht.</p></li>
<li class="schritt"><h3>Teig mischen <small>10 Min.</small></h3><p>Sauerteig mit allen Zutaten des Hauptteigs in einer großen Schüssel mischen. Roggenteig klebt: mit nassen Händen oder einem Teigschaber arbeiten, nicht kneten wie Weizenteig.</p></li>
<li class="schritt"><h3>Gehen lassen <small>45 Min.</small></h3><p>Abgedeckt ruhen lassen. Ein Stück Teig nehmen und für das nächste Brot als Anstellgut in den Kühlschrank stellen.</p></li>
<li class="schritt"><h3>Formen <small>10 Min.</small></h3><p>Auf bemehlter Fläche rund oder lang formen und mit dem Schluss nach unten in ein bemehltes Gärkörbchen legen.</p></li>
<li class="schritt"><h3>Stückgare <small>50–70 Min.</small></h3><p>Gehen lassen, bis sich auf der Oberfläche feine Risse zeigen. Den Ofen mit Backstein oder Blech rechtzeitig auf 250 °C vorheizen.</p></li>
<li class="schritt"><h3>Backen <small>55 Min.</small></h3><p>Brot auf den heißen Stein stürzen, eine Tasse Wasser auf das Blech darunter gießen. Nach 10 Minuten auf 210 °C schalten und fertig backen. Es klingt hohl, wenn man auf den Boden klopft.</p></li>
</ol>
<p class="tipp"><b>Aus der Backstube:</b> Erst nach zwei Stunden anschneiden. Roggenbrot backt nach und schmeckt am zweiten Tag am besten. Mehr über unser Mehl: <a href="https://www.landgasthof-haselmaus.de/backstube">landgasthof-haselmaus.de/backstube</a></p>
</section>
</div>
</article>
<!-- ───── Rechtstext ───── -->
<article data-pane="rechtstext" aria-labelledby="h-recht" hidden>
<div class="doc-kopf">
<div>
<p class="label">Gutscheine · zum Abheften</p>
<h1 id="h-recht">Gutscheinbedingungen</h1>
<p>Für Wert- und Menügutscheine, die Sie bei uns im Gasthof oder online kaufen.</p>
<p class="stand">Stand 05.11.2026 · Fassung 3</p>
</div>
<div class="druckleiste" role="group" aria-label="Drucken">
<label class="opt">Links <select data-opt="links" aria-label="Linkadressen im Druck"><option value="liste">als Liste</option><option value="text">im Text</option></select></label>
<button class="drucken" type="button" data-drucken><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 9V3h10v6M7 17H4v-7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v7h-3"/><rect x="7" y="14" width="10" height="7"/></svg>Drucken</button>
</div>
</div>
<div class="recht">
<nav aria-label="Abschnitte"><ol><li><a href="#r1">1 Geltung</a></li><li><a href="#r2">2 Kauf und Bezahlung</a></li><li><a href="#r3">3 Gültigkeit</a></li><li><a href="#r4">4 Einlösen</a></li><li><a href="#r5">5 Widerruf</a></li><li><a href="#r6">6 Datenschutz</a></li></ol></nav>
<div class="recht-text">
<p><span class="platzhalter">Beispieltext. Kein Rechtsrat; Inhalt vom Kunden prüfen lassen.</span></p>
<section><h2 id="r1"><span>1</span>Geltung</h2><p>Diese Bedingungen gelten für Gutscheine des Landgasthofs Haselmaus, Inhaberin Theresa Gumpp, Marktplatz 7, 86720 Nördlingen.</p></section>
<section><h2 id="r2"><span>2</span>Kauf und Bezahlung</h2><p>Gutscheine kaufen Sie im Gasthof oder online. Online bezahlen Sie über den Zahlungsdienst, der im Bestellweg genannt ist. Den Gutschein schicken wir als PDF per E-Mail oder als Karte per Post.</p></section>
<section><h2 id="r3"><span>3</span>Gültigkeit</h2><p>Gutscheine gelten <span class="platzhalter">drei Jahre</span> ab dem Ende des Jahres, in dem Sie sie gekauft haben. Das entspricht der regelmäßigen Verjährung nach <a href="https://www.gesetze-im-internet.de/bgb/__195.html">§ 195 BGB</a>.</p></section>
<section><h2 id="r4"><span>4</span>Einlösen</h2><p>Sie lösen Gutscheine für Speisen und Getränke ein, auch in Teilen. Ein Restwert bleibt auf dem Gutschein. Eine Auszahlung in bar ist nicht möglich.</p><ul><li>Menügutscheine gelten für das genannte Menü oder seinen Wert.</li><li>Bitte bringen Sie den Gutschein ausgedruckt oder auf dem Telefon mit.</li></ul></section>
<section><h2 id="r5"><span>5</span>Widerruf</h2><p>Kaufen Sie online, können Sie innerhalb von 14 Tagen ohne Grund widerrufen. Die Belehrung und das Formular finden Sie unter <a href="https://www.landgasthof-haselmaus.de/widerruf">landgasthof-haselmaus.de/widerruf</a>.</p></section>
<section><h2 id="r6"><span>6</span>Datenschutz</h2><p>Für den Versand verarbeiten wir Name, Anschrift und E-Mail-Adresse. Einzelheiten stehen in der <a href="https://www.landgasthof-haselmaus.de/datenschutz">Datenschutzerklärung</a>. Zuständige Aufsicht ist das <a href="https://www.lda.bayern.de">Bayerische Landesamt für Datenschutzaufsicht</a>.</p></section>
</div>
</div>
</article>
<!-- ───── Exposé ───── -->
<article data-pane="expose" aria-labelledby="h-expose" hidden>
<div class="doc-kopf">
<div>
<p class="label">Exposé HAL-2611 · Einfamilienhaus · Kauf</p>
<h1 id="h-expose">Haus am Rosenhang, Schwäbisch Hall-Hessental</h1>
<p class="stand">Stand 05.11.2026 · Angaben laut Eigentümer, ohne Gewähr</p>
</div>
<div class="druckleiste" role="group" aria-label="Drucken">
<label class="opt"><input type="checkbox" data-opt="bilder" checked> Mit Fotos</label>
<label class="opt">Links <select data-opt="links" aria-label="Linkadressen im Druck"><option value="liste">als Liste</option><option value="text">im Text</option></select></label>
<button class="drucken" type="button" data-drucken style="background:#02385C"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M7 9V3h10v6M7 17H4v-7a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v7h-3"/><rect x="7" y="14" width="10" height="7"/></svg>Exposé drucken</button>
</div>
</div>
<div class="expose-titel">
<figure><img src="bilder/foto-hero-villa.webp" alt="Flaches Haus aus zwei versetzten hellen Kuben auf einem Rasenhang in der Abenddämmerung, hinter den Glasflächen warmes Licht" width="1920" height="1080" loading="lazy"><figcaption>Ansicht von Südwesten, Aufnahme Oktober 2026</figcaption></figure>
<div>
<table class="daten">
<caption>Eckdaten</caption>
<tr><th scope="row">Wohnfläche</th><td>186 m²</td></tr>
<tr><th scope="row">Grundstück</th><td>742 m²</td></tr>
<tr><th scope="row">Zimmer</th><td>6, davon 4 Schlafzimmer</td></tr>
<tr><th scope="row">Baujahr</th><td>2016</td></tr>
<tr><th scope="row">Bezug</th><td>ab Februar 2027</td></tr>
</table>
<div class="preisblock"><b>1.190.000 €</b><p>Kaufpreis. Käuferprovision <span class="platzhalter">3,57 % inkl. MwSt.</span> des Kaufpreises.</p></div>
</div>
</div>
<div class="expose-text" data-umbruch>
<div>
<h2>Das Haus</h2>
<p>Zwei versetzte Baukörper am Südhang: unten Kochen, Essen und Wohnen in einem Raum mit sechs Meter Glasfront zur Terrasse, oben vier Schlafzimmer und zwei Bäder. Die Fenster sind dreifach verglast, die Fußbodenheizung läuft über eine Wärmepumpe.</p>
<p>Zur Altstadt sind es zwölf Minuten mit dem Rad, zum Bahnhof Hessental acht Minuten zu Fuß. Grundschule und Kindergarten liegen in der Nachbarstraße.</p>
</div>
<div>
<table class="daten energie">
<caption>Energieausweis</caption>
<tr><th scope="row">Art</th><td>Bedarfsausweis, gültig bis 2036</td></tr>
<tr><th scope="row">Endenergiebedarf</th><td>38 kWh/(m²·a)</td></tr>
<tr><th scope="row">Energieträger</th><td>Strom (Wärmepumpe)</td></tr>
<tr><th scope="row">Baujahr laut Ausweis</th><td>2016</td></tr>
<tr><th scope="row">Effizienzklasse</th><td>A</td></tr>
</table>
<p style="font-size:.8125rem;color:var(--leise);margin-top:8px"><span class="platzhalter">Pflichtangaben nach § 87 GEG vom Kunden prüfen lassen.</span> Lage und Umgebung: <a href="https://www.bernsdorff-immobilien.de/hal-2611/lage">bernsdorff-immobilien.de/hal-2611/lage</a></p>
</div>
</div>
<section class="grundriss-seite" data-umbruch aria-labelledby="h-grundriss">
<h2 id="h-grundriss">Grundriss Erdgeschoss</h2>
<figure style="margin:0">
<svg class="grundriss" viewBox="0 0 760 420" role="img" aria-label="Grundriss Erdgeschoss: Wohnen und Essen 58 Quadratmeter mit Glasfront nach Süden, Küche 14, Arbeitszimmer 13, Diele mit Treppe, Gäste-Bad, Hauswirtschaft">
<g fill="none" stroke="#313131" stroke-width="6"><rect x="30" y="30" width="700" height="360"/></g>
<g fill="none" stroke="#313131" stroke-width="3"><path d="M400 30v150M400 230v160M520 30v120M520 200v190M400 180h40M480 180h40M620 200h110M620 280h110M620 200v190"/></g>
<path d="M60 390h300" stroke="#02385C" stroke-width="10"/>
<g font-family="Hanken Grotesk, sans-serif" font-size="15" fill="#313131"><text x="150" y="200">Wohnen und Essen</text><text x="170" y="222" fill="#716F6D">58,4 m²</text><text x="420" y="100">Küche</text><text x="420" y="122" fill="#716F6D">14,2 m²</text><text x="545" y="100">Arbeiten</text><text x="545" y="122" fill="#716F6D">13,0 m²</text><text x="440" y="300">Diele</text><text x="440" y="322" fill="#716F6D">11,6 m²</text><text x="640" y="245">Bad</text><text x="640" y="335">HWR</text></g>
<g stroke="#716F6D" stroke-width="1.5" fill="none"><path d="M540 230h60M540 250h60M540 270h60M540 290h60M540 310h60M540 330h60"/></g>
<g font-family="Geist Mono, monospace" font-size="11" fill="#716F6D"><text x="60" y="412">Süden · Glasfront 6,00 m</text><text x="640" y="412">M 1:100 verkleinert</text></g>
</svg>
</figure>
<div class="ansprech"><span><b>Clara Bernsdorff</b>, Immobilienmaklerin</span><span>0791 0 93 40 12</span><span>c.bernsdorff@bernsdorff-immobilien.de</span></div>
</section>
</article>
</main>
<p class="papier-hinweis" aria-hidden="true">Papieransicht: derselbe Druckstil wie beim Drucken. Seitenumbrüche und Kopf/Fuß je Seite zeigt erst die Druckvorschau.</p>
<footer class="site-fuss"><div class="site-fuss__innen" data-fuss>Landgasthof Haselmaus · Marktplatz 7 · 86720 Nördlingen (erfunden)<span>Impressum · Datenschutz</span></div></footer>
<div class="pult" role="group" aria-label="Steuerung der Demo">
<div class="gruppe" role="group" aria-label="Variante"><span class="l" aria-hidden="true">Seite</span>
<button type="button" data-v="speisekarte" aria-pressed="true">Speisekarte</button><button type="button" data-v="rezept" aria-pressed="false">Rezept</button><button type="button" data-v="rechtstext" aria-pressed="false">Rechtstext</button><button type="button" data-v="expose" aria-pressed="false">Exposé</button>
</div>
<div class="gruppe" role="group" aria-label="Ansicht"><span class="l" aria-hidden="true">Ansicht</span>
<button type="button" data-ansicht="bildschirm" aria-pressed="true">Bildschirm</button><button type="button" data-ansicht="papier" aria-pressed="false">Papier</button>
</div>
</div>
<p class="vh" role="status" data-ansage></p>
<script>
(() => {
const H = document.documentElement, doc = document.getElementById('doc');
const druckstil = document.getElementById('druckstil');
const reduziert = () => H.classList.contains('reduziert');
const $ = (s, r = document) => r.querySelector(s), $$ = (s, r = document) => [...r.querySelectorAll(s)];
const VARIANTEN = ['speisekarte', 'rezept', 'rechtstext', 'expose'];
const KOPF = {
speisekarte: ['Landgasthof Haselmaus · Speisekarte', 'Stand 05.11.2026', 'Marktplatz 7 · 86720 Nördlingen · 09081 0 27 15', 'Seite 1 von 1'],
rezept: ['Landgasthof Haselmaus · Rezept aus der Backstube', 'Stand 05.11.2026', 'Marktplatz 7 · 86720 Nördlingen · 09081 0 27 15', 'Seite 1 von 2'],
rechtstext: ['Landgasthof Haselmaus · Gutscheinbedingungen', 'Stand 05.11.2026', 'Marktplatz 7 · 86720 Nördlingen · 09081 0 27 15', 'Seite 1 von 1'],
expose: ['', '', 'Clara Bernsdorff · 0791 0 93 40 12 · Am Markt 3, 74523 Schwäbisch Hall', 'Seite 1 von 3']
};
let variante = 'speisekarte', papier = false, laibe = 1;
const optionen = { bilder: true, links: 'liste' };
const zahl = new Intl.NumberFormat('de-DE', { maximumFractionDigits: 0 });
function ansage(t) { const a = $('[data-ansage]'); a.textContent = ''; setTimeout(() => a.textContent = t, 30); }
/* Linkadressen: als nummerierte Liste am Ende oder im Text */
function links() {
$$('.druck-links, sup.druck-nur', doc).forEach(e => e.remove());
H.classList.toggle('links-im-text', optionen.links === 'text');
if (optionen.links !== 'liste') return;
const pane = $(`article[data-pane="${variante}"]`);
const liste = $$('a[href^="http"]', pane).filter(a => !a.closest('.druckleiste'));
if (!liste.length) return;
const urls = [];
liste.forEach(a => {
let n = urls.indexOf(a.href) + 1; if (!n) { urls.push(a.href); n = urls.length; }
const s = document.createElement('sup'); s.className = 'druck-nur'; s.textContent = n; a.after(s);
});
const sec = document.createElement('section'); sec.className = 'druck-links druck-nur';
const h = document.createElement('h2'); h.textContent = 'Links in diesem Dokument';
const ol = document.createElement('ol');
urls.forEach(u => { const li = document.createElement('li'); li.textContent = u.replace(/\/$/, ''); ol.append(li); });
sec.append(h, ol); pane.append(sec);
}
function setzeVariante(v, still) {
variante = VARIANTEN.includes(v) ? v : 'speisekarte';
H.dataset.v = variante;
$$('article[data-pane]').forEach(p => p.hidden = p.dataset.pane !== variante);
doc.dataset.pane = variante;
const k = KOPF[variante];
[['kopf', k[0], k[1]], ['fuss', k[2], k[3]]].forEach(([art, l, r]) => {
let el = doc.querySelector('.blatt-rand--' + art);
if (!el) { el = document.createElement('div'); el.className = 'blatt-rand blatt-rand--' + art; el.setAttribute('aria-hidden', 'true'); el.append(document.createElement('span'), document.createElement('span')); doc.prepend(el); }
el.children[0].textContent = l; el.children[1].textContent = r;
});
const expose = variante === 'expose';
$('[data-welt="haselmaus"]').hidden = expose; $('[data-welt="bernsdorff"]').hidden = !expose;
$('[data-fuss]').firstChild.textContent = expose ? 'Bernsdorff Immobilien · Am Markt 3 · 74523 Schwäbisch Hall (erfunden)' : 'Landgasthof Haselmaus · Marktplatz 7 · 86720 Nördlingen (erfunden)';
$$('[data-nav]').forEach(a => a.toggleAttribute('aria-current', a.dataset.nav === variante));
$$('button[data-v]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.v === variante)));
$$('[data-opt="links"]').forEach(s => s.value = optionen.links);
$$('[data-opt="bilder"]').forEach(c => c.checked = optionen.bilder);
if (!still) { const q = new URLSearchParams(location.search); q.set('v', variante); history.replaceState(null, '', location.pathname + '?' + q.toString().replace(/=(?=&|$)/g, '')); }
links();
}
function zoom() { H.style.setProperty('--z', Math.min(1, (H.clientWidth - 24) / 794).toFixed(3)); }
function setzePapier(an) {
if (an === papier) return;
const fertig = () => {
papier = an;
druckstil.media = an ? 'all' : 'print';
H.classList.toggle('papier', an); H.classList.remove('zurueck');
$$('[data-ansicht]').forEach(b => b.setAttribute('aria-pressed', String((b.dataset.ansicht === 'papier') === an)));
if (an) { links(); zoom(); requestAnimationFrame(zoom); }
ansage(an ? 'Papieransicht: so kommt die Seite aus dem Drucker' : 'Bildschirmansicht');
};
if (!an && papier && !reduziert()) { H.classList.add('zurueck'); setTimeout(fertig, 280); }
else fertig();
}
function laibeSetzen(n) {
laibe = Math.max(1, Math.min(4, n));
$('[data-laibe-zahl]').textContent = laibe + (laibe === 1 ? ' Laib' : ' Laibe');
$$('[data-g]').forEach(b => b.textContent = zahl.format(+b.dataset.g * laibe) + ' g');
$$('[data-laibe]').forEach(b => b.disabled = (+b.dataset.laibe < 0 ? laibe === 1 : laibe === 4));
}
/* Bedienung */
$$('button[data-v]').forEach(b => b.addEventListener('click', () => setzeVariante(b.dataset.v)));
$$('[data-nav]').forEach(a => a.addEventListener('click', e => { e.preventDefault(); setzeVariante(a.dataset.nav); }));
$$('[data-ansicht]').forEach(b => b.addEventListener('click', () => setzePapier(b.dataset.ansicht === 'papier')));
$$('[data-opt="bilder"]').forEach(c => c.addEventListener('change', () => { optionen.bilder = c.checked; H.classList.toggle('ohne-bilder', !c.checked); $$('[data-opt="bilder"]').forEach(x => x.checked = c.checked); }));
$$('[data-opt="links"]').forEach(s => s.addEventListener('change', () => { optionen.links = s.value; links(); }));
$$('[data-laibe]').forEach(b => b.addEventListener('click', () => laibeSetzen(laibe + +b.dataset.laibe)));
$$('[data-drucken]').forEach(b => b.addEventListener('click', () => { links(); window.print(); }));
addEventListener('beforeprint', links);
addEventListener('resize', zoom, { passive: true });
zoom();
setzeVariante(new URLSearchParams(location.search).get('v'), true);
laibeSetzen(1);
let schleife = null;
function neustart() { clearTimeout(schleife); setzePapier(false); }
function vorfuehren() {
clearTimeout(schleife);
setzePapier(!papier);
schleife = setTimeout(vorfuehren, papier ? 2600 : 1800);
}
function pause() { clearTimeout(schleife); }
function weiter() { vorfuehren(); }
})();
</script>
</body>
</html>