Speisekarte als Editorial

Karte als HTML-Text mit Rubriken-Tabs, Preisen in Tabellenziffern, Allergen-Kürzeln mit verankerter Erklärung, Filter nach Verträglichkeit und Druckversion.
Bistro, Wirtshaus, Café, Bar und Mittagstisch: viele Gerichte, Rubriken-Tabs nach Tageszeit, Filter nach Verträglichkeit.
Die Karte steht als echter HTML-Text auf der Seite, nicht als PDF. Rubriken-Tabs wechseln zwischen Mittag, Abend und Getränken. Gerichte stehen in einer ruhigen Liste: Name, kurze Beschreibung, Preis rechtsbündig mit Tabellenziffern, damit die Kommastellen untereinander stehen. Allergene und Kennzeichnungen erscheinen als Kürzel. Ein Klick auf ein Kürzel öffnet eine kurze Erklärung; eine Legende steht zusätzlich unter der Karte. Eine Druckversion zeigt alle Rubriken untereinander. Trennlinien kommen 2026 per Gap Decorations (row-rule) und fallen in älteren Browsern auf einfache Rahmen zurück.
Gäste suchen auf dem Telefon schnell nach Preis und Unverträglichkeiten. Text ist lesbar, durchsuchbar, übersetzbar und für Suchmaschinen sichtbar. Tabellenziffern geben der Preisspalte Ruhe, die Serif der Gerichte gibt Charakter. Die Karte wirkt wie gedruckt und bleibt trotzdem bedienbar.
Wann einsetzen

Restaurant, Bistro, Café, Bar, Hotelrestaurant, Kantine; auch für Preislisten mit wenigen Rubriken (Friseur, Kosmetik, Werkstatt-Pauschalen).
Wann nicht

Bei sehr großen Karten mit Dutzenden Rubriken (dann Sprungliste statt Tabs). Wenn sich die Karte täglich ändert und niemand sie pflegt: dann lieber eine Tageskarte mit Datum als eine veraltete Hauptkarte.
Varianten

Bistro-Tafel: dichte Liste mit Rubriken-Tabs, Tagesgericht hervorgehoben
Fine-Dining-Menü: Gänge zentriert untereinander, Menüpreis und Weinbegleitung als eigene Zeile
Preisliste Dienstleistung (Friseur, Kosmetik, Kfz-Werkstatt): Leistung, Dauer und ab-Preis nach Haarlänge oder Fahrzeugklasse, Stufe wählbar, „Endpreis nach Beratung“
Mehrere Karten als Sprungliste statt Tabs, wenn es mehr als vier Rubriken gibt
Umsetzung

Markup: Tabs mit role=tablist, tab und tabpanel (Pfeiltasten, Home, End). In jedem Panel Rubriken als section mit h3 und ul; jedes Gericht als li mit h4, Preis als <data value="14.20">14,20</data> und einem Kürzel-Knopf. Preise: font-variant-numeric: tabular-nums lining-nums, rechtsbündig, Währung einmal im Kopf. Kürzel: ein button je Gericht mit aria-label "Allergene: Gluten, Eier, Milch", aria-expanded und aria-controls; ein gemeinsames Popover (popover=auto) wird per JS gefüllt und mit showPopover({ source: knopf }) geöffnet. Der offene Knopf trägt anchor-name: --kz, das Popover sitzt mit position-anchor: --kz; top: anchor(bottom); right: anchor(right) und weicht per position-try-fallbacks nach oben oder links aus. Ohne Anchor Positioning rechnet JS die Lage aus getBoundingClientRect. Linien: @supports bzw. CSS.supports('row-rule: 1px solid red') → .gerichte { row-gap: 28px; row-rule: 1px dotted … }, .rubriken { column-rule: 1px solid … }; sonst border-top an jedem sichtbaren Gericht ab dem zweiten. Filter: aria-pressed-Knöpfe blenden Gerichte per hidden aus, zählen live (aria-live=polite) und zeigen je Rubrik einen Leerzustand. Druck: @media print zeigt alle Panels mit Titel aus data-titel und blendet Tabs, Filter und Popover aus. Die Legende steht immer als Text unter der Karte. Strukturierte Daten (schema.org Menu, MenuSection, MenuItem) lassen sich ergänzen.
Robust umsetzen

Telefon. Eine Spalte, Tabs kleben beim Scrollen oben. Kürzel-Knöpfe mindestens 30 px hoch, Erklärung per Tippen. Der Druck-Knopf entfällt auf schmalen Bildschirmen.
Ohne Bewegung. Tabs und Erklärungen wechseln ohne Übergang.
Barrierefrei. Tabs nach dem APG-Muster mit Pfeiltasten, Home und End; das Panel ist fokussierbar. Kürzel-Knöpfe haben den vollen Namen als zugänglichen Namen, die Information steckt also nicht nur im Popover; die Legende steht zusätzlich als Text unter der Karte. Kennzeichen V und VG sind abbr mit title. Trefferzahl des Filters in einer aria-live-Region, Leerzustand als Text. Kontrast Text 10:1, leiser Text 4,6:1 auf #f0ece0. Allergenkennzeichnung und Preisangaben in Inhalt und Form vom Kunden prüfen lassen.
Code

Herunterladen
<!DOCTYPE html>
<!--
  Speisekarte als Editorial
  Fundus · Sektionen & Funktionen · https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/
  Eigenständige Datei. Bilder liegen hier unter bilder/ – eigene einsetzen.
-->
<html lang="de" data-v="bistro">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Speisekarte als Editorial · 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: 'Fraunces'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/fraunces:vf@latest/latin-wght-italic.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; 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; }
/* Variante Preisliste: Rezept friseur-salon-handschrift */
@font-face { font-family: 'Kalnia'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/kalnia:vf@latest/latin-full-normal.woff2') format('woff2-variations'); font-weight: 100 700; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/familjen-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; }

:root {
  /* Rotmain · Rezept gastro-warm-appetitlich: Papier-Weiß, warme Tinte, Salbei als Hausfarbe, Senf für Badges */
  --grund: #f0ece0; --blatt: #f7f4ec; --text: #353839; --leise: #6b6a62; --linie: rgba(53, 56, 57, .16); --punkt: rgba(53, 56, 57, .34);
  --salbei: #7f937a; --salbei-tief: #4f6a4b; --salbei-hell: #dde3d3; --dunkel: #293e3a; --senf: #eac16e; --rose: #e1a894;
  --pop-grund: #293e3a; --pop-text: #f0ece0; --pop-leise: #b9c2b0;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);   /* expo.out, Rezept */
  --ui: 200ms;                              /* Tabs, Popover, Filter */
  --rand: clamp(18px, 3.4vw, 48px);
}
/* Variante Fine-Dining: dieselbe Karte, dunkle Stube */
[data-v="menue"] {
  --grund: #293e3a; --blatt: #31483f; --text: #f0ece0; --leise: #b9c2b0; --linie: rgba(240, 236, 224, .18); --punkt: rgba(240, 236, 224, .3);
  --salbei-tief: #c9d3bd; --pop-grund: #f0ece0; --pop-text: #293e3a; --pop-leise: #5f6b5c;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--text); font-family: 'Commissioner', system-ui, sans-serif; font-size: 100%; -webkit-font-smoothing: antialiased; transition: background-color 400ms var(--kurve), color 400ms var(--kurve); }
body { min-height: 100svh; font-size: 1.0625rem; line-height: 1.55; padding-bottom: 96px; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.label { font: 600 .75rem/1.25 'Commissioner', sans-serif; font-variation-settings: "FLAR" 80; letter-spacing: .15em; text-transform: uppercase; color: var(--leise); }
:focus-visible { outline: 2px solid var(--salbei-tief); outline-offset: 3px; border-radius: 4px; }
[data-v="bistro"] [data-nur="menue"], [data-v="menue"] [data-nur="bistro"],
[data-v="preisliste"] [data-nur="bistro"], [data-v="preisliste"] [data-nur="menue"], [data-v="preisliste"] [data-nicht="preis"],
:root:not([data-v="preisliste"]) [data-nur="preis"] { display: none !important; }

/* ---------- Kopf ---------- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--rand); border-bottom: 1px solid var(--linie); }
.marke { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.marke b { font: 600 1.625rem/1 'Fraunces', serif; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; letter-spacing: -.02em; }
.marke span { white-space: nowrap; }
.kopf nav ul { list-style: none; padding: 0; display: flex; gap: clamp(16px, 2.4vw, 32px); font-size: .9375rem; }
.kopf nav a { text-decoration: none; }
.kopf nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.reservieren { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; background: var(--senf); color: #353839; font-weight: 600; font-size: .9375rem; text-decoration: none; transition: transform var(--ui) var(--kurve); }
.reservieren:active { transform: scale(.97); }

/* ---------- Seite ---------- */
.seite { max-width: 1360px; margin: 0 auto; padding: clamp(32px, 6vh, 72px) var(--rand) 0; display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8.4fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.einleitung { position: sticky; top: 28px; display: grid; gap: 22px; }
.titel { font: 430 clamp(2.25rem, 1.1rem + 2.7vw, 3.9rem)/1.02 'Fraunces', serif; font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.012em; text-wrap: balance; }
.titel em { font-style: italic; font-weight: 340; color: var(--salbei-tief); }
.lead { max-width: 38ch; color: var(--leise); text-wrap: pretty; }
.fakten { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .875rem; padding-top: 18px; border-top: 1px solid var(--linie); }
.fakten dt { color: var(--leise); }

.filter { display: grid; gap: 10px; }
.filter__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px 0 12px; border-radius: 999px; border: 1px solid var(--punkt); background: transparent; font-size: .9375rem; cursor: pointer; transition: background-color var(--ui) var(--kurve), color var(--ui) var(--kurve), border-color var(--ui) var(--kurve); }
.chip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-style: normal; }
.chip i::after { content: ""; width: 7px; height: 4px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; rotate: -45deg; translate: 0 -1px; opacity: 0; transition: opacity var(--ui) var(--kurve); }
.chip[aria-pressed="true"] { background: var(--dunkel); border-color: var(--dunkel); color: #f0ece0; }
.chip[aria-pressed="true"] i { background: var(--senf); border-color: var(--senf); color: var(--dunkel); }
.chip[aria-pressed="true"] i::after { opacity: 1; }
@media (hover: hover) { .chip:hover { border-color: var(--text); } }
.treffer { font-size: .875rem; color: var(--leise); font-variant-numeric: tabular-nums; min-height: 1.55em; }
.treffer b { color: var(--text); font-weight: 600; }
.treffer button { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--text); }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; font-size: .9375rem; }
.knopf-linie { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border: 1px solid var(--text); border-radius: 999px; background: none; cursor: pointer; }
.knopf-linie svg { width: 16px; height: 16px; }
.aktionen a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hinweis-stube { padding: 16px 18px; border: 1px solid var(--linie); border-radius: 12px; font-size: .9375rem; color: var(--leise); }
.hinweis-stube b { color: var(--text); font-weight: 600; }

/* ---------- Karte: Tabs mit Unterstrich (Anchor Positioning) ---------- */
.karte { container: karte / inline-size; min-width: 0; }
.tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--linie); background: var(--grund); z-index: 3; }
.tabs [role="tab"] { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; padding: 6px 4px 16px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--leise); transition: color var(--ui) var(--kurve); }
.tab__titel { font: 420 clamp(1.375rem, 1rem + 1.1vw, 2rem)/1.1 'Fraunces', serif; font-variation-settings: "SOFT" 60; letter-spacing: -.01em; }
.tab__zeit { grid-column: 1 / -1; font-size: .8125rem; }
.tab__zahl { grid-row: 1; grid-column: 2; font-size: .75rem; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: right; }
.tabs [aria-selected="true"] { color: var(--text); anchor-name: --tab; }
@media (hover: hover) { .tabs [role="tab"]:hover { color: var(--text); } }
.tabs::after { content: ""; position: absolute; height: 2px; background: var(--text); position-anchor: --tab; left: anchor(left); right: anchor(right); top: calc(anchor(bottom) - 1.5px); transition: left var(--ui) var(--kurve), right var(--ui) var(--kurve); }
@supports not (position-anchor: --a) {
  .tabs::after { display: none; }
  .tabs [aria-selected="true"] { box-shadow: inset 0 -2px 0 currentColor; }
}
.panel { padding-top: clamp(24px, 4vh, 40px); outline: none; }
.panel:not([hidden]) { animation: panel-ein var(--ui) var(--kurve); }
@keyframes panel-ein { from { opacity: 0; translate: 0 6px; } }

