/* Umi Sake Haus Bamberg. Look and Feel nach Entwurf 04 „Papier & Tusche“ (vom Inhaber am 30.09.2026 gewählt):
   Reispapier, Tuschezeichnungen, rote Stempel, Newsreader mit Source Sans 3, dunkelgrüne Knöpfe und Flächen.
   Die Zeichen 海酒 stammen von ihrer Karte 2026 und stehen dort in einer schlichten Gothic, darum die Teilmenge
   aus Noto Sans CJK (schriften/umi-zeichen.woff2). */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("schriften/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("schriften/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("schriften/newsreader-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("schriften/newsreader-kursiv-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("schriften/source-sans-3-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("schriften/source-sans-3-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("schriften/source-sans-3-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Umi Zeichen"; font-weight: 400; font-display: swap; src: url("schriften/umi-zeichen.woff2") format("woff2"); }

:root {
  /* Kein Umfärben durch den Browser (wie Patcharawadee, 01.10.2026): „only light“ ist die Abmeldung für den automatischen
     Dunkelmodus von Chrome. Ohne sie wurde die Schrift im erzwungenen Dunkelmodus hell auf hellem Papier (03.10.2026). */
  color-scheme: light; color-scheme: only light;
  --papier: #ece6da; --papier-dunkel: #e2dbcd; --papier-hell: #f3eee4; --tinte: #1e1d1a; --text: #3b3934; --leise: #6b665c;
  --gruen: #2f3b2d; --gruen-hell: #3e4d3b; --gruen-tief: #263024; --rot: #c1392b; --rot-dunkel: #9f2d22; --linie: #cfc6b5;
  --kachel: rgba(255, 255, 255, .28); --kachel-rand: rgba(207, 198, 181, .8);
  --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --zeichen: "Umi Zeichen", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", sans-serif;
  --innen: 1200px;
}
/* Auch wer am Gerät den Dunkelmodus eingestellt hat, bekommt das helle Papier. Manche Browser (Samsung Internet)
   verzichten erst dann aufs eigene Umfärben, wenn die Seite auf prefers-color-scheme eingeht. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; color-scheme: only light; }
  html, body { background-color: var(--papier); color: var(--text); }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--text); font: 400 17px/1.55 var(--serif); background: var(--papier) url("bilder/tusche/papier.webp") center top / 900px auto repeat; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; word-break: keep-all; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); color: var(--tinte); margin: 0; font-weight: 500; letter-spacing: -.015em; line-height: 1.06; text-wrap: balance; }
h1 em, h2 em { display: block; font-style: normal; }
p { margin: 0; }
.innen { width: min(var(--innen), 100% - 96px); margin-inline: auto; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.klein { font: 400 .86rem/1.5 var(--sans); }
.leise { color: var(--leise); }
.etikett { font: 500 .78rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); margin: 0 0 14px; }
.hinweis { font: 500 .72rem/1.65 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.tuschebild { mix-blend-mode: multiply; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* Knöpfe: grün wie im Entwurf, Rand in Tinte, hell auf grünem Grund */
.knopf { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 26px; background: var(--gruen); color: #f4efe5; text-decoration: none; font: 500 1.02rem/1.2 var(--serif); border: 1px solid var(--gruen); border-radius: 2px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.knopf:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); }
.knopf svg { width: 18px; height: 18px; flex: none; }
.knopf--rand { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf--rand:hover { background: rgba(30, 29, 26, .06); border-color: var(--tinte); }
.knopf--hell { background: #f4efe5; color: var(--gruen); border-color: #f4efe5; }
.knopf--hell:hover { background: #fff; border-color: #fff; }
.knopf.laedt { opacity: .7; cursor: progress; }

/* Stempel und senkrechte Zeichen */
.stempel { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--rot); color: var(--rot); font: 400 2rem/1 var(--zeichen); padding: 8px 6px; letter-spacing: .06em; background: transparent; }
.stempel--senkrecht { writing-mode: vertical-rl; }
.stempel--klein { font-size: 1.3rem; padding: 5px 4px; border-width: 1.5px; }
.senkrecht { writing-mode: vertical-rl; font: 400 2rem/1 var(--zeichen); color: var(--tinte); letter-spacing: .35em; margin: 0; }
.kreis { position: absolute; pointer-events: none; mix-blend-mode: multiply; }
.zeichen { font-family: var(--zeichen); letter-spacing: .12em; text-transform: none; }

/* Kopf: am Anfang halb durchsichtig, beim Scrollen fest mit Papiergrund */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(236, 230, 218, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(207, 198, 181, .55); transition: background .25s, box-shadow .25s; }
.kopf .innen { display: flex; align-items: center; gap: 44px; min-height: 92px; padding-block: 10px; transition: min-height .25s; }
.kopf--fest { background: rgba(236, 230, 218, .97); box-shadow: 0 12px 30px -22px rgba(30, 29, 26, .55); }
.kopf--fest .innen { min-height: 74px; }
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinte); margin-right: auto; min-width: 0; }
.marke img { width: 46px; height: auto; flex: none; }
.marke__name { display: block; font: 600 1.85rem/1.02 var(--serif); letter-spacing: -.03em; white-space: nowrap; }
.marke__zusatz { display: block; margin-top: 6px; font: 500 .64rem var(--sans); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.kopf nav { display: flex; gap: 38px; font-size: .98rem; }
.kopf nav a { text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { border-bottom-color: var(--rot); }
.kopf .knopf { min-height: 48px; padding: 0 22px; }
/* Hinweise aus dem Admin-Bereich (03.10.2026): rote Leiste oben im Kopf, der Inhalt rückt um ihre Höhe nach unten */
body { padding-top: var(--hinweis, 0px); }
.hinweisleiste { background: var(--rot); color: #fff; text-align: center; padding: 9px 18px; font: 500 .95rem/1.4 var(--sans); }
.hinweisleiste p { margin: 0 auto; max-width: 900px; }
.hinweisleiste p + p { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .35); }
.hinweisleiste strong { font-weight: 700; }
/* Sprachwahl DE | EN (03.10.2026): in der Leiste ab Tablet, am Handy im aufgeklappten Menü */
/* Sprachwahl als Dropdown (03.10.2026): oben in der Leiste „DE“ mit Weltkugel, am Handy im aufgeklappten Menü */
.sprachwahl { position: relative; flex: none; font-family: var(--sans); }
.sprachwahl summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 1px solid var(--linie); border-radius: 2px; color: var(--tinte); font: 600 .76rem/1 var(--sans); letter-spacing: .12em; cursor: pointer; user-select: none; -webkit-user-select: none; }
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover, .sprachwahl[open] summary { border-color: var(--tinte); }
.sprachwahl summary:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.sprachwahl summary > svg { width: 15px; height: 15px; flex: none; }
.sprachwahl summary .sprachwahl__pfeil { width: 10px; height: 10px; transition: transform .15s; }
.sprachwahl[open] summary .sprachwahl__pfeil { transform: rotate(180deg); }
.sprachwahl__lang { display: none; }
.sprachwahl__liste { list-style: none; margin: 0; padding: 6px; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 172px; background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 2px; box-shadow: 0 16px 32px -18px rgba(30, 29, 26, .5); }
.sprachwahl__eintrag { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; font: 500 .95rem/1.2 var(--sans); letter-spacing: 0; color: var(--tinte); text-decoration: none; border-radius: 2px; }
a.sprachwahl__eintrag:hover, a.sprachwahl__eintrag:focus-visible { background: var(--papier-dunkel); outline: none; }
span.sprachwahl__eintrag { color: var(--leise); }
.sprachwahl__eintrag svg { width: 15px; height: 15px; flex: none; color: var(--rot); }
.sprachwahl--kopf { margin-left: -18px; }
.kopf nav .sprachwahl--menue { display: none; }
.kopf__menue { display: none; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--tinte); border-radius: 2px; background: transparent; color: var(--tinte); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.kopf__menue span { display: block; width: 18px; height: 1.6px; background: currentColor; transition: transform .2s, opacity .2s; }
.kopf--offen .kopf__menue span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.kopf--offen .kopf__menue span:nth-child(2) { opacity: 0; }
.kopf--offen .kopf__menue span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Bühne der Startseite: links Papier mit Tuschesonne und senkrechtem 海酒, rechts ihr Gastraum */
.buehne { position: relative; display: grid; grid-template-columns: 48% 52%; min-height: 720px; }
.buehne__links { position: relative; display: flex; align-items: center; padding: 150px 56px 72px max(96px, calc((100vw - var(--innen)) / 2 + 60px)); }
.buehne .kreis { left: min(-64px, calc(max(96px, (100vw - var(--innen)) / 2 + 60px) - 236px)); top: 104px; width: 220px; opacity: .92; }
.buehne__zeichen { position: absolute; left: 44px; top: 344px; }
.buehne__text { position: relative; z-index: 2; }
.buehne h1 { margin: 0 0 24px; font-size: clamp(2.9rem, 4.6vw, 4.6rem); line-height: 1.04; }
.buehne h1 em { color: var(--text); font-weight: 400; }
.buehne__text > p:not(.etikett) { font-size: 1.22rem; line-height: 1.55; margin: 0 0 36px; max-width: 34ch; }
.buehne__bild { position: relative; background: #1b1611; min-height: 720px; overflow: hidden; }
.buehne__bild picture, .buehne__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.buehne__bild::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 1; background: linear-gradient(0deg, rgba(20, 16, 12, .72), rgba(20, 16, 12, 0)); pointer-events: none; }
.buehne__bild .hinweis { position: absolute; z-index: 2; left: 40px; bottom: 36px; color: #efe8dc; max-width: 240px; }
.buehne__bild .stempel { position: absolute; z-index: 2; right: 34px; bottom: 30px; background: rgba(20, 16, 12, .35); color: #f6d3cc; border-color: #e0685a; }

/* Abschnitte auf Papier */
.abschnitt { padding: clamp(64px, 8vw, 96px) 0; }
.abschnitt--linie { border-top: 1px solid var(--linie); }
.abschnitt--dunkel { background: rgba(226, 219, 205, .5); }
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 36px; }
.kopfzeile h2 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.02; }
.kopfzeile > p { max-width: 44ch; color: var(--text); }

/* Drei Häuser */
.haeuser__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.haus { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--kachel); border: 1px solid var(--kachel-rand); padding: 30px 28px 28px; }
.haus .etikett { margin: 0; }
.haus h3 { font-size: 1.8rem; margin: 0 0 4px; }
.haus__adresse, .haus__tel, .haus__mail { display: flex; gap: 10px; align-items: flex-start; font-size: 1.02rem; color: var(--tinte); }
.haus__adresse svg, .haus__tel svg, .haus__mail svg { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--rot); }
.haus__tel a, .haus__mail a { text-decoration: none; border-bottom: 1px solid transparent; }
.haus__tel a:hover, .haus__mail a:hover { border-bottom-color: currentColor; }
.haus__hinweis { font-size: .95rem; color: var(--leise); }
.haus__hinweis a { color: var(--tinte); }
.haus__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
.haus__knoepfe .knopf { min-height: 46px; padding: 0 18px; font-size: .96rem; }
.haus__route { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; font: 500 .72rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--leise); border-bottom: 1px solid var(--linie); padding-bottom: 2px; }
.haus__route:hover { color: var(--tinte); border-bottom-color: var(--tinte); }
.haus__route svg { width: 14px; height: 14px; }
.haus .stempel { position: absolute; top: 22px; right: 22px; }
.zeiten { width: 100%; border-collapse: collapse; margin: 8px 0 2px; font-size: 1rem; color: var(--tinte); }
.zeiten th, .zeiten td { text-align: left; vertical-align: top; padding: 8px 0; border-top: 1px solid var(--linie); }
.zeiten th { font-weight: 500; padding-right: 14px; width: 44%; }
.zeiten td { color: var(--text); }
.zeiten .zeit { display: block; white-space: nowrap; }
.heute { display: none; margin-left: 8px; font: 600 .6rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); border: 1px solid var(--rot); padding: 3px 5px 2px; vertical-align: 2px; }
.ist-heute .heute { display: inline-block; }
.ist-heute th, .ist-heute td { color: var(--rot); }

/* Willkommen: Text und gerahmtes Foto mit Stempel */
.willkommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.willkommen__text { display: flex; flex-direction: column; gap: 18px; }
.willkommen h2 { font-size: clamp(2.6rem, 4.4vw, 3.9rem); margin-bottom: 4px; }
.willkommen h3 { font-size: 1.5rem; margin-top: 8px; }
.willkommen p:not(.etikett):not(.hinweis) { font-size: 1.1rem; line-height: 1.6; max-width: 52ch; }
.willkommen .knopf { align-self: flex-start; margin-top: 10px; }
.willkommen--gedreht .willkommen__bild { order: -1; }
.rahmen { position: relative; background: var(--papier-hell); border: 1px solid var(--kachel-rand); padding: 14px; box-shadow: 0 30px 50px -40px rgba(30, 29, 26, .6); }
.rahmen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.rahmen--quer img { aspect-ratio: 4 / 3; }
.rahmen .stempel { position: absolute; right: -16px; bottom: 34px; background: var(--papier); }
.rahmen .hinweis { margin-top: 12px; }

/* Beliebte Gerichte: Kacheln wie im Entwurf */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.kachel { background: var(--kachel); border: 1px solid var(--kachel-rand); }
.kachel__bild { aspect-ratio: 1 / 1; overflow: hidden; background: #1b1611; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.kachel:hover .kachel__bild img { transform: scale(1.03); }
.kachel h3 { font-size: 1.3rem; font-weight: 600; margin: 22px 20px 10px; }
.kachel p { margin: 0 20px 26px; color: var(--leise); font-size: .98rem; line-height: 1.5; }
.gerichte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 36px; }
.gerichte__fuss .klein { flex-basis: 100%; color: var(--leise); }

/* Zutaten: grüne Fläche und Tuschezeichnungen */
.zutaten { display: grid; grid-template-columns: minmax(340px, 42%) 1fr; min-height: 560px; }
.zutaten__gruen { background: var(--gruen); color: #ece6da; display: flex; flex-direction: column; justify-content: center; padding: 72px 60px 72px max(96px, calc((100vw - var(--innen)) / 2)); }
.zutaten__gruen .etikett { color: #c9c3b5; }
.zutaten__gruen h2 { color: #f4efe5; font-size: clamp(2.6rem, 3.8vw, 3.6rem); margin-bottom: 26px; }
.zutaten__gruen p:not(.etikett) { margin: 0 0 18px; font-size: 1.1rem; line-height: 1.6; color: #dcd5c7; max-width: 44ch; }
/* Aufforderungen nur als Knopf, nie als unterstrichener Verweis mit Pfeil (Trung, 01.10.2026) */
.zutaten__gruen .knopf { align-self: flex-start; margin-top: 12px; }
.kopfzeile .knopf, .reservieren-teaser__text .knopf { flex: none; }
.zutaten__zeichnungen { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; align-content: center; align-items: start; padding: 48px max(96px, calc((100vw - var(--innen)) / 2 + 70px)) 48px 40px; }
.zutat { text-align: center; padding: 10px 6px; }
.zutat img { width: 100%; max-width: 170px; margin: 0 auto 6px; aspect-ratio: 1; object-fit: contain; }
.zutat strong { display: block; font: 500 1.12rem var(--serif); color: var(--tinte); }
.zutat span { display: block; font: 500 .66rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--leise); }
.zutaten__zeichnungen .stempel { position: absolute; right: max(24px, calc((100vw - var(--innen)) / 2 - 30px)); top: 26px; }

/* Bestellen und abholen: Telefon, Bambus und Tuschesonne */
.bestellung { position: relative; display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: center; min-height: 500px; padding: 48px 0; overflow: hidden; }
.bestellung__bild { position: relative; height: 100%; min-height: 400px; }
.bestellung__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bestellung__bild .kreis { inset: auto; width: 160px; height: auto; opacity: .95; }
.bestellung__bild img:not(.kreis) { z-index: 1; }
.bestellung__links .kreis { left: 14%; top: 30%; width: 170px; }
.bestellung__rechts .kreis { right: 16%; bottom: 14%; width: 120px; z-index: 2; }
.bestellung__links .hinweis { position: absolute; left: 14%; bottom: 10%; }
.bestellung__mitte { text-align: center; position: relative; z-index: 2; padding: 0 12px; }
.bestellung h2 { font-size: clamp(2.6rem, 4vw, 3.9rem); margin-bottom: 20px; }
.bestellung__mitte > p:not(.etikett) { margin: 0 auto 26px; max-width: 42ch; font-size: 1.06rem; }
.bestellung .knoepfe { justify-content: center; }
.nummern { list-style: none; margin: 30px auto 0; padding: 0; display: inline-grid; grid-template-columns: auto auto; gap: 8px 16px; align-items: baseline; text-align: left; }
.nummern li { display: contents; }
.nummern span { font: 500 .7rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); text-align: right; }
.nummern a { display: inline-flex; align-items: center; gap: 10px; color: var(--rot); font: 500 clamp(1.4rem, 2.1vw, 1.8rem)/1.1 var(--serif); text-decoration: none; }
.nummern a svg { width: 20px; height: 20px; }
.nummern a:hover { color: var(--rot-dunkel); }

/* Reservierung auf der Startseite */
.reservieren-teaser__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 72px; align-items: start; }
.reservieren-teaser h2 { font-size: clamp(2.6rem, 4vw, 3.9rem); margin-bottom: 22px; }
.reservieren-teaser__text > p:not(.etikett) { font-size: 1.1rem; line-height: 1.6; margin-bottom: 28px; max-width: 42ch; }
.karte-kasten { background: var(--kachel); border: 1px solid var(--kachel-rand); padding: 34px 34px 30px; display: grid; gap: 22px; }
.karte-kasten h3 { font-size: 1.55rem; }
.karte-kasten > div { display: grid; gap: 12px; }
.karte-kasten > div + div { padding-top: 22px; border-top: 1px solid var(--linie); }
.karte-kasten p { color: var(--text); }
.karte-kasten .knopf { justify-self: start; }

/* Abschluss: Bambus, Satz, Stempel */
.abschluss { position: relative; border-top: 1px solid var(--linie); overflow: hidden; }
.abschluss__raster { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 64px 0; }
.abschluss__bambus { width: 220px; height: auto; }
.abschluss h2 { font-size: clamp(2.5rem, 4.2vw, 3.8rem); margin-bottom: 16px; }
.abschluss__text > p:not(.etikett) { font-size: 1.1rem; margin-bottom: 26px; max-width: 46ch; }
.abschluss .stempel { font-size: 2.6rem; padding: 12px 8px; }

/* Seitenkopf der Unterseiten */
.seitenkopf { position: relative; padding: 158px 0 64px; overflow: hidden; }
.seitenkopf .kreis { right: -70px; top: 104px; width: 200px; opacity: .9; }
.seitenkopf__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.seitenkopf h1 { font-size: clamp(2.8rem, 5vw, 4.5rem); margin: 0 0 22px; }
.seitenkopf h1 em { color: var(--text); font-weight: 400; }
.seitenkopf__text > p:not(.etikett) { font-size: 1.14rem; line-height: 1.6; max-width: 50ch; }
.seitenkopf .knoepfe { margin-top: 30px; }
.seitenkopf__bild .rahmen img { aspect-ratio: 4 / 3; max-height: 440px; }
.seitenkopf--karte .seitenkopf__bild { justify-self: center; width: min(100%, 340px); }
.seitenkopf--karte .rahmen { transform: rotate(1.5deg); }
.seitenkopf--karte .rahmen img { aspect-ratio: auto; max-height: none; }
.seitenkopf--schlicht { padding-bottom: 40px; }
.seitenkopf--schlicht .seitenkopf__raster { grid-template-columns: 1fr; }

/* Speisekarte: Hauswechsel, Abschnitte, Suche */
.hauswechsel .innen { display: flex; gap: 10px; overflow-x: auto; padding: 0 0 18px; scrollbar-width: none; }
.hauswechsel a { flex: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--tinte); border-radius: 2px; color: var(--tinte); text-decoration: none; font: 500 1rem var(--serif); }
.hauswechsel a svg { width: 13px; height: 13px; }
.hauswechsel a:hover { background: rgba(30, 29, 26, .06); }
.hauswechsel a[aria-current="page"] { background: var(--gruen); border-color: var(--gruen); color: #f4efe5; }
.chips { position: sticky; top: calc(var(--kopf, 74px) - 1px); z-index: 20; background: rgba(236, 230, 218, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.chips .innen { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.chips__reihe { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.chips__reihe a { flex: none; text-decoration: none; font: 500 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 2px; color: var(--tinte); background: rgba(255, 255, 255, .25); }
.chips__reihe a:hover { border-color: var(--rot); color: var(--rot); }
.suche { flex: none; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--tinte); color: var(--leise); padding: 0 2px; }
.suche svg { width: 16px; height: 16px; flex: none; }
.suche input { border: 0; outline: 0; background: transparent; font: 400 1rem var(--serif); padding: 9px 0; width: 230px; color: var(--tinte); }
.suche:focus-within { border-bottom: 2px solid var(--rot); }
.karte { padding: 26px 0 96px; }
.karte-abschnitt { padding: 44px 0 6px; scroll-margin-top: calc(var(--kopf, 74px) + 76px); }
.karte-abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--tinte); }
.karte-abschnitt__kopf h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
.karte-abschnitt__zusatz { font: italic 400 1.25rem var(--serif); color: var(--rot); }
.karte-abschnitt__zahl { margin-left: auto; font: 500 .7rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); }
.abschnitt__info { margin: 14px 0 0; color: var(--leise); font-size: 1rem; max-width: 80ch; }
.karte-abschnitt__inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 10px; }
.karte-abschnitt--foto .karte-abschnitt__inhalt { grid-template-columns: minmax(0, 1fr) 300px; }
.posten-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.karte-abschnitt--foto .posten-liste { grid-template-columns: minmax(0, 1fr); }
.posten { padding: 15px 0; border-bottom: 1px solid var(--linie); }
.posten__kopf { display: grid; grid-template-columns: 3.1em minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.posten__nr { font: 600 .72rem/1 var(--sans); letter-spacing: .08em; color: var(--rot); font-variant-numeric: tabular-nums; }
.posten__name { font: 500 1.16rem/1.3 var(--serif); color: var(--tinte); display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.posten__preis { font: 500 1.08rem var(--serif); color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.posten__text { margin: 4px 0 0 calc(3.1em + 10px); color: var(--leise); font-size: .96rem; line-height: 1.45; }
.posten__codes { margin: 7px 0 0 calc(3.1em + 10px); display: flex; flex-wrap: wrap; gap: 4px; }
.abschnitt__info .posten__codes { display: inline-flex; margin: 0 0 0 6px; vertical-align: 1px; }
.posten__codes abbr { text-decoration: none; font: 600 .66rem/1.5 var(--sans); color: var(--leise); border: 1px solid var(--linie); padding: 0 5px; cursor: help; }
.merkmal { display: inline-flex; align-items: center; gap: 4px; font: 600 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 4px 6px 3px 5px; border: 1px solid currentColor; }
.merkmal svg { width: 11px; height: 11px; }
.merkmal--vegan, .merkmal--veggie { color: var(--gruen-hell); }
.merkmal--scharf { color: var(--rot); }
.abschnitt__foto { margin: 18px 0 0; position: sticky; top: calc(var(--kopf, 74px) + 84px); align-self: start; background: var(--papier-hell); border: 1px solid var(--kachel-rand); padding: 10px; }
.abschnitt__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.abschnitt__foto figcaption { margin-top: 8px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.versteckt-suche { display: none !important; }
.nichts { display: none; padding: 40px 0; color: var(--leise); font-size: 1.1rem; }
.legende { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 64px; padding: 34px 36px; background: var(--kachel); border: 1px solid var(--kachel-rand); }
.legende h3 { font-size: 1.45rem; margin-bottom: 14px; }
.legende ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: .96rem; }
.legende li b { display: inline-block; width: 1.5em; color: var(--rot); font-family: var(--sans); font-weight: 600; }
.legende p { color: var(--leise); font-size: .98rem; }
.bestell-zeile { margin-top: 20px !important; }

/* Speisekarten-Übersicht */
.wahlkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wahlkarte { background: var(--kachel); border: 1px solid var(--kachel-rand); padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; }
.wahlkarte .etikett { margin: 0; }
.wahlkarte h2 { font-size: 2rem; }
.wahlkarte p:not(.etikett) { color: var(--tinte); }
.wahlkarte .knoepfe { margin-top: auto; padding-top: 8px; gap: 10px; }
.wahlkarte .knopf { min-height: 46px; padding: 0 18px; font-size: .96rem; }

/* Reservieren */
.reservieren__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.textblock { display: flex; flex-direction: column; gap: 16px; }
.textblock h2 { font-size: clamp(2.3rem, 3.6vw, 3.2rem); margin-bottom: 6px; }
.textblock p:not(.etikett) { font-size: 1.06rem; max-width: 54ch; }
.textblock p a { color: var(--rot); }
.anrufliste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.anrufliste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 18px 20px; background: var(--kachel); border: 1px solid var(--kachel-rand); }
.anrufliste strong { font: 500 1.25rem var(--serif); color: var(--tinte); }
.anrufliste span { grid-column: 1; color: var(--leise); font-size: .95rem; }
.anrufliste .knopf { grid-row: 1 / span 2; grid-column: 2; min-height: 44px; padding: 0 16px; font-size: .95rem; }
.zeiten--klein { margin-top: 18px; }
.zeiten--klein caption { text-align: left; font: 500 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); padding-bottom: 8px; }

/* Über uns */
.bildreihe { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.bildreihe picture { display: block; background: var(--papier-hell); border: 1px solid var(--kachel-rand); padding: 10px; }
.bildreihe img { width: 100%; height: 340px; object-fit: cover; }

/* Textseiten */
.text { max-width: 760px; }
.text h2 { font-size: 1.6rem; margin: 34px 0 10px; }
.text p { color: var(--text); }
.text a { color: var(--rot); }
.entwurf { padding: 12px 16px; border-left: 3px solid var(--rot); background: rgba(193, 57, 43, .08); color: #8f2a1f; font: 600 .95rem/1.5 var(--sans); }

/* Fenster: Haus zum Bestellen wählen */
.fenster { width: min(560px, 100% - 32px); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 38px 34px 30px; border: 1px solid var(--kachel-rand); border-radius: 2px; background: var(--papier) url("bilder/tusche/papier.webp") center / 900px auto; color: var(--text); box-shadow: 0 40px 90px -30px rgba(30, 29, 26, .6); overflow: auto; }
.fenster::backdrop { background: rgba(30, 29, 26, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fenster h2 { font-size: 2.4rem; margin: 0 0 22px; }
.fenster__zu { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid var(--tinte); border-radius: 2px; background: transparent; color: var(--tinte); display: grid; place-items: center; cursor: pointer; }
.fenster__zu svg { width: 14px; height: 14px; }
.fenster .stempel { position: absolute; top: 70px; right: 24px; }
.wahlliste { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.wahl { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--kachel-rand); background: var(--kachel); color: var(--tinte); text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.wahl:hover { background: var(--gruen); border-color: var(--gruen); color: #f4efe5; }
.wahl svg { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--rot); }
.wahl:hover svg { color: #f4efe5; }
.wahl__name { font: 500 1.3rem var(--serif); }
.wahl__ort { font: 500 .7rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.fenster__klein { font-size: .92rem; color: var(--leise); margin-top: 8px; }
/* Inhaber, 03.10.2026: „Kartenzahlung ab 15 €“ fett im Bestellfenster */
.fenster__zahlung { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 10px 14px; background: var(--papier-hell); border: 1px solid var(--kachel-rand); font: 400 1rem/1.35 var(--sans); color: var(--tinte); }
.fenster__zahlung strong { font-weight: 700; }
.fenster__zahlung svg { width: 22px; height: 22px; flex: none; color: var(--rot); }
html.fenster-offen { overflow: hidden; }

/* Fuß */
.fuss { padding: 60px 0 34px; border-top: 1px solid var(--linie); background: rgba(226, 219, 205, .45); }
.fuss__oben { display: grid; grid-template-columns: 1fr 1.7fr .8fr; gap: 44px; padding-bottom: 34px; }
.fuss__marke { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.fuss__satz { display: flex; align-items: center; gap: 18px; font-size: .98rem; }
.fuss__haeuser { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; font-size: .96rem; }
.fuss__haeuser strong { display: block; font: 500 1.1rem var(--serif); color: var(--tinte); margin-bottom: 6px; }
.fuss__haeuser span { display: block; }
.fuss__haeuser a { text-decoration: none; color: var(--rot); }
.fuss nav { display: flex; flex-direction: column; gap: 10px; font-size: .98rem; }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--linie); font: 400 .9rem var(--sans); color: var(--leise); }
.fuss__unten nav { flex-direction: row; gap: 26px; font-size: .9rem; }

/* Vorschauleiste (nur Vorschau) */
.vorschau-platz { height: var(--vorschau, 76px); }
.vorschau { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--tinte); color: #f4efe5; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .5); font-family: var(--sans); }
.vorschau__innen { display: flex; align-items: center; gap: 16px; padding: 12px 24px; max-width: 1400px; margin: 0 auto; }
.vorschau__marke { flex: none; background: var(--rot); color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; }
.vorschau p { flex: 1; font-size: .86rem; line-height: 1.4; }
.vorschau__knoepfe { display: flex; gap: 8px; flex: none; }
.vorschau__knoepfe a { text-decoration: none; font-weight: 600; font-size: .86rem; padding: 9px 14px; border: 1px solid rgba(244, 239, 229, .45); white-space: nowrap; }
.vorschau__knoepfe a.vorschau__haupt { background: #f4efe5; color: var(--tinte); border-color: #f4efe5; }

@media (max-width: 1100px) {
  .kopf nav { display: none; }
  .kopf__menue { display: inline-flex; }
  .kopf--offen nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 4px 24px 14px; background: var(--papier); border-bottom: 1px solid var(--linie); box-shadow: 0 22px 30px -24px rgba(30, 29, 26, .55); }
  .kopf--offen nav a { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 1.08rem; }
  .kopf--offen nav a:last-child { border-bottom: 0; }
  .sprachwahl--kopf { margin-left: 0; }
  .buehne__links { padding-left: 96px; padding-right: 40px; }
  .haeuser__raster, .wahlkarten { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bestellung { grid-template-columns: 1fr 1.6fr; }
  .bestellung__rechts { display: none; }
  .reservieren-teaser__raster, .reservieren__raster, .seitenkopf__raster { grid-template-columns: 1fr; gap: 36px; }
  .seitenkopf__bild { max-width: 640px; }
  .seitenkopf .kreis { right: -60px; top: 100px; width: 140px; }
  .seitenkopf--karte .seitenkopf__bild { justify-self: start; width: min(100%, 280px); }
  .karte-abschnitt--foto .karte-abschnitt__inhalt { grid-template-columns: minmax(0, 1fr); }
  .abschnitt__foto { position: static; order: -1; max-width: 460px; }
  .fuss__oben { grid-template-columns: 1fr; }
  .abschluss__raster { grid-template-columns: 160px minmax(0, 1fr); }
  .abschluss__bambus { width: 160px; }
  .abschluss .stempel { display: none; }
}
@media (max-width: 860px) {
  .innen { width: min(var(--innen), 100% - 36px); }
  html { scroll-padding-top: 80px; }
  .kopf .innen { min-height: 72px; gap: 12px; }
  .kopf--fest .innen { min-height: 64px; }
  .marke img { width: 38px; }
  .marke__name { font-size: 1.45rem; }
  .marke__zusatz { font-size: .56rem; letter-spacing: .16em; }
  .kopf .knopf { min-height: 44px; padding: 0 14px; font-size: .92rem; }
  .buehne { grid-template-columns: 1fr; min-height: 0; }
  .buehne__links { padding: 112px 18px 44px; }
  .buehne .kreis { left: -96px; top: 44px; width: 150px; }
  .buehne__zeichen { display: none; }
  .buehne__text { padding-top: 22px; }
  .buehne__bild { min-height: 380px; }
  .buehne__bild .hinweis { left: 18px; bottom: 26px; }
  .buehne__bild .stempel { right: 18px; bottom: 22px; }
  .kopfzeile { flex-direction: column; align-items: flex-start; }
  .willkommen { grid-template-columns: 1fr; }
  .willkommen--gedreht .willkommen__bild { order: 0; }
  .rahmen .stempel { right: 10px; bottom: -18px; }
  .zutaten { grid-template-columns: 1fr; }
  .zutaten__gruen { padding: 56px 18px; }
  .zutaten__zeichnungen { grid-template-columns: repeat(2, 1fr); padding: 40px 18px 56px; }
  .zutaten__zeichnungen .stempel { display: none; }
  .bestellung { grid-template-columns: 1fr; padding: 64px 0; }
  .bestellung__links { display: none; }
  .seitenkopf { padding: 118px 0 44px; }
  .seitenkopf .kreis { right: -56px; top: 84px; width: 120px; }
  .chips .innen { flex-wrap: wrap; }
  .chips__reihe { flex-basis: 100%; }
  .suche { flex: 1; }
  .suche input { width: 100%; }
  .posten-liste { grid-template-columns: minmax(0, 1fr); }
  .legende { grid-template-columns: 1fr; padding: 26px 20px; }
  .bildreihe { grid-template-columns: 1fr 1fr; }
  .bildreihe picture:first-child { grid-column: 1 / -1; }
  .bildreihe img { height: 240px; }
  .fuss__haeuser { grid-template-columns: 1fr; }
  .abschluss__raster { grid-template-columns: 1fr; gap: 20px; padding: 56px 0; }
  .abschluss__bambus { display: none; }
  .fenster { padding: 30px 20px 22px; }
  .fenster h2 { font-size: 1.9rem; padding-right: 40px; }
  .fenster .stempel { display: none; }
}
@media (max-width: 560px) {
  .sprachwahl--kopf { display: none; }
  .kopf--offen nav .sprachwahl--menue { display: block; padding: 14px 0 4px; }
  .sprachwahl--menue summary { display: flex; width: 100%; height: 46px; padding: 0 14px; font-size: .92rem; letter-spacing: .02em; }
  .sprachwahl--menue .sprachwahl__kurz { display: none; }
  .sprachwahl--menue .sprachwahl__lang { display: inline; }
  .sprachwahl--menue summary .sprachwahl__pfeil { margin-left: auto; }
  .sprachwahl--menue .sprachwahl__liste { position: static; margin-top: 6px; min-width: 0; box-shadow: none; }
  .kopf--offen nav .sprachwahl__eintrag { padding: 13px 12px; border-bottom: 0; font-size: 1rem; }
  .kopf .knopf span { display: none; }
  .kopf .knopf { padding: 0 12px; }
  .kacheln { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kachel h3 { font-size: 1.05rem; margin: 14px 12px 6px; }
  .kachel p { font-size: .86rem; margin: 0 12px 16px; }
  .buehne h1 { font-size: 2.7rem; }
  .kopfzeile h2 { font-size: 2.6rem; }
  .karte-kasten { padding: 24px 18px; }
  .posten__kopf { grid-template-columns: 2.6em minmax(0, 1fr) auto; }
  .posten__text, .posten__codes { margin-left: calc(2.6em + 10px); }
  .legende ul { grid-template-columns: 1fr; }
  .anrufliste li { grid-template-columns: 1fr; }
  .anrufliste .knopf { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 8px; }
  .vorschau__innen { flex-wrap: wrap; gap: 8px 12px; padding: 9px 14px; }
  .vorschau p { flex-basis: calc(100% - 90px); }
  .vorschau__lang { display: none; }
  .vorschau__knoepfe { width: 100%; }
  .vorschau__knoepfe a { flex: 1; text-align: center; }
}
/* 320 px (Android mit großer Anzeigegröße): sonst lief „Umi Sake Haus“ 20 px unter den Bestellknopf (03.10.2026) */
@media (max-width: 359px) {
  .kopf .innen { gap: 10px; }
  .marke { gap: 9px; }
  .kopf .marke img { width: 32px; }
  .kopf .marke__name { font-size: 1.2rem; }
  .kopf .marke__zusatz { font-size: .5rem; letter-spacing: .1em; margin-top: 4px; }
  /* Öffnungszeiten untereinander: nebeneinander brauchten sie 19 px mehr, als die Hauskarte hat */
  .zeiten, .zeiten tbody, .zeiten tr, .zeiten th, .zeiten td { display: block; }
  .zeiten th { width: auto; padding: 8px 0 0; }
  .zeiten td { padding: 2px 0 8px; border-top: 0; }
  /* Rufnummern bei „Bestellen und abholen“: sonst brach jede Nummer nach der Vorwahl um */
  .nummern { gap: 8px 10px; }
  .nummern span { letter-spacing: .12em; }
  .nummern a { gap: 8px; font-size: 1.2rem; white-space: nowrap; }
  .nummern a svg { width: 17px; height: 17px; }
}
/* Vorschauleiste (nur bis zum Livegang): beide Knöpfe passen nebeneinander, Text mittig, auch wenn er umbricht */
@media (max-width: 389px) {
  .vorschau__knoepfe a { display: flex; align-items: center; justify-content: center; padding: 9px 8px; font-size: .8rem; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .kachel__bild img, .wahl { transition: none; }
}