/* ---------- Bistro: Rubriken in zwei Spalten, Trennlinien per Gap Decorations ---------- */
.rubriken { display: grid; gap: 40px 56px; }
@container karte (min-width: 640px) {
  .rubriken { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; }
  .rubrik--haupt { grid-column: 2; grid-row: 1 / span 3; }
}
.rubrik__titel { font: italic 380 1.5rem/1.15 'Fraunces', serif; color: var(--salbei-tief); margin-bottom: 18px; display: flex; align-items: baseline; gap: 12px; }
.rubrik__titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); translate: 0 -.3em; }
.gerichte { list-style: none; padding: 0; display: grid; row-gap: 14px; }
.g { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 2px; align-items: baseline; }
.g[hidden] { display: none; }
.g__name { font: 500 1.125rem/1.3 'Fraunces', serif; font-variation-settings: "SOFT" 50, "opsz" 24; letter-spacing: -.004em; }
.g__preis { grid-column: 2; grid-row: 1; font-weight: 500; font-size: 1.0625rem; font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.g__text { grid-column: 1; font-size: .9375rem; line-height: 1.45; color: var(--leise); text-wrap: pretty; }
.g__kz { grid-column: 2; grid-row: 2 / span 2; justify-self: end; align-self: start; }
.zeichen { display: inline-block; margin-left: 6px; padding: 1px 5px 0; border: 1px solid currentColor; border-radius: 4px; font: 650 .625rem/1.3 'Commissioner', sans-serif; letter-spacing: .1em; color: var(--salbei-tief); text-decoration: none; vertical-align: .2em; cursor: help; }
.rubrik__leer { font-size: .9375rem; color: var(--leise); font-style: italic; padding: 12px 0; }

/* Allergen-Kürzel: ein Knopf je Gericht, öffnet die Erklärung */
.kz { display: inline-flex; gap: 5px; align-items: center; min-height: 26px; padding: 2px 9px; border: 1px solid var(--linie); border-radius: 999px; background: none; cursor: pointer; font: 600 .6875rem/1 'Commissioner', sans-serif; letter-spacing: .06em; color: var(--leise); white-space: nowrap; transition: background-color var(--ui) var(--kurve), color var(--ui) var(--kurve), border-color var(--ui) var(--kurve); }
.kz b { font-weight: inherit; }
@media (hover: hover) { .kz:hover { border-color: var(--text); color: var(--text); } }
.kz[aria-expanded="true"] { background: var(--text); border-color: var(--text); color: var(--grund); anchor-name: --kz; }
.kz--leer { display: inline-block; min-width: 26px; text-align: center; color: var(--punkt); font-size: .75rem; }

/* Linien: mit Gap Decorations (Chrome/Edge 149+) direkt in der Lücke, sonst Rahmen am Element */
.gd .gerichte { row-gap: 28px; row-rule: 1px dotted var(--punkt); }
.gd .rubriken { column-rule: 1px solid var(--linie); }
:root:not(.gd) .gerichte > .g:not([hidden]) ~ .g:not([hidden]) { border-top: 1px dotted var(--punkt); padding-top: 14px; }
@container karte (min-width: 640px) {
  :root:not(.gd) .rubrik--haupt { border-left: 1px solid var(--linie); margin-left: -28px; padding-left: 28px; }
  :root:not(.gd) .rubriken--vier > :nth-child(even) { border-left: 1px solid var(--linie); margin-left: -28px; padding-left: 28px; }
}
.gd .rubriken--vier { row-rule: 1px solid var(--linie); }
:root:not(.gd) .rubriken--vier > :nth-child(n+3) { border-top: 1px solid var(--linie); margin-top: -20px; padding-top: 20px; }

/* ---------- Fine-Dining: Gänge untereinander ---------- */
[data-v="menue"] .seite { grid-template-columns: minmax(0, 1fr); max-width: 820px; gap: 40px; }
[data-v="menue"] .einleitung { position: static; text-align: center; justify-items: center; }
[data-v="menue"] .titel { font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; }
[data-v="menue"] .titel em { color: #e1c48f; }
[data-v="menue"] .lead { max-width: 46ch; }
[data-v="menue"] .fakten { border-top: 0; padding-top: 0; grid-template-columns: auto auto auto auto; }
[data-v="menue"] .tabs [role="tab"] { text-align: center; grid-template-columns: 1fr; padding-right: 0; }
[data-v="menue"] .tab__zahl { display: none; }
[data-v="menue"] .reservieren { background: #e1c48f; }
.gaenge { list-style: none; padding: 0; display: grid; row-gap: 22px; counter-reset: gang; }
.gang { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; column-gap: 18px; row-gap: 4px; align-items: baseline; }
.gang__nr { grid-row: 1 / span 2; font: italic 300 1.125rem/1 'Fraunces', serif; color: var(--leise); font-variant-numeric: lining-nums; }
.gang__name { font: 330 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1.1 'Fraunces', serif; font-variation-settings: "SOFT" 0, "opsz" 144; letter-spacing: -.012em; }
.gang__text { grid-column: 2; font-size: .9375rem; color: var(--leise); letter-spacing: .02em; }
.gang .g__kz { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.gd .gaenge { row-gap: 44px; row-rule: 1px solid var(--linie); }
:root:not(.gd) .gang + .gang { border-top: 1px solid var(--linie); padding-top: 22px; }
.preise { margin-top: 44px; display: grid; row-gap: 12px; padding: 22px 0 0; border-top: 1px solid var(--text); }
.gd .preise { row-gap: 24px; row-rule: 1px dotted var(--punkt); }
.preis { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.preis dt { font: 400 1.0625rem/1.3 'Commissioner', sans-serif; }
.preis dd { font: 400 1.5rem/1 'Fraunces', serif; font-variant-numeric: tabular-nums lining-nums; font-variation-settings: "opsz" 72; }

/* ---------- Preisliste Dienstleistung (Salon Kammzug · Rezept friseur-salon-handschrift) ---------- */
[data-v="preisliste"] {
  --grund: #f4e9e4; --blatt: #e9dbd4; --text: #1e1412; --leise: #6e5a55; --linie: #d9c8c0; --punkt: rgba(30, 20, 18, .34);
  --salbei-tief: #9b1d2e; --dunkel: #1e1412; --lack: #9b1d2e;
  --pop-grund: #1e1412; --pop-text: #f4e9e4; --pop-leise: #d2c0b9;
  --kurve: cubic-bezier(0.625, 0.05, 0, 1);  /* token-studio-signatur, eine Kurve für alles */
  --ui: 400ms;                                /* Reiter, Popover, Preiswechsel */
  --hover: 250ms;
}
[data-v="preisliste"] body { font-family: 'Familjen Grotesk', system-ui, sans-serif; }
[data-v="preisliste"] .label { font: 500 .8125rem/1.25 'Familjen Grotesk', sans-serif; letter-spacing: .06em; font-variation-settings: normal; }
[data-v="preisliste"] .marke b { font: 600 1.625rem/1 'Kalnia', serif; font-stretch: 125%; font-variation-settings: normal; letter-spacing: -.01em; }
[data-v="preisliste"] .reservieren { background: var(--lack); color: #fff; white-space: nowrap; }
[data-v="preisliste"] .titel { font: 500 clamp(2.375rem, 1.3rem + 2.6vw, 3.75rem)/.98 'Kalnia', serif; font-stretch: 112%; font-variation-settings: normal; letter-spacing: -.02em; }
[data-v="preisliste"] .titel em { font-style: normal; font-weight: 300; font-stretch: 100%; color: var(--text); }
[data-v="preisliste"] .lead { max-width: 40ch; }
[data-v="preisliste"] .chip[aria-pressed="true"] { background: var(--lack); border-color: var(--lack); color: #fff; }
[data-v="preisliste"] .chip { transition-duration: var(--hover); }
.wahl { display: grid; gap: 18px; }
.wahl__gruppe { display: grid; gap: 10px; }
.wahl .chip { padding: 0 15px; }
.wahl__info { font-size: .9375rem; color: var(--leise); max-width: 38ch; min-height: 3em; }
[data-v="preisliste"] .tab__titel { font: 500 clamp(1.375rem, 1rem + 1.1vw, 2rem)/1.1 'Kalnia', serif; font-stretch: 100%; font-variation-settings: normal; letter-spacing: -.01em; }
[data-v="preisliste"] .tabs [aria-selected="true"] { color: var(--lack); }
[data-v="preisliste"] .tabs::after { background: var(--lack); }
[data-v="preisliste"] .erklaerung__kopf b { font: 500 1.1875rem/1.2 'Kalnia', serif; font-stretch: 112%; }
[data-v="preisliste"] .erklaerung { font-family: 'Familjen Grotesk', sans-serif; }
.pl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.pl th, .pl td { padding: 14px 12px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: baseline; }
.pl thead th { font-weight: 500; font-size: .8125rem; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); padding-block: 0 10px; border-bottom-color: var(--text); white-space: nowrap; }
.pl th[scope="row"] { font-weight: 400; padding-left: 0; }
.pl__name { display: block; font-weight: 500; font-size: 1.0625rem; line-height: 1.3; }
.pl__text { display: block; font-size: .9375rem; line-height: 1.4; color: var(--leise); text-wrap: pretty; }
.pl__dauer { color: var(--leise); white-space: nowrap; font-size: .9375rem; }
.pl__dauer-k { display: none; }
.pl__p { text-align: right !important; white-space: nowrap; width: 6.4em; transition: background-color var(--hover) var(--kurve), color var(--hover) var(--kurve); }
.pl tbody .pl__p { font-weight: 500; font-size: 1.0625rem; }
.pl__p--alle { width: auto; }
.pl__wert { display: block; }
.pl__wert small { display: block; font-weight: 400; font-size: .8125rem; color: var(--leise); }
.pl__wert--text { font-weight: 400; color: var(--leise); white-space: normal; }
.pl__wert.neu { animation: preis-neu var(--ui) var(--kurve); }
@keyframes preis-neu { from { opacity: 0; translate: 0 -4px; } }
.karte[data-laenge="kurz"] .pl [data-l="kurz"], .karte[data-laenge="schulter"] .pl [data-l="schulter"], .karte[data-laenge="lang"] .pl [data-l="lang"] { background: var(--blatt); }
.karte[data-laenge] .pl thead [data-l]:is([data-l="kurz"], [data-l="schulter"], [data-l="lang"]) { transition: background-color var(--hover) var(--kurve), color var(--hover) var(--kurve); }
.karte[data-laenge="kurz"] .pl thead [data-l="kurz"], .karte[data-laenge="schulter"] .pl thead [data-l="schulter"], .karte[data-laenge="lang"] .pl thead [data-l="lang"] { color: var(--text); }
.ab { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 24px; margin-right: 4px; padding: 0 7px; border: 1px solid var(--punkt); border-radius: 999px; background: none; cursor: pointer; font: 500 .8125rem/1 'Familjen Grotesk', sans-serif; color: var(--leise); vertical-align: .1em; transition: background-color var(--hover) var(--kurve), color var(--hover) var(--kurve), border-color var(--hover) var(--kurve); }
@media (hover: hover) { .ab:hover { border-color: var(--text); color: var(--text); } }
.ab[aria-expanded="true"] { background: var(--text); border-color: var(--text); color: var(--grund); anchor-name: --kz; }
.pl-fuss { margin-top: 28px; display: grid; gap: 8px; font-size: .9375rem; color: var(--leise); max-width: 68ch; }
.pl-fuss b { color: var(--text); font-weight: 600; }
.pl-fuss__ab { padding: 14px 16px; border-left: 2px solid var(--lack); background: var(--blatt); color: var(--text); }
@media (max-width: 560px) {
  [data-v="preisliste"] .marke b { font-size: 1.375rem; font-stretch: 112%; }
  [data-v="preisliste"] .tab__titel { font-size: 1.25rem; }
}
@media (max-width: 420px) {
  [data-v="preisliste"] .marke b { font-size: 1.25rem; font-stretch: 100%; }
  [data-v="preisliste"] .reservieren { padding: 0 13px; font-size: .875rem; }
  [data-v="preisliste"] .tab__titel { font-size: 1.0625rem; overflow-wrap: normal; hyphens: manual; }
  [data-v="preisliste"] .tab__zeit { font-size: .6875rem; overflow-wrap: anywhere; }
  [data-v="preisliste"] .tabs [role="tab"] { padding-right: 6px; }
}
@container karte (max-width: 560px) {
  .pl [data-l]:not([data-l="alle"]) { display: none; }
  .karte[data-laenge="kurz"] .pl [data-l="kurz"], .karte[data-laenge="schulter"] .pl [data-l="schulter"], .karte[data-laenge="lang"] .pl [data-l="lang"] { display: table-cell; background: none; }
  .pl__p--alle { display: table-cell; }
  .pl .pl__dauer { display: none; }
  .pl__dauer-k { display: block; font-size: .875rem; color: var(--leise); margin-top: 2px; }
  .pl th, .pl td { padding-inline: 0 8px; }
  .pl__p { width: auto; padding-right: 0 !important; }
}

/* ---------- Legende: Raster mit Spalten- und Zeilenlinien ---------- */
.legende { margin-top: clamp(40px, 7vh, 72px); padding-top: 24px; border-top: 1px solid var(--text); display: grid; gap: 18px; }
.legende__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.legende__kopf h3 { font: italic 380 1.5rem/1.15 'Fraunces', serif; }
.legende dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px 24px; font-size: .875rem; }
.gd .legende dl { gap: 20px 40px; column-rule: 1px solid var(--linie); row-rule: 1px solid var(--linie); rule-visibility-items: between; }
:root:not(.gd) .legende dl > div { border-bottom: 1px solid var(--linie); padding-bottom: 10px; }
.legende dl > div { display: flex; gap: 10px; align-items: baseline; }
.legende dt { font-weight: 650; min-width: 1.1em; font-variant-numeric: tabular-nums; }
.legende dd { color: var(--leise); }
.legende__fuss { font-size: .8125rem; color: var(--leise); max-width: 72ch; }

/* ---------- Erklärung (Popover am Kürzel) ---------- */
.erklaerung {
  width: min(300px, calc(100vw - 32px)); margin: 0; padding: 16px 18px 14px; border: 0; border-radius: 12px; overflow: visible;
  background: var(--pop-grund); color: var(--pop-text); font-size: .875rem; line-height: 1.45; box-shadow: 0 18px 50px rgba(20, 28, 25, .28);
  position-anchor: --kz; inset: auto; top: anchor(bottom); right: anchor(right); margin-top: 8px;
  position-try-fallbacks: --oben, --links;
  opacity: 1; translate: 0 0;
  transition: opacity var(--ui) var(--kurve), translate var(--ui) var(--kurve), overlay var(--ui) allow-discrete, display var(--ui) allow-discrete;
}
@position-try --oben { top: auto; bottom: anchor(top); margin: 0 0 8px; }
@position-try --links { right: auto; left: anchor(left); }
.erklaerung:not(:popover-open) { opacity: 0; translate: 0 -6px; }
@starting-style { .erklaerung:popover-open { opacity: 0; translate: 0 -6px; } }
.erklaerung.ohne-anker { position: fixed; }
.erklaerung__kopf { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 10px; }
.erklaerung__kopf .label { color: var(--pop-leise); display: block; margin-bottom: 2px; }
.erklaerung__kopf b { font: 500 1.0625rem/1.25 'Fraunces', serif; }
.erklaerung__zu { flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; }
.erklaerung__zu:hover { background: rgba(127, 147, 122, .25); }
.erklaerung ul { list-style: none; padding: 0; display: grid; gap: 7px; }
.erklaerung li { display: grid; grid-template-columns: 1.6em 1fr; gap: 8px; }
.erklaerung li b { font-weight: 700; color: var(--senf); }
[data-v="menue"] .erklaerung li b { color: #8a5a1c; }
.erklaerung small { display: block; color: var(--pop-leise); font-size: .8125rem; }
.erklaerung__fuss { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(185, 194, 176, .3); color: var(--pop-leise); font-size: .8125rem; }

/* ---------- Demo-Pult ---------- */
.pult { position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 20; display: flex; align-items: center; gap: 8px 14px; flex-wrap: nowrap; white-space: nowrap; justify-content: center; max-width: calc(100vw - 24px); padding: 7px 8px 7px 14px; border-radius: 999px; background: rgba(41, 62, 58, .94); color: #f0ece0; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); font: 500 10.5px/1.3 'Commissioner', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.pult__gruppe { display: flex; align-items: center; gap: 4px; }
.pult__gruppe > span { color: #b9c2b0; margin-right: 4px; }
.pult button { font: inherit; letter-spacing: inherit; text-transform: inherit; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(240, 236, 224, .22); background: transparent; color: inherit; cursor: pointer; }
.pult button[aria-pressed="true"] { background: #f0ece0; color: #293e3a; border-color: #f0ece0; }
.pult button:disabled { opacity: .4; cursor: not-allowed; }
.pult__werte { color: #b9c2b0; text-transform: none; letter-spacing: .02em; font-size: 11.5px; }

/* Vorführung: gezeichneter Zeiger */
.zeiger { position: fixed; left: 0; top: 0; z-index: 30; width: 20px; height: 20px; pointer-events: none; display: none; transition: scale 150ms var(--kurve); }
.vorfuehrung .zeiger { display: block; }
.zeiger.drueckt { scale: .8; }
.vorschau body { overflow: hidden; padding-bottom: 0; }
.vorschau .kopf nav { display: none; }

/* ---------- Druck (und Druckansicht im Pult) ---------- */
@media print {
  @page { margin: 14mm 16mm; }
  :root, :root[data-v="menue"], :root[data-v="preisliste"] { --blatt: #eee; --lack: #111; --grund: #fff; --text: #111; --leise: #444; --linie: #bbb; --punkt: #999; --salbei-tief: #333; }
  html { background: #fff !important; }
  body { padding: 0; font-size: 12px; }
  [data-fundus-pult], .zeiger, fundus-pult-knopf { display: none !important; }
  .gd .gerichte { row-gap: 14px; }

.kopf, .filter, .wahl, .aktionen, .tabs, .erklaerung, .hinweis-stube, .legende__kopf .label { display: none !important; }
.seite { display: block; }
.einleitung { position: static; gap: 8px; margin-bottom: 18px; text-align: left; justify-items: start; }
.titel { font-size: 30px; }
.lead { max-width: none; font-size: 13px; }
.fakten { font-size: 12px; padding-top: 8px; }
.panel[hidden] { display: block !important; }
.panel { animation: none; padding-top: 0; margin-top: 22px; }
.panel::before { content: attr(data-titel); display: block; font: 500 19px/1.2 'Fraunces', serif; padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1.5px solid currentColor; }
.g[hidden] { display: grid !important; }
.rubrik__leer { display: none !important; }
.rubriken { gap: 18px 40px; }
.gerichte { row-gap: 8px; }
.g__name { font-size: 14px; }
.g__text, .gang__text { font-size: 11.5px; }
.g__preis { font-size: 13.5px; }
.kz { border: 0; padding: 0; min-height: 0; color: inherit; font-size: 9.5px; }
.kz--leer { display: none; }
.gang__name { font-size: 22px; }
.preise { margin-top: 18px; }
.g, .gang, .rubrik__titel, .legende { break-inside: avoid; }
.legende { margin-top: 26px; }
}
/* Druckansicht am Bildschirm: dieselben Regeln auf einem A4-Blatt */
:root.druckblatt, :root.druckblatt[data-v="menue"], :root.druckblatt[data-v="preisliste"] { --blatt: #f0f0f0; --lack: #111; --grund: #fff; --text: #111; --leise: #4a4a4a; --linie: #c4c4c4; --punkt: #9a9a9a; --salbei-tief: #333; background: #d6d1c4; }
:root.druckblatt .seite { max-width: 794px; margin: 28px auto 0; padding: 56px 64px 64px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 20px 60px rgba(40,40,30,.18); font-size: 13px; }
:root.druckblatt .gd .gerichte { row-gap: 14px; }

:root.druckblatt .kopf, :root.druckblatt .filter, :root.druckblatt .wahl, :root.druckblatt .aktionen, :root.druckblatt .tabs, :root.druckblatt .erklaerung, :root.druckblatt .hinweis-stube, :root.druckblatt .legende__kopf .label { display: none !important; }
:root.druckblatt .seite { display: block; }
:root.druckblatt .einleitung { position: static; gap: 8px; margin-bottom: 18px; text-align: left; justify-items: start; }
:root.druckblatt .titel { font-size: 30px; }
:root.druckblatt .lead { max-width: none; font-size: 13px; }
:root.druckblatt .fakten { font-size: 12px; padding-top: 8px; }
:root.druckblatt .panel[hidden] { display: block !important; }
:root.druckblatt .panel { animation: none; padding-top: 0; margin-top: 22px; }
:root.druckblatt .panel::before { content: attr(data-titel); display: block; font: 500 19px/1.2 'Fraunces', serif; padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1.5px solid currentColor; }
:root.druckblatt .g[hidden] { display: grid !important; }
:root.druckblatt .rubrik__leer { display: none !important; }
:root.druckblatt .rubriken { gap: 18px 40px; }
:root.druckblatt .gerichte { row-gap: 8px; }
:root.druckblatt .g__name { font-size: 14px; }
:root.druckblatt .g__text, :root.druckblatt .gang__text { font-size: 11.5px; }
:root.druckblatt .g__preis { font-size: 13.5px; }
:root.druckblatt .kz { border: 0; padding: 0; min-height: 0; color: inherit; font-size: 9.5px; }
:root.druckblatt .kz--leer { display: none; }
:root.druckblatt .gang__name { font-size: 22px; }
:root.druckblatt .preise { margin-top: 18px; }
:root.druckblatt .g, :root.druckblatt .gang, :root.druckblatt .rubrik__titel, :root.druckblatt .legende { break-inside: avoid; }
:root.druckblatt .legende { margin-top: 26px; }


/* ---------- Reduzierte Bewegung ---------- */
.reduziert *, .reduziert *::before, .reduziert *::after { transition: none !important; animation: none !important; }

/* ---------- Touch und schmal ---------- */
@media (hover: none) { .kz { min-height: 30px; padding: 3px 11px; } }
@media (max-width: 1080px) {
  .kopf nav { display: none; }
  .pult__werte { display: none; }
}
@media (max-width: 760px) { .pult { flex-wrap: wrap; border-radius: 16px; } }
@media (max-width: 860px) {
  .seite { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .einleitung { position: static; }
  .tabs { position: sticky; top: 0; margin-inline: calc(var(--rand) * -1); padding-inline: var(--rand); }
}
@media (max-width: 560px) {
  .kopf { padding-block: 12px; }
  .marke span { display: none; }
  .reservieren { height: 38px; padding: 0 16px; }
  .lead { font-size: 1rem; }
  .tab__zeit { font-size: .6875rem; line-height: 1.3; }
  .tabs [role="tab"] { padding-bottom: 12px; }
  .g { column-gap: 14px; }
  .g__name { font-size: 1.0625rem; }
  .rubrik__titel { font-size: 1.3125rem; }
  .gang { grid-template-columns: 2.2rem minmax(0, 1fr) auto; column-gap: 12px; }
  .einleitung { gap: 16px; }
  .aktionen [data-drucken] { display: none; }
  .chip { min-height: 36px; padding: 0 11px 0 9px; font-size: .8125rem; gap: 6px; }
  .filter__knoepfe { gap: 6px; }
  [data-v="menue"] .tab__titel { font-size: 1.1875rem; }
  [data-v="menue"] .tabs [role="tab"] { padding-inline: 2px; }
  [data-v="menue"] .fakten { grid-template-columns: auto auto; }
  .pult__werte { display: none; }
}
@media (max-width: 360px) {
  .tab__titel { font-size: 1.1875rem; }
  .tab__titel, .tab__zeit { overflow-wrap: anywhere; hyphens: auto; }
  .tabs [role="tab"] { min-width: 0; padding-right: 2px; gap: 2px 4px; }
}
@media (forced-colors: active) {
  button, [role=button], [role=tab], [role=switch] { border: 1px solid ButtonText !important; }
  .tabs [aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}
</style>
</head>
<body>
<header class="kopf">
  <a class="marke" href="#start"><b data-nicht="preis">Rotmain</b><b data-nur="preis">Kammzug</b><span class="label" data-nur="bistro">Bistro &amp; Weinstube · Bayreuth</span><span class="label" data-nur="menue">Die Stube · Bayreuth</span><span class="label" data-nur="preis">Salon · Regensburg</span></a>
  <nav aria-label="Hauptnavigation"><ul data-nicht="preis">
    <li><a href="#karte" aria-current="page">Karte</a></li><li><a href="#mittag">Mittagstisch</a></li><li><a href="#stube">Die Stube</a></li><li><a href="#haus">Haus &amp; Team</a></li><li><a href="#anfahrt">Anfahrt</a></li>
  </ul><ul data-nur="preis">
    <li><a href="#karte" aria-current="page">Preise</a></li><li><a href="#team">Team</a></li><li><a href="#looks">Looks</a></li><li><a href="#gutscheine">Gutscheine</a></li><li><a href="#anfahrt">Anfahrt</a></li>
  </ul></nav>
  <a class="reservieren" href="#reservieren" data-nicht="preis">Tisch reservieren</a>
  <a class="reservieren" href="#termin" data-nur="preis">Termin buchen</a>
</header>

<main class="seite" id="karte">
  <div class="einleitung">
    <p class="label" data-nur="bistro">Die Karte · Herbst 2026</p>
    <p class="label" data-nur="menue">Abendmenü · Freitag und Samstag</p>
    <h1 class="titel" data-nur="bistro">Fränkisch gekocht, <em>nicht von gestern.</em></h1>
    <h1 class="titel" data-nur="menue">Fünf Gänge, <em>ein langer Abend.</em></h1>
    <p class="lead" data-nur="bistro">Mittags schnell und ehrlich, abends mit Zeit. Fleisch, Fisch und Gemüse kommen zum größten Teil aus Oberfranken; die Karte wechselt mit der Saison.</p>
    <p class="lead" data-nur="menue">Zwölf Plätze, ein Menü, das mit der Jahreszeit geht. Ab 18.30 Uhr, letzter Einlass 20 Uhr. Wir bitten um Reservierung.</p>
    <p class="label" data-nur="preis">Leistungen &amp; Preise · gültig ab 1. Oktober 2026</p>
    <h1 class="titel" data-nur="preis">Schnitt, Farbe <em>und die Zeit dafür.</em></h1>
    <p class="lead" data-nur="preis">Jede Zeile sagt, wie lange es dauert und was es kostet. Wählen Sie, bei wem Sie buchen und wie lang Ihr Haar ist. Die Liste rechnet mit.</p>
    <div class="wahl" data-nur="preis">
      <div class="wahl__gruppe" role="group" aria-labelledby="wahl-stufe">
        <p class="label" id="wahl-stufe">Bei wem?</p>
        <div class="filter__knoepfe">
          <button type="button" class="chip" aria-pressed="false" data-stufe="junior">Junior</button>
          <button type="button" class="chip" aria-pressed="true" data-stufe="stylist">Stylist</button>
          <button type="button" class="chip" aria-pressed="false" data-stufe="master">Master</button>
        </div>
        <p class="wahl__info" aria-live="polite" data-stufe-info></p>
      </div>
      <div class="wahl__gruppe" role="group" aria-labelledby="wahl-laenge">
        <p class="label" id="wahl-laenge">Ihre Haarlänge</p>
        <div class="filter__knoepfe">
          <button type="button" class="chip" aria-pressed="false" data-laenge="kurz">kurz</button>
          <button type="button" class="chip" aria-pressed="true" data-laenge="schulter">schulterlang</button>
          <button type="button" class="chip" aria-pressed="false" data-laenge="lang">lang</button>
        </div>
      </div>
    </div>
    <dl class="fakten" data-nur="preis">
      <dt>Preise</dt><dd>in Euro inkl. MwSt.</dd>
      <dt>Beratung</dt><dd>15 Min., kostenlos vor jeder Behandlung</dd>
    </dl>
    <dl class="fakten" data-nicht="preis">
      <dt>Gültig ab</dt><dd>28. Oktober 2026</dd>
      <dt>Preise</dt><dd>in Euro inkl. MwSt.</dd>
    </dl>
    <div class="filter" role="group" aria-labelledby="filter-titel" data-nur="bistro">
      <p class="label" id="filter-titel">Ich esse</p>
      <div class="filter__knoepfe">
        <button type="button" class="chip" aria-pressed="false" data-filter="v"><i aria-hidden="true"></i>vegetarisch</button>
        <button type="button" class="chip" aria-pressed="false" data-filter="A"><i aria-hidden="true"></i>ohne Gluten</button>
        <button type="button" class="chip" aria-pressed="false" data-filter="G"><i aria-hidden="true"></i>ohne Milch</button>
      </div>
      <p class="treffer" aria-live="polite" data-treffer></p>
    </div>
    <p class="hinweis-stube" data-nur="menue"><b>Unverträglichkeiten?</b> Sagen Sie es uns bei der Reservierung. Wir passen jeden Gang an.</p>
    <div class="aktionen">
      <button type="button" class="knopf-linie" data-drucken><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M4 6V1.5h8V6M4 12H2.5A1 1 0 0 1 1.5 11V7a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H12"/><path d="M4 9.5h8v5H4z"/></svg><span data-nicht="preis">Karte drucken</span><span data-nur="preis">Preisliste drucken</span></button>
      <a href="#legende" data-nicht="preis">Allergene erklärt</a>
      <a href="#gutscheine" data-nur="preis">Gutschein verschenken</a>
    </div>
  </div>

  <div class="karte" data-laenge="schulter">
    <div data-nur="bistro">
      <div class="tabs" role="tablist" aria-label="Karte">
<button type="button" role="tab" id="tab-mittag" aria-selected="true" aria-controls="karte-mittag" data-tab="mittag"><span class="tab__titel">Mittag</span><span class="tab__zeit">Mi–Fr · 11.30–14.30</span><span class="tab__zahl" aria-hidden="true"></span></button>
<button type="button" role="tab" id="tab-abend" aria-selected="false" aria-controls="karte-abend" tabindex="-1" data-tab="abend"><span class="tab__titel">Abend</span><span class="tab__zeit">Mi–Sa · ab 18 Uhr</span><span class="tab__zahl" aria-hidden="true"></span></button>
<button type="button" role="tab" id="tab-getraenke" aria-selected="false" aria-controls="karte-getraenke" tabindex="-1" data-tab="getraenke"><span class="tab__titel">Getränke</span><span class="tab__zeit">ganztags</span><span class="tab__zahl" aria-hidden="true"></span></button>
      </div>
<div class="panel" role="tabpanel" id="karte-mittag" aria-labelledby="tab-mittag" data-titel="Mittag · Mi–Fr · 11.30–14.30" tabindex="0"><div class="rubriken"><section class="rubrik" aria-label="Zum Anfang"><h3 class="rubrik__titel">Zum Anfang</h3><ul class="gerichte"><li class="g" data-kz="G I" data-z="v"><h4 class="g__name">Kürbissuppe <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="6.90">6,90</data><p class="g__text">Hokkaido, Kürbiskernöl, geröstete Kerne</p><p class="g__kz"><button type="button" class="kz" data-kz="G I" data-gericht="Kürbissuppe" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Milch und Laktose, Sellerie"><b>G</b> <b>I</b></button></p></li><li class="g" data-kz="A G" data-z="v"><h4 class="g__name">Obatzda <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="8.50">8,50</data><p class="g__text">Camembert, Butter, Paprika, rote Zwiebel, Bauernbrot</p><p class="g__kz"><button type="button" class="kz" data-kz="A G" data-gericht="Obatzda" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Milch und Laktose"><b>A</b> <b>G</b></button></p></li><li class="g" data-kz="A J L" data-z=""><h4 class="g__name">Feldsalat</h4><data class="g__preis" value="9.20">9,20</data><p class="g__text">Kartoffeldressing, Speck, Brotwürfel</p><p class="g__kz"><button type="button" class="kz" data-kz="A J L" data-gericht="Feldsalat" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Senf, Schwefeldioxid und Sulfite"><b>A</b> <b>J</b> <b>L</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section><section class="rubrik rubrik--haupt" aria-label="Warm"><h3 class="rubrik__titel">Warm</h3><ul class="gerichte"><li class="g" data-kz="A I J L" data-z=""><h4 class="g__name">Blaue Zipfel</h4><data class="g__preis" value="13.90">13,90</data><p class="g__text">Bratwürste im Essig-Zwiebel-Sud, Bauernbrot</p><p class="g__kz"><button type="button" class="kz" data-kz="A I J L" data-gericht="Blaue Zipfel" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Sellerie, Senf, Schwefeldioxid und Sulfite"><b>A</b> <b>I</b> <b>J</b> <b>L</b></button></p></li><li class="g" data-kz="A C D J" data-z=""><h4 class="g__name">Karpfen gebacken</h4><data class="g__preis" value="19.50">19,50</data><p class="g__text">halber Spiegelkarpfen, Kartoffelsalat, Zitrone</p><p class="g__kz"><button type="button" class="kz" data-kz="A C D J" data-gericht="Karpfen gebacken" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Fisch, Senf"><b>A</b> <b>C</b> <b>D</b> <b>J</b></button></p></li><li class="g" data-kz="G I" data-z=""><h4 class="g__name">Krautwickel</h4><data class="g__preis" value="14.80">14,80</data><p class="g__text">Weißkraut, Rinderhack, Kümmel, Kartoffelpüree</p><p class="g__kz"><button type="button" class="kz" data-kz="G I" data-gericht="Krautwickel" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Milch und Laktose, Sellerie"><b>G</b> <b>I</b></button></p></li><li class="g" data-kz="A C G" data-z="v"><h4 class="g__name">Pilzrahm <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="14.20">14,20</data><p class="g__text">Steinpilze, Champignons, Semmelknödel, Petersilie</p><p class="g__kz"><button type="button" class="kz" data-kz="A C G" data-gericht="Pilzrahm" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Milch und Laktose"><b>A</b> <b>C</b> <b>G</b></button></p></li><li class="g" data-kz="A C I J L" data-z="v"><h4 class="g__name">Linsen und Spätzle <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="12.90">12,90</data><p class="g__text">Berglinsen, Wurzelgemüse, Senf, Essig</p><p class="g__kz"><button type="button" class="kz" data-kz="A C I J L" data-gericht="Linsen und Spätzle" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Sellerie, Senf, Schwefeldioxid und Sulfite"><b>A</b> <b>C</b> <b>I</b> <b>J</b> <b>L</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section><section class="rubrik" aria-label="Süß"><h3 class="rubrik__titel">Süß</h3><ul class="gerichte"><li class="g" data-kz="A C G" data-z="v"><h4 class="g__name">Apfelküchle <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="6.80">6,80</data><p class="g__text">Vanillesoße, Zimtzucker</p><p class="g__kz"><button type="button" class="kz" data-kz="A C G" data-gericht="Apfelküchle" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Milch und Laktose"><b>A</b> <b>C</b> <b>G</b></button></p></li><li class="g" data-kz="G H" data-z="v"><h4 class="g__name">Zwetschgenröster <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="6.20">6,20</data><p class="g__text">Quarkcreme, Mandelkrokant</p><p class="g__kz"><button type="button" class="kz" data-kz="G H" data-gericht="Zwetschgenröster" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Milch und Laktose, Schalenfrüchte"><b>G</b> <b>H</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section></div></div>
<div class="panel" role="tabpanel" id="karte-abend" aria-labelledby="tab-abend" data-titel="Abend · Mi–Sa · ab 18 Uhr" hidden tabindex="0"><div class="rubriken"><section class="rubrik" aria-label="Kleine Teller"><h3 class="rubrik__titel">Kleine Teller</h3><ul class="gerichte"><li class="g" data-kz="G H" data-z="v"><h4 class="g__name">Rote Bete <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="11.50">11,50</data><p class="g__text">Ziegenfrischkäse, Walnuss, Honig</p><p class="g__kz"><button type="button" class="kz" data-kz="G H" data-gericht="Rote Bete" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Milch und Laktose, Schalenfrüchte"><b>G</b> <b>H</b></button></p></li><li class="g" data-kz="A D G" data-z=""><h4 class="g__name">Karpfen-Rillette</h4><data class="g__preis" value="12.80">12,80</data><p class="g__text">Meerrettich, Roggenchip, Dill</p><p class="g__kz"><button type="button" class="kz" data-kz="A D G" data-gericht="Karpfen-Rillette" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Fisch, Milch und Laktose"><b>A</b> <b>D</b> <b>G</b></button></p></li><li class="g" data-kz="J L" data-z=""><h4 class="g__name">Wurstsalat vom Weiderind</h4><data class="g__preis" value="10.90">10,90</data><p class="g__text">Kürbiskernöl, Zwiebel, Schnittlauch</p><p class="g__kz"><button type="button" class="kz" data-kz="J L" data-gericht="Wurstsalat vom Weiderind" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Senf, Schwefeldioxid und Sulfite"><b>J</b> <b>L</b></button></p></li><li class="g" data-kz="A H I" data-z="vg"><h4 class="g__name">Wirsing und Graupen <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="10.40">10,40</data><p class="g__text">Pilze, Petersilienöl, Haselnuss</p><p class="g__kz"><button type="button" class="kz" data-kz="A H I" data-gericht="Wirsing und Graupen" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Schalenfrüchte, Sellerie"><b>A</b> <b>H</b> <b>I</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section><section class="rubrik rubrik--haupt" aria-label="Hauptgang"><h3 class="rubrik__titel">Hauptgang</h3><ul class="gerichte"><li class="g" data-kz="A I L" data-z=""><h4 class="g__name">Schäufele</h4><data class="g__preis" value="22.50">22,50</data><p class="g__text">vom Landschwein, Kloß, Wirsing, Biersoße</p><p class="g__kz"><button type="button" class="kz" data-kz="A I L" data-gericht="Schäufele" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Sellerie, Schwefeldioxid und Sulfite"><b>A</b> <b>I</b> <b>L</b></button></p></li><li class="g" data-kz="A C G I L" data-z=""><h4 class="g__name">Rehrücken</h4><data class="g__preis" value="31.00">31,00</data><p class="g__text">aus dem Fichtelgebirge, Selleriepüree, Preiselbeeren, Schupfnudeln</p><p class="g__kz"><button type="button" class="kz" data-kz="A C G I L" data-gericht="Rehrücken" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Milch und Laktose, Sellerie, Schwefeldioxid und Sulfite"><b>A</b> <b>C</b> <b>G</b> <b>I</b> <b>L</b></button></p></li><li class="g" data-kz="D G I J" data-z=""><h4 class="g__name">Saibling</h4><data class="g__preis" value="26.80">26,80</data><p class="g__text">Rahmlinsen, Senfsaat, Kerbel</p><p class="g__kz"><button type="button" class="kz" data-kz="D G I J" data-gericht="Saibling" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Fisch, Milch und Laktose, Sellerie, Senf"><b>D</b> <b>G</b> <b>I</b> <b>J</b></button></p></li><li class="g" data-kz="A C G" data-z="v"><h4 class="g__name">Kürbis-Gnocchi <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="18.90">18,90</data><p class="g__text">Salbeibutter, Bergkäse, Kürbiskerne</p><p class="g__kz"><button type="button" class="kz" data-kz="A C G" data-gericht="Kürbis-Gnocchi" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Milch und Laktose"><b>A</b> <b>C</b> <b>G</b></button></p></li><li class="g" data-kz="G I L" data-z=""><h4 class="g__name">Ochsenbacke</h4><data class="g__preis" value="24.80">24,80</data><p class="g__text">geschmort, Wurzelgemüse, Kartoffelstampf, Rotweinsoße</p><p class="g__kz"><button type="button" class="kz" data-kz="G I L" data-gericht="Ochsenbacke" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Milch und Laktose, Sellerie, Schwefeldioxid und Sulfite"><b>G</b> <b>I</b> <b>L</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section><section class="rubrik" aria-label="Zum Schluss"><h3 class="rubrik__titel">Zum Schluss</h3><ul class="gerichte"><li class="g" data-kz="A C G H" data-z="v"><h4 class="g__name">Lebkuchen-Parfait <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="8.90">8,90</data><p class="g__text">Zwetschge, Zimt, Sauerrahm</p><p class="g__kz"><button type="button" class="kz" data-kz="A C G H" data-gericht="Lebkuchen-Parfait" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Milch und Laktose, Schalenfrüchte"><b>A</b> <b>C</b> <b>G</b> <b>H</b></button></p></li><li class="g" data-kz="A H" data-z="vg"><h4 class="g__name">Quitte <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="8.40">8,40</data><p class="g__text">Vanille, Mandelstreusel, Hafermilch-Eis</p><p class="g__kz"><button type="button" class="kz" data-kz="A H" data-gericht="Quitte" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Schalenfrüchte"><b>A</b> <b>H</b></button></p></li><li class="g" data-kz="A G J" data-z="v"><h4 class="g__name">Käse aus Oberfranken <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="12.50">12,50</data><p class="g__text">drei Sorten, Birnensenf, Früchtebrot</p><p class="g__kz"><button type="button" class="kz" data-kz="A G J" data-gericht="Käse aus Oberfranken" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Milch und Laktose, Senf"><b>A</b> <b>G</b> <b>J</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section></div></div>
<div class="panel" role="tabpanel" id="karte-getraenke" aria-labelledby="tab-getraenke" data-titel="Getränke · ganztags" hidden tabindex="0"><div class="rubriken rubriken--vier"><section class="rubrik" aria-label="Vom Fass"><h3 class="rubrik__titel">Vom Fass</h3><ul class="gerichte"><li class="g" data-kz="A" data-z="vg"><h4 class="g__name">Kellerbier <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="4.60">4,60</data><p class="g__text">ungefiltert, aus der Fränkischen Schweiz · 0,5 l</p><p class="g__kz"><button type="button" class="kz" data-kz="A" data-gericht="Kellerbier" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide"><b>A</b></button></p></li><li class="g" data-kz="A" data-z="vg"><h4 class="g__name">Helles <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="4.40">4,40</data><p class="g__text">0,5 l</p><p class="g__kz"><button type="button" class="kz" data-kz="A" data-gericht="Helles" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide"><b>A</b></button></p></li><li class="g" data-kz="A" data-z="vg"><h4 class="g__name">Rauchbier <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="4.80">4,80</data><p class="g__text">Märzen aus Bamberg · 0,5 l</p><p class="g__kz"><button type="button" class="kz" data-kz="A" data-gericht="Rauchbier" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide"><b>A</b></button></p></li><li class="g" data-kz="A" data-z="vg"><h4 class="g__name">Weißbier alkoholfrei <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="4.50">4,50</data><p class="g__text">0,5 l</p><p class="g__kz"><button type="button" class="kz" data-kz="A" data-gericht="Weißbier alkoholfrei" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide"><b>A</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section><section class="rubrik" aria-label="Wein offen · 0,2 l"><h3 class="rubrik__titel">Wein offen · 0,2 l</h3><ul class="gerichte"><li class="g" data-kz="L" data-z="vg"><h4 class="g__name">Silvaner <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="7.20">7,20</data><p class="g__text">trocken, Franken 2024</p><p class="g__kz"><button type="button" class="kz" data-kz="L" data-gericht="Silvaner" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Schwefeldioxid und Sulfite"><b>L</b></button></p></li><li class="g" data-kz="L" data-z="vg"><h4 class="g__name">Bacchus <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="6.80">6,80</data><p class="g__text">feinherb, Franken 2024</p><p class="g__kz"><button type="button" class="kz" data-kz="L" data-gericht="Bacchus" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Schwefeldioxid und Sulfite"><b>L</b></button></p></li><li class="g" data-kz="L" data-z="vg"><h4 class="g__name">Domina Rosé <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="7.00">7,00</data><p class="g__text">trocken, Franken 2024</p><p class="g__kz"><button type="button" class="kz" data-kz="L" data-gericht="Domina Rosé" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Schwefeldioxid und Sulfite"><b>L</b></button></p></li><li class="g" data-kz="L" data-z="vg"><h4 class="g__name">Spätburgunder <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="8.40">8,40</data><p class="g__text">trocken, Franken 2022</p><p class="g__kz"><button type="button" class="kz" data-kz="L" data-gericht="Spätburgunder" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Schwefeldioxid und Sulfite"><b>L</b></button></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section><section class="rubrik" aria-label="Ohne Alkohol"><h3 class="rubrik__titel">Ohne Alkohol</h3><ul class="gerichte"><li class="g" data-kz="" data-z="vg"><h4 class="g__name">Holunderschorle <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="4.20">4,20</data><p class="g__text">hausgemacht · 0,4 l</p><p class="g__kz"><span class="kz kz--leer" aria-hidden="true">–</span><span class="sr">ohne Hauptallergene</span></p></li><li class="g" data-kz="" data-z="vg"><h4 class="g__name">Apfelschorle <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="3.90">3,90</data><p class="g__text">naturtrüb · 0,4 l</p><p class="g__kz"><span class="kz kz--leer" aria-hidden="true">–</span><span class="sr">ohne Hauptallergene</span></p></li><li class="g" data-kz="" data-z="vg"><h4 class="g__name">Tafelwasser <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="6.50">6,50</data><p class="g__text">still oder sprudelnd · 0,75 l</p><p class="g__kz"><span class="kz kz--leer" aria-hidden="true">–</span><span class="sr">ohne Hauptallergene</span></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section><section class="rubrik" aria-label="Kaffee und Tee"><h3 class="rubrik__titel">Kaffee und Tee</h3><ul class="gerichte"><li class="g" data-kz="" data-z="vg"><h4 class="g__name">Espresso <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="2.60">2,60</data><p class="g__text"></p><p class="g__kz"><span class="kz kz--leer" aria-hidden="true">–</span><span class="sr">ohne Hauptallergene</span></p></li><li class="g" data-kz="G" data-z="v"><h4 class="g__name">Cappuccino <abbr class="zeichen zeichen--v" title="vegetarisch">V</abbr></h4><data class="g__preis" value="3.80">3,80</data><p class="g__text">auch mit Hafermilch</p><p class="g__kz"><button type="button" class="kz" data-kz="G" data-gericht="Cappuccino" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Milch und Laktose"><b>G</b></button></p></li><li class="g" data-kz="" data-z="vg"><h4 class="g__name">Tee <abbr class="zeichen zeichen--vg" title="vegan">VG</abbr></h4><data class="g__preis" value="3.60">3,60</data><p class="g__text">lose Blätter, Kännchen</p><p class="g__kz"><span class="kz kz--leer" aria-hidden="true">–</span><span class="sr">ohne Hauptallergene</span></p></li></ul><p class="rubrik__leer" hidden>Hier passt heute nichts zu Ihrer Auswahl. Fragen Sie uns: Die Küche kocht vieles gern um.</p></section></div></div>
    </div>
    <div data-nur="menue">
      <div class="tabs" role="tablist" aria-label="Menü">
<button type="button" role="tab" id="tab-m-herbst" aria-selected="true" aria-controls="menue-herbst" data-tab="herbst"><span class="tab__titel">Herbstmenü</span><span class="tab__zeit">fünf Gänge</span></button>
<button type="button" role="tab" id="tab-m-pflanzlich" aria-selected="false" aria-controls="menue-pflanzlich" tabindex="-1" data-tab="pflanzlich"><span class="tab__titel">Pflanzlich</span><span class="tab__zeit">fünf Gänge, vegan</span></button>
<button type="button" role="tab" id="tab-m-begleitung" aria-selected="false" aria-controls="menue-begleitung" tabindex="-1" data-tab="begleitung"><span class="tab__titel">Begleitung</span><span class="tab__zeit">zum Menü</span></button>
      </div>
<div class="panel" role="tabpanel" id="menue-herbst" aria-labelledby="tab-m-herbst" data-titel="Herbstmenü · fünf Gänge" tabindex="0"><ol class="gaenge"><li class="gang"><span class="gang__nr">I</span><h4 class="gang__name">Brot</h4><p class="gang__text">Roggensauerteig · Nussbutter · Salz</p><p class="g__kz"><button type="button" class="kz" data-kz="A G" data-gericht="Brot" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Milch und Laktose"><b>A</b> <b>G</b></button></p></li><li class="gang"><span class="gang__nr">II</span><h4 class="gang__name">Karpfen</h4><p class="gang__text">Meerrettich · Rote Bete · Dill</p><p class="g__kz"><button type="button" class="kz" data-kz="D G L" data-gericht="Karpfen" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Fisch, Milch und Laktose, Schwefeldioxid und Sulfite"><b>D</b> <b>G</b> <b>L</b></button></p></li><li class="gang"><span class="gang__nr">III</span><h4 class="gang__name">Steinpilz</h4><p class="gang__text">Eigelb · Brotsud · Petersilie</p><p class="g__kz"><button type="button" class="kz" data-kz="A C I" data-gericht="Steinpilz" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Sellerie"><b>A</b> <b>C</b> <b>I</b></button></p></li><li class="gang"><span class="gang__nr">IV</span><h4 class="gang__name">Reh</h4><p class="gang__text">Sellerie · Wacholder · Schwarzwurzel</p><p class="g__kz"><button type="button" class="kz" data-kz="G I L" data-gericht="Reh" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Milch und Laktose, Sellerie, Schwefeldioxid und Sulfite"><b>G</b> <b>I</b> <b>L</b></button></p></li><li class="gang"><span class="gang__nr">V</span><h4 class="gang__name">Zwetschge</h4><p class="gang__text">Lebkuchen · Sauerrahm · Zimt</p><p class="g__kz"><button type="button" class="kz" data-kz="A C G H" data-gericht="Zwetschge" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Eier, Milch und Laktose, Schalenfrüchte"><b>A</b> <b>C</b> <b>G</b> <b>H</b></button></p></li></ol><dl class="preise"><div class="preis"><dt>Fünf Gänge</dt><dd><data value="89.00">89,00</data></dd></div><div class="preis"><dt>Vier Gänge, ohne Steinpilz</dt><dd><data value="74.00">74,00</data></dd></div></dl></div>
<div class="panel" role="tabpanel" id="menue-pflanzlich" aria-labelledby="tab-m-pflanzlich" data-titel="Pflanzlich · fünf Gänge, vegan" hidden tabindex="0"><ol class="gaenge"><li class="gang"><span class="gang__nr">I</span><h4 class="gang__name">Brot</h4><p class="gang__text">Roggensauerteig · Leinöl · Salz</p><p class="g__kz"><button type="button" class="kz" data-kz="A" data-gericht="Brot" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide"><b>A</b></button></p></li><li class="gang"><span class="gang__nr">II</span><h4 class="gang__name">Rote Bete</h4><p class="gang__text">Meerrettich · Apfel · Dill</p><p class="g__kz"><button type="button" class="kz" data-kz="L" data-gericht="Rote Bete" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Schwefeldioxid und Sulfite"><b>L</b></button></p></li><li class="gang"><span class="gang__nr">III</span><h4 class="gang__name">Steinpilz</h4><p class="gang__text">Graupen · Brotsud · Petersilie</p><p class="g__kz"><button type="button" class="kz" data-kz="A I" data-gericht="Steinpilz" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Sellerie"><b>A</b> <b>I</b></button></p></li><li class="gang"><span class="gang__nr">IV</span><h4 class="gang__name">Kürbis</h4><p class="gang__text">Sellerie · Wacholder · Schwarzwurzel</p><p class="g__kz"><button type="button" class="kz" data-kz="I" data-gericht="Kürbis" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Sellerie"><b>I</b></button></p></li><li class="gang"><span class="gang__nr">V</span><h4 class="gang__name">Zwetschge</h4><p class="gang__text">Lebkuchen · Hafer · Zimt</p><p class="g__kz"><button type="button" class="kz" data-kz="A H" data-gericht="Zwetschge" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Glutenhaltiges Getreide, Schalenfrüchte"><b>A</b> <b>H</b></button></p></li></ol><dl class="preise"><div class="preis"><dt>Fünf Gänge</dt><dd><data value="79.00">79,00</data></dd></div><div class="preis"><dt>Vier Gänge, ohne Steinpilz</dt><dd><data value="66.00">66,00</data></dd></div></dl></div>
<div class="panel" role="tabpanel" id="menue-begleitung" aria-labelledby="tab-m-begleitung" data-titel="Begleitung · zum Menü" hidden tabindex="0"><ol class="gaenge"><li class="gang"><span class="gang__nr">I</span><h4 class="gang__name">Weinbegleitung</h4><p class="gang__text">fünf Gläser à 0,1 l · Franken und Württemberg</p><p class="g__kz"><button type="button" class="kz" data-kz="L" data-gericht="Weinbegleitung" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Schwefeldioxid und Sulfite"><b>L</b></button></p></li><li class="gang"><span class="gang__nr">II</span><h4 class="gang__name">Ohne Alkohol</h4><p class="gang__text">Säfte, Tees und Fermente aus der eigenen Küche</p><p class="g__kz"><span class="kz kz--leer" aria-hidden="true">–</span><span class="sr">ohne Hauptallergene</span></p></li><li class="gang"><span class="gang__nr">III</span><h4 class="gang__name">Aperitif</h4><p class="gang__text">Silvaner-Secco · 0,1 l</p><p class="g__kz"><button type="button" class="kz" data-kz="L" data-gericht="Aperitif" aria-expanded="false" aria-controls="erklaerung" aria-label="Allergene: Schwefeldioxid und Sulfite"><b>L</b></button></p></li></ol><dl class="preise"><div class="preis"><dt>Weinbegleitung</dt><dd><data value="54.00">54,00</data></dd></div><div class="preis"><dt>Ohne Alkohol</dt><dd><data value="38.00">38,00</data></dd></div><div class="preis"><dt>Aperitif</dt><dd><data value="8.50">8,50</data></dd></div></dl></div>
    </div>
    <div data-nur="preis" class="preisliste">
      <div class="tabs" role="tablist" aria-label="Preisliste">
<button type="button" role="tab" id="tab-p-damen" aria-selected="true" aria-controls="preis-damen" data-tab="damen"><span class="tab__titel">Damen</span><span class="tab__zeit">Schnitt &amp; Styling</span></button>
<button type="button" role="tab" id="tab-p-herren" aria-selected="false" aria-controls="preis-herren" tabindex="-1" data-tab="herren"><span class="tab__titel">Herren</span><span class="tab__zeit">Schnitt &amp; Bart</span></button>
<button type="button" role="tab" id="tab-p-farbe" aria-selected="false" aria-controls="preis-farbe" tabindex="-1" data-tab="farbe"><span class="tab__titel">Farbe</span><span class="tab__zeit">ab-Preise</span></button>
<button type="button" role="tab" id="tab-p-pflege" aria-selected="false" aria-controls="preis-pflege" tabindex="-1" data-tab="pflege"><span class="tab__titel">Pflege</span><span class="tab__zeit">&amp; Kosmetik</span></button>
      </div>
<div class="panel" role="tabpanel" id="preis-damen" aria-labelledby="tab-p-damen" data-titel="Damen · Schnitt und Styling" tabindex="0"><table class="pl"><caption class="sr">Damen, Preise in Euro inkl. MwSt.</caption><thead><tr><th scope="col">Leistung</th><th scope="col" class="pl__dauer">Dauer</th><th scope="col" class="pl__p" data-l="kurz">kurz</th><th scope="col" class="pl__p" data-l="schulter">schulterlang</th><th scope="col" class="pl__p" data-l="lang">lang</th></tr></thead><tbody><tr><th scope="row"><span class="pl__name">Schneiden, Waschen, Föhnen</span><span class="pl__text">mit Typberatung</span><span class="pl__dauer-k">45–75 Min.</span></th><td class="pl__dauer">45–75 Min.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><data value="60" data-p="48|60|72">60</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><data value="68" data-p="54|68|82">68</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><data value="78" data-p="62|78|94">78</data></span></td></tr><tr><th scope="row"><span class="pl__name">Schnitt ohne Föhnen</span><span class="pl__text">Haar wird nass geschnitten, Sie gehen lufttrocken</span><span class="pl__dauer-k">30–45 Min.</span></th><td class="pl__dauer">30–45 Min.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><data value="44" data-p="35|44|53">44</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><data value="50" data-p="40|50|60">50</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><data value="56" data-p="45|56|67">56</data></span></td></tr><tr><th scope="row"><span class="pl__name">Föhnen und Styling</span><span class="pl__dauer-k">30–45 Min.</span></th><td class="pl__dauer">30–45 Min.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><data value="30" data-p="24|30|36">30</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><data value="34" data-p="27|34|41">34</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><data value="40" data-p="32|40|48">40</data></span></td></tr><tr><th scope="row"><span class="pl__name">Pony nachschneiden</span><span class="pl__text">zwischen zwei Terminen</span><span class="pl__dauer-k">10 Min.</span></th><td class="pl__dauer">10 Min.</td><td class="pl__p pl__p--alle" data-l="alle" colspan="3"><span class="pl__wert"><data value="10" data-p="10|10|10">10</data><small>jede Länge</small></span></td></tr><tr><th scope="row"><span class="pl__name">Hochstecken</span><span class="pl__text">Hochzeit, Abiball; Probetermin empfohlen</span><span class="pl__dauer-k">45–90 Min.</span></th><td class="pl__dauer">45–90 Min.</td><td class="pl__p pl__p--alle" data-l="alle" colspan="3"><span class="pl__wert"><button type="button" class="ab" data-frage="styling" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="58" data-p="46|58|70">58</data><small>jede Länge</small></span></td></tr></tbody></table></div>
<div class="panel" role="tabpanel" id="preis-herren" aria-labelledby="tab-p-herren" data-titel="Herren · Schnitt und Bart" hidden tabindex="0"><table class="pl"><caption class="sr">Herren, Preise in Euro inkl. MwSt.</caption><thead><tr><th scope="col">Leistung</th><th scope="col" class="pl__dauer">Dauer</th><th scope="col" class="pl__p" data-l="alle">Preis</th></tr></thead><tbody><tr><th scope="row"><span class="pl__name">Herrenschnitt</span><span class="pl__text">mit Waschen und Styling</span><span class="pl__dauer-k">30–45 Min.</span></th><td class="pl__dauer">30–45 Min.</td><td class="pl__p" data-l="alle"><span class="pl__wert"><data value="38" data-p="30|38|46">38</data></span></td></tr><tr><th scope="row"><span class="pl__name">Maschinenschnitt</span><span class="pl__text">eine Länge, ohne Waschen</span><span class="pl__dauer-k">20 Min.</span></th><td class="pl__dauer">20 Min.</td><td class="pl__p" data-l="alle"><span class="pl__wert"><data value="24" data-p="19|24|29">24</data></span></td></tr><tr><th scope="row"><span class="pl__name">Skin Fade</span><span class="pl__text">nicht bei Junior: braucht Routine</span><span class="pl__dauer-k">45 Min.</span></th><td class="pl__dauer">45 Min.</td><td class="pl__p" data-l="alle"><span class="pl__wert"><data value="44" data-p="0|44|53">44</data></span></td></tr><tr><th scope="row"><span class="pl__name">Bart in Form</span><span class="pl__text">Kontur mit Messer</span><span class="pl__dauer-k">20 Min.</span></th><td class="pl__dauer">20 Min.</td><td class="pl__p" data-l="alle"><span class="pl__wert"><data value="20" data-p="16|20|24">20</data></span></td></tr></tbody></table></div>
<div class="panel" role="tabpanel" id="preis-farbe" aria-labelledby="tab-p-farbe" data-titel="Farbe · ab-Preise, Endpreis nach Beratung" hidden tabindex="0"><table class="pl"><caption class="sr">Farbe, Preise in Euro inkl. MwSt.</caption><thead><tr><th scope="col">Leistung</th><th scope="col" class="pl__dauer">Dauer</th><th scope="col" class="pl__p" data-l="kurz">kurz</th><th scope="col" class="pl__p" data-l="schulter">schulterlang</th><th scope="col" class="pl__p" data-l="lang">lang</th></tr></thead><tbody><tr><th scope="row"><span class="pl__name">Ansatzfarbe</span><span class="pl__text">bis 2 cm Nachwuchs</span><span class="pl__dauer-k">75–90 Min.</span></th><td class="pl__dauer">75–90 Min.</td><td class="pl__p pl__p--alle" data-l="alle" colspan="3"><span class="pl__wert"><button type="button" class="ab" data-frage="farbe" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="62" data-p="50|62|74">62</data><small>jede Länge</small></span></td></tr><tr><th scope="row"><span class="pl__name">Färben komplett</span><span class="pl__text">eine Farbe, Längen und Spitzen</span><span class="pl__dauer-k">90–120 Min.</span></th><td class="pl__dauer">90–120 Min.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><button type="button" class="ab" data-frage="farbe" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="74" data-p="59|74|89">74</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><button type="button" class="ab" data-frage="farbe" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="86" data-p="69|86|103">86</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><button type="button" class="ab" data-frage="farbe" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="99" data-p="79|99|119">99</data></span></td></tr><tr><th scope="row"><span class="pl__name">Strähnen in Folie</span><span class="pl__text">Oberkopf oder ganzer Kopf</span><span class="pl__dauer-k">120–150 Min.</span></th><td class="pl__dauer">120–150 Min.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><button type="button" class="ab" data-frage="farbe" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="92" data-p="74|92|110">92</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><button type="button" class="ab" data-frage="farbe" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="108" data-p="86|108|130">108</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><button type="button" class="ab" data-frage="farbe" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="126" data-p="101|126|151">126</data></span></td></tr><tr><th scope="row"><span class="pl__name">Glossing</span><span class="pl__text">Farbe auffrischen, Glanz</span><span class="pl__dauer-k">30 Min.</span></th><td class="pl__dauer">30 Min.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><data value="34" data-p="27|34|41">34</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><data value="38" data-p="30|38|46">38</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><data value="44" data-p="35|44|53">44</data></span></td></tr><tr><th scope="row"><span class="pl__name">Balayage und Farbkorrektur</span><span class="pl__text">erst Beratung, dann Angebot</span><span class="pl__dauer-k">3–4 Std.</span></th><td class="pl__dauer">3–4 Std.</td><td class="pl__p pl__p--alle" data-l="alle" colspan="3"><span class="pl__wert pl__wert--text">nur nach Beratung</span></td></tr></tbody></table></div>
<div class="panel" role="tabpanel" id="preis-pflege" aria-labelledby="tab-p-pflege" data-titel="Pflege und Kosmetik" hidden tabindex="0"><table class="pl"><caption class="sr">Pflege, Preise in Euro inkl. MwSt.</caption><thead><tr><th scope="col">Leistung</th><th scope="col" class="pl__dauer">Dauer</th><th scope="col" class="pl__p" data-l="kurz">kurz</th><th scope="col" class="pl__p" data-l="schulter">schulterlang</th><th scope="col" class="pl__p" data-l="lang">lang</th></tr></thead><tbody><tr><th scope="row"><span class="pl__name">Pflege mit Kopfmassage</span><span class="pl__text">bei jedem Termin buchbar</span><span class="pl__dauer-k">15 Min.</span></th><td class="pl__dauer">15 Min.</td><td class="pl__p pl__p--alle" data-l="alle" colspan="3"><span class="pl__wert"><data value="18" data-p="18|18|18">18</data><small>jede Länge</small></span></td></tr><tr><th scope="row"><span class="pl__name">Bond-Pflege</span><span class="pl__text">stärkt die Haarstruktur nach dem Blondieren</span><span class="pl__dauer-k">30 Min.</span></th><td class="pl__dauer">30 Min.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><data value="28" data-p="28|28|28">28</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><data value="34" data-p="34|34|34">34</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><data value="40" data-p="40|40|40">40</data></span></td></tr><tr><th scope="row"><span class="pl__name">Keratin-Glättung</span><span class="pl__text">hält etwa drei Monate</span><span class="pl__dauer-k">2½–3½ Std.</span></th><td class="pl__dauer">2½–3½ Std.</td><td class="pl__p" data-l="kurz"><span class="pl__wert"><button type="button" class="ab" data-frage="glaettung" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="160" data-p="160|160|160">160</data></span></td><td class="pl__p" data-l="schulter"><span class="pl__wert"><button type="button" class="ab" data-frage="glaettung" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="190" data-p="190|190|190">190</data></span></td><td class="pl__p" data-l="lang"><span class="pl__wert"><button type="button" class="ab" data-frage="glaettung" aria-expanded="false" aria-controls="erklaerung" aria-label="ab-Preis: wovon hängt der Endpreis ab?">ab</button> <data value="230" data-p="230|230|230">230</data></span></td></tr><tr><th scope="row"><span class="pl__name">Augenbrauen formen</span><span class="pl__text">zupfen und färben</span><span class="pl__dauer-k">20 Min.</span></th><td class="pl__dauer">20 Min.</td><td class="pl__p pl__p--alle" data-l="alle" colspan="3"><span class="pl__wert"><data value="22" data-p="22|22|22">22</data><small>jede Länge</small></span></td></tr></tbody></table></div>
      <div class="pl-fuss">
        <p class="pl-fuss__ab"><b>ab heißt: Endpreis nach Beratung.</b> Er hängt von Länge, Dichte und Farbmenge ab. Wir nennen ihn vor dem ersten Pinselstrich; die Beratung (15 Min.) ist kostenlos, wenn eine Behandlung folgt.</p>
        <p>Alle Preise in Euro inkl. MwSt. Termine bei Junior-Stylist:innen planen wir etwas länger ein.</p>
      </div>
    </div>

    <aside class="legende" id="legende" aria-labelledby="legende-titel" data-nicht="preis">
      <div class="legende__kopf"><h3 id="legende-titel">Allergene und Kennzeichnung</h3><p class="label">V vegetarisch · VG vegan</p></div>
      <dl><div><dt>A</dt><dd>Glutenhaltiges Getreide</dd></div><div><dt>B</dt><dd>Krebstiere</dd></div><div><dt>C</dt><dd>Eier</dd></div><div><dt>D</dt><dd>Fisch</dd></div><div><dt>E</dt><dd>Erdnüsse</dd></div><div><dt>F</dt><dd>Soja</dd></div><div><dt>G</dt><dd>Milch und Laktose</dd></div><div><dt>H</dt><dd>Schalenfrüchte</dd></div><div><dt>I</dt><dd>Sellerie</dd></div><div><dt>J</dt><dd>Senf</dd></div><div><dt>K</dt><dd>Sesam</dd></div><div><dt>L</dt><dd>Schwefeldioxid und Sulfite</dd></div><div><dt>M</dt><dd>Lupinen</dd></div><div><dt>N</dt><dd>Weichtiere</dd></div></dl>
      <p class="legende__fuss">Kennzeichnung der 14 Hauptallergene. Spuren anderer Allergene können wir in unserer Küche nicht ausschließen. Fragen Sie unser Team, wir geben gern Auskunft zu jeder Zutat.</p>
    </aside>
  </div>
</main>

<div id="erklaerung" class="erklaerung" popover aria-labelledby="erklaerung-titel">
  <div class="erklaerung__kopf"><div><span class="label" data-e-label>Enthält</span><b id="erklaerung-titel" data-e-gericht></b></div><button type="button" class="erklaerung__zu" popovertarget="erklaerung" popovertargetaction="hide" aria-label="Erklärung schließen">×</button></div>
  <ul data-e-liste></ul>
  <p class="erklaerung__fuss" data-e-fuss>Alle Kürzel stehen in der <a href="#legende">Legende</a> unter der Karte.</p>
</div>

<div class="pult">
  <div class="pult__gruppe" role="group" aria-label="Variante"><span>Karte</span>
    <button type="button" data-variante="bistro" aria-pressed="true">Bistro-Tafel</button>
    <button type="button" data-variante="menue" aria-pressed="false">Fine Dining</button>
    <button type="button" data-variante="preisliste" aria-pressed="false">Salon-Preise</button>
  </div>
  <div class="pult__gruppe" role="group" aria-label="Trennlinien"><span>Linien</span>
    <button type="button" data-linien="gd" aria-pressed="true">Gap Decorations</button>
    <button type="button" data-linien="rahmen" aria-pressed="false">Fallback</button>
  </div>
  <div class="pult__gruppe"><button type="button" data-druckansicht aria-pressed="false">Druckansicht</button></div>
  <p class="pult__werte" data-werte>200 ms · cubic-bezier(.16,1,.3,1) · tabular-nums</p>
</div>
<svg class="zeiger" data-zeiger viewBox="0 0 18 18" aria-hidden="true"><path d="M2 1.5 15.5 9.2l-6 1.3-2.9 5.6Z" fill="#293e3a" stroke="#f0ece0" stroke-width="1.2" stroke-linejoin="round"/></svg>

<script>
(() => {
  const html = document.documentElement;
  const reduziert = () => html.classList.contains('reduziert');
  const ALLERGENE = {"A": ["Glutenhaltiges Getreide", "Weizen, Roggen, Gerste, Hafer, Dinkel"], "B": ["Krebstiere", ""], "C": ["Eier", ""], "D": ["Fisch", ""], "E": ["Erdnüsse", ""], "F": ["Soja", ""], "G": ["Milch und Laktose", ""], "H": ["Schalenfrüchte", "Walnuss, Haselnuss, Mandel"], "I": ["Sellerie", ""], "J": ["Senf", ""], "K": ["Sesam", ""], "L": ["Schwefeldioxid und Sulfite", "auch im Wein"], "M": ["Lupinen", ""], "N": ["Weichtiere", ""]};
  const ANKER = CSS.supports('position-anchor: --a');
  const GD = CSS.supports('row-rule: 1px solid red');
  const VARIANTEN = ['bistro', 'menue', 'preisliste'];
  const q = new URLSearchParams(location.search);
  let variante = VARIANTEN.includes(q.get('v')) ? q.get('v') : 'bistro';
  let linienAus = false;

  /* ---------- Variante (?v=) ---------- */
  function setzeVariante(v, schreiben) {
    variante = v;
    html.dataset.v = v;
    document.querySelectorAll('[data-variante]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.variante === v)));
    const w = document.querySelector('[data-werte]');
    if (w) w.textContent = v === 'preisliste' ? '400 ms · cubic-bezier(.625,.05,0,1) · tabular-nums' : '200 ms · cubic-bezier(.16,1,.3,1) · tabular-nums';
    schliessen();
    if (schreiben) {
      const p = new URLSearchParams(location.search);
      p.set('v', v);
      history.replaceState(null, '', location.pathname + '?' + p.toString().replace(/=(?=&|$)/g, '') + location.hash);
    }
  }
  document.querySelectorAll('[data-variante]').forEach(b => b.addEventListener('click', () => setzeVariante(b.dataset.variante, true)));

  /* ---------- Gap Decorations oder Rahmen ---------- */
  function linien() {
    html.classList.toggle('gd', GD && !linienAus);
    document.querySelectorAll('[data-linien]').forEach(b => b.setAttribute('aria-pressed', String((b.dataset.linien === 'gd') === (GD && !linienAus))));
  }
  document.querySelectorAll('[data-linien]').forEach(b => b.addEventListener('click', () => { linienAus = b.dataset.linien === 'rahmen'; linien(); }));
  if (!GD) { const b = document.querySelector('[data-linien="gd"]'); b.disabled = true; b.title = 'Dieser Browser kennt row-rule noch nicht'; }
  linien();

  /* ---------- Tabs (APG: Pfeiltasten, Home, End) ---------- */
  document.querySelectorAll('[role="tablist"]').forEach(liste => {
    const tabs = [...liste.querySelectorAll('[role="tab"]')];
    const waehle = (tab, fokus) => {
      tabs.forEach(t => {
        const an = t === tab;
        t.setAttribute('aria-selected', String(an));
        t.tabIndex = an ? 0 : -1;
        document.getElementById(t.getAttribute('aria-controls')).hidden = !an;
      });
      if (fokus) tab.focus();
      schliessen();
      zaehlen();
    };
    liste.waehle = waehle;
    tabs.forEach((t, i) => {
      t.addEventListener('click', () => waehle(t));
      t.addEventListener('keydown', e => {
        const n = { ArrowRight: 1, ArrowLeft: -1 }[e.key];
        if (e.key === 'Home') { e.preventDefault(); waehle(tabs[0], true); }
        else if (e.key === 'End') { e.preventDefault(); waehle(tabs.at(-1), true); }
        else if (n) { e.preventDefault(); waehle(tabs[(i + n + tabs.length) % tabs.length], true); }
      });
    });
  });

  /* ---------- Erklärung der Kürzel (ein Popover, verankert am Knopf) ---------- */
  const pop = document.getElementById('erklaerung');
  const popTitel = pop.querySelector('[data-e-gericht]');
  const popListe = pop.querySelector('[data-e-liste]');
  let aktiv = null;
  const popLabel = pop.querySelector('[data-e-label]'), popFuss = pop.querySelector('[data-e-fuss]'), fussKz = popFuss.innerHTML;
  /* Preisliste: ab-Preise erklären, wovon der Endpreis abhängt */
  const FRAGEN = {
    farbe: ['Farbe', [['Länge', 'Mehr Haar braucht mehr Farbe und mehr Zeit.'], ['Dichte', 'Dichtes Haar braucht oft eine zweite Tube.'], ['Ausgangsfarbe', 'Von dunkel nach hell dauert länger als einen Ton dunkler.']]],
    styling: ['Hochstecken', [['Frisur', 'Locken und Flechten dauern länger als ein Dutt.'], ['Länge', 'Ab Schulterlänge planen wir mehr Zeit ein.'], ['Probetermin', 'Wird angerechnet, wenn Sie den Termin bei uns buchen.']]],
    glaettung: ['Keratin-Glättung', [['Länge und Dichte', 'Bestimmen Menge und Einwirkzeit.'], ['Vorbehandlung', 'Blondiertes Haar braucht vorher Bond-Pflege.']]],
  };
  function lageOhneAnker(knopf) {
    const r = knopf.getBoundingClientRect(), w = pop.offsetWidth, h = pop.offsetHeight;
    const unten = r.bottom + 8 + h < innerHeight;
    pop.style.left = Math.max(12, Math.min(innerWidth - w - 12, r.right - w)) + 'px';
    pop.style.top = (unten ? r.bottom + 8 : Math.max(12, r.top - 8 - h)) + 'px';
  }
  function oeffnen(knopf) {
    if (aktiv) aktiv.setAttribute('aria-expanded', 'false');
    aktiv = knopf;
    knopf.setAttribute('aria-expanded', 'true');      // trägt anchor-name: --kz
    if (knopf.classList.contains('ab')) {
      const [titel, punkte] = FRAGEN[knopf.dataset.frage];
      popLabel.textContent = 'ab-Preis · wovon er abhängt';
      popTitel.textContent = titel;
      popListe.replaceChildren(...punkte.map(([name, detail], n) => {
        const li = document.createElement('li');
        li.innerHTML = `<b>${n + 1}</b><span>${name}<small>${detail}</small></span>`;
        return li;
      }));
      popFuss.textContent = 'Endpreis nach Beratung: Wir nennen ihn, bevor wir anfangen.';
    } else {
      popLabel.textContent = 'Enthält';
      popFuss.innerHTML = fussKz;
      popTitel.textContent = knopf.dataset.gericht;
      popListe.replaceChildren(...knopf.dataset.kz.split(' ').map(k => {
        const li = document.createElement('li');
        const [name, detail] = ALLERGENE[k];
        li.innerHTML = `<b>${k}</b><span>${name}${detail ? `<small>${detail}</small>` : ''}</span>`;
        return li;
      }));
    }
    if (pop.matches(':popover-open')) pop.hidePopover();
    try { pop.showPopover({ source: knopf }); } catch (e) { pop.showPopover(); }
    if (!ANKER) { pop.classList.add('ohne-anker'); lageOhneAnker(knopf); }
  }
  function schliessen() { if (pop.matches(':popover-open')) pop.hidePopover(); }
  pop.addEventListener('toggle', e => {
    if (e.newState === 'closed' && aktiv) { aktiv.setAttribute('aria-expanded', 'false'); aktiv = null; }
  });
  document.addEventListener('click', e => {
    const knopf = e.target.closest('.kz, .ab');
    if (!knopf) return;
    if (aktiv === knopf && pop.matches(':popover-open')) schliessen(); else oeffnen(knopf);
  });
  addEventListener('resize', () => { if (aktiv && !ANKER) lageOhneAnker(aktiv); });

  /* ---------- Filter: vegetarisch, ohne Gluten, ohne Milch ---------- */
  const chips = [...document.querySelectorAll('[data-filter]')];
  const treffer = document.querySelector('[data-treffer]');
  const bistroTabs = [...document.querySelectorAll('[data-nur="bistro"] [role="tab"]')];
  function passt(g, an) {
    const kz = g.dataset.kz.split(' '), z = g.dataset.z;
    return an.every(f => f === 'v' ? (z === 'v' || z === 'vg') : !kz.includes(f));
  }
  function zaehlen() {
    const an = chips.filter(c => c.getAttribute('aria-pressed') === 'true').map(c => c.dataset.filter);
    bistroTabs.forEach(t => {
      const panel = document.getElementById(t.getAttribute('aria-controls'));
      const alle = [...panel.querySelectorAll('.g')];
      let n = 0;
      alle.forEach(g => { const ja = passt(g, an); g.hidden = !ja; if (ja) n++; });
      panel.querySelectorAll('.rubrik').forEach(r => { r.querySelector('.rubrik__leer').hidden = !!r.querySelector('.g:not([hidden])'); });
      t.querySelector('.tab__zahl').textContent = an.length ? n : '';
      if (t.getAttribute('aria-selected') === 'true') {
        const wort = t.querySelector('.tab__titel').textContent;
        treffer.innerHTML = an.length
          ? (n ? `<b>${n}</b> von ${alle.length} Gerichten passen · ${wort} · <button type="button" data-zuruecksetzen>zurücksetzen</button>`
               : `Nichts passt · ${wort} · <button type="button" data-zuruecksetzen>zurücksetzen</button>`)
          : `${alle.length} Gerichte · ${wort}`;
      }
    });
  }
  chips.forEach(c => c.addEventListener('click', () => { c.setAttribute('aria-pressed', String(c.getAttribute('aria-pressed') !== 'true')); schliessen(); zaehlen(); }));
  treffer.addEventListener('click', e => { if (e.target.closest('[data-zuruecksetzen]')) { chips.forEach(c => c.setAttribute('aria-pressed', 'false')); zaehlen(); chips[0].focus(); } });
  zaehlen();

  /* ---------- Preisliste: Stufe (bei wem) und Haarlänge ---------- */
  const STUFEN = ['junior', 'stylist', 'master'];
  const STUFE_INFO = {
    junior: 'Junior: im ersten Jahr nach der Gesellenprüfung. Wir planen etwas mehr Zeit ein.',
    stylist: 'Stylist: mindestens drei Jahre bei uns, alle Schnitte und Farben.',
    master: 'Master: Friseurmeisterin, für Farbkorrektur und schwierige Schnitte.',
  };
  const karteEl = document.querySelector('.karte');
  const stufeInfo = document.querySelector('[data-stufe-info]');
  let stufe = 'stylist', laenge = 'schulter';
  function setzeStufe(st, zeigen) {
    stufe = st;
    document.querySelectorAll('[data-stufe]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.stufe === st)));
    stufeInfo.textContent = STUFE_INFO[st];
    const i = STUFEN.indexOf(st);
    document.querySelectorAll('.preisliste data[data-p]').forEach(d => {
      const v = +d.dataset.p.split('|')[i], alt = d.textContent;
      d.value = String(v);
      d.textContent = v ? String(v) : '–';
      d.title = v ? '' : 'nicht bei Junior';
      d.setAttribute('aria-label', v ? '' : 'nicht bei Junior');
      if (!v) d.removeAttribute('value');
      if (!d.getAttribute('aria-label')) d.removeAttribute('aria-label');
      if (zeigen && alt !== d.textContent && !reduziert()) { const w = d.closest('.pl__wert'); w.classList.remove('neu'); void w.offsetWidth; w.classList.add('neu'); }
    });
  }
  function setzeLaenge(l) {
    laenge = l;
    karteEl.dataset.laenge = l;
    document.querySelectorAll('[data-laenge]:not(.karte)').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.laenge === l)));
  }
  document.querySelectorAll('button[data-stufe]').forEach(b => b.addEventListener('click', () => { schliessen(); setzeStufe(b.dataset.stufe, true); }));
  document.querySelectorAll('button[data-laenge]').forEach(b => b.addEventListener('click', () => { schliessen(); setzeLaenge(b.dataset.laenge); }));
  setzeStufe('stylist', false); setzeLaenge('schulter');

  /* ---------- Druck ---------- */
  document.querySelector('[data-drucken]').addEventListener('click', () => { schliessen(); window.print(); });
  const druckKnopf = document.querySelector('[data-druckansicht]');
  druckKnopf.addEventListener('click', () => {
    const an = !html.classList.contains('druckblatt');
    html.classList.toggle('druckblatt', an);
    druckKnopf.setAttribute('aria-pressed', String(an));
    schliessen();
  });

  setzeVariante(variante, false);

  /* ---------- Vorführung: gedachter Zeiger bedient Tabs, Kürzel und Filter ---------- */
  const zeiger = document.querySelector('[data-zeiger]');
  const $ = s => document.querySelector(s);
  const mitte = el => { const r = el.getBoundingClientRect(); return { x: r.left + r.width * .5, y: r.top + r.height * .55 }; };
  const sichtbarerKz = (panel, n) => [...document.querySelectorAll(panel + ' .g:not([hidden]) .kz, ' + panel + ' .gang .kz')][n];
  const leer = () => ({ x: innerWidth * .62, y: innerHeight * .28 });
  const PLAENE = {
    bistro: [
      [700, () => $('#tab-abend'), 'klick'],
      [2100, () => sichtbarerKz('#karte-abend', 4), 'klick'],
      [4300, leer, 'klick-leer'],
      [5200, () => $('[data-filter="A"]'), 'klick'],
      [6400, () => $('[data-filter="v"]'), 'klick'],
      [7900, () => $('#tab-getraenke'), 'klick'],
      [9100, () => $('#tab-mittag'), 'klick'],
      [10200, () => $('[data-filter="A"]'), 'klick'],
      [11000, () => $('[data-filter="v"]'), 'klick'],
      [12000, leer],
    ],
    menue: [
      [700, () => sichtbarerKz('#menue-herbst', 1), 'klick'],
      [2900, leer, 'klick-leer'],
      [3700, () => $('#tab-m-pflanzlich'), 'klick'],
      [5000, () => sichtbarerKz('#menue-pflanzlich', 3), 'klick'],
      [7100, () => $('#tab-m-begleitung'), 'klick'],
      [8700, () => $('#tab-m-herbst'), 'klick'],
      [10000, leer],
    ],
    preisliste: [
      [700, () => $('[data-stufe="master"]'), 'klick'],
      [2000, () => $('[data-laenge="lang"]'), 'klick'],
      [3400, () => $('#tab-p-farbe'), 'klick'],
      [4700, () => [...document.querySelectorAll('#preis-farbe .ab')].filter(b => b.offsetParent)[1], 'klick'],
      [7000, leer, 'klick-leer'],
      [7900, () => $('[data-stufe="junior"]'), 'klick'],
      [9200, () => $('#tab-p-herren'), 'klick'],
      [10700, () => $('#tab-p-damen'), 'klick'],
      [11900, () => $('[data-laenge="schulter"]'), 'klick'],
      [13000, () => $('[data-stufe="stylist"]'), 'klick'],
      [14000, leer],
    ],
  };
  const RUNDE = { bistro: 12800, menue: 10800, preisliste: 14800 }, WEG = 560;
  let uhr = null, t0 = 0, angehalten = 0, schritt = -1, pos = { x: 0, y: 0 }, von = { x: 0, y: 0 }, erledigt = new Set(), letzteRunde = 0;
  const sanft = p => p < .5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
  const punkt = f => { const v = f(); return v instanceof Element ? mitte(v) : v || leer(); };
  function rahmen(t) {
    const plan = PLAENE[variante], runde = RUNDE[variante];
    const r = Math.floor((t - t0) / runde), zeit = (t - t0) % runde;
    if (r !== letzteRunde) { letzteRunde = r; schritt = -1; erledigt.clear(); grundzustand(); }
    let i = -1; plan.forEach((p, k) => { if (zeit >= p[0] - WEG) i = k; });
    if (i >= 0) {
      const [ankunft, ziel, aktion] = plan[i];
      if (i !== schritt) { schritt = i; von = { ...pos }; }
      const p = Math.min(1, Math.max(0, (zeit - (ankunft - WEG)) / WEG));
      const z = punkt(ziel);
      pos = { x: von.x + (z.x - von.x) * sanft(p), y: von.y + (z.y - von.y) * sanft(p) };
      if (p >= 1 && aktion && !erledigt.has(i)) {
        erledigt.add(i);
        zeiger.classList.add('drueckt'); setTimeout(() => zeiger.classList.remove('drueckt'), 160);
        if (aktion === 'klick') { const el = ziel(); if (el) el.click(); }
        else schliessen();
      }
    }
    zeiger.style.transform = `translate(${pos.x - 2}px, ${pos.y - 1}px)`;
    uhr = requestAnimationFrame(rahmen);
  }
  function grundzustand() {
    schliessen();
    chips.forEach(c => c.setAttribute('aria-pressed', 'false'));
    document.querySelectorAll('[role="tablist"]').forEach(l => l.waehle(l.querySelector('[role="tab"]')));
    zaehlen();
    setzeStufe('stylist', false); setzeLaenge('schulter');
  }
  function vorfuehren() {
    pause(); grundzustand();
    html.classList.add('vorfuehrung');
    pos = leer(); von = { ...pos }; schritt = -1; erledigt.clear(); letzteRunde = 0;
    t0 = performance.now();
    uhr = requestAnimationFrame(rahmen);
  }
  function pause() { if (uhr) angehalten = performance.now() - t0; cancelAnimationFrame(uhr); uhr = null; }
  function weiter() { if (uhr || !html.classList.contains('vorfuehrung')) return; t0 = performance.now() - angehalten; uhr = requestAnimationFrame(rahmen); }
  function neustart() { pause(); html.classList.remove('vorfuehrung'); grundzustand(); }

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