/* Peking Garden Krefeld (12.10.2026). Look and Feel nach Entwurf 04 „Papier & Tusche“, von Haibo am 12.10.2026 gewählt:
   Reispapier, Tuschezeichnungen, rote Stempel, Newsreader mit Source Sans 3, dunkelgrüne Knöpfe und Flächen. Grundlage
   ist die live laufende Tusche-Seite von Umi Sake (clients/umi-sake/neue-webseite/seite/stil.css) mit ihren Korrekturen
   für 320 px und den erzwungenen Dunkelmodus. Bewegung nur im ersten Bildschirm, Aufforderungen nur als Knopf. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("medien/schriften/newsreader-latin.woff2?v=62981321d9") 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("medien/schriften/newsreader-latin-ext.woff2?v=ac6fa9ed53") 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("medien/schriften/source-sans-3-latin.woff2?v=7a19a7027e") 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("medien/schriften/source-sans-3-latin-ext.woff2?v=a85a7459bd") 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; }
/* Die Zeichen der Stempel aus dem Entwurf (中華美食, 味, 食, 新鮮), seit 21.10.2026 dazu 座, 福, 家: Teilmenge von Noto Serif TC
   SemiBold (Google Fonts mit text=), eigene Datei in schriften-eigen/, medien_vorbereiten.py nimmt sie statt der Demo-Datei */
@font-face { font-family: "Zeichen Serif"; font-weight: 600; font-display: swap; src: url("medien/schriften/zeichen-serif.woff2?v=42b2843a19") format("woff2"); }

:root {
  /* Kein Umfärben durch den Browser (Patcharawadee, Umi Sake): „only light“ meldet die Seite vom automatischen
     Dunkelmodus von Chrome ab, sonst wird die Schrift hell auf hellem Papier. */
  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; --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: "Zeichen Serif", "Songti SC", "Noto Serif CJK SC", serif;
  --innen: 1200px;
}
@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: calc(var(--kopf, 76px) + 70px); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); font: 400 17px/1.55 var(--serif); background: var(--papier) url("medien/tusche/papier.webp?v=f6c2227622") center top / 900px auto repeat; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
/* Fotos als AVIF mit WebP-Ersatz (gemeinsam.bild): picture erzeugt keinen eigenen Kasten, die Regeln für img greifen wie vorher */
picture { display: contents; }
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; }
/* Überschriften brechen nie mitten im Wort (12.10.2026: bei 1880 px brach der Titel der Bühne). Kein break-word wie im
   Fließtext; getrennt wird nur an einem Bindestrich oder an einem weichen Trennstrich im Text (\u00ad), dann mit sichtbarem
   Strich. Passt ein Wort nicht, ist die Schrift zu groß: werkzeug/aufnahmen.py meldet es. */
h1, h2, h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
p { margin: 0; }
.zeile { display: block; }
.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; }
.versteckt:focus { position: fixed; z-index: 100; top: 10px; left: 10px; width: auto; height: auto; clip: auto; background: var(--gruen); color: #f4efe5; padding: 10px 16px; }
.unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.klein { font: 400 .9rem/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; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

/* Knöpfe: grün wie im Entwurf, Rand in Tinte, hell auf grünem Grund */
.knopf { display: inline-flex; align-items: center; justify-content: 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: transparent; color: #f4efe5; border-color: #f4efe5; }
.knopf--hell:hover { background: rgba(244, 239, 229, .1); }
.knopf[disabled] { opacity: .65; cursor: progress; }

/* Stempel und senkrechte Zeichen */
.stempel { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--rot); color: var(--rot); line-height: 1; background: transparent; }
.stempel--zeichen { font: 600 2.1rem/1 var(--zeichen); padding: 8px 6px; letter-spacing: .06em; }
.stempel--senkrecht { writing-mode: vertical-rl; }
.stempel--zeichen.stempel--senkrecht { padding: 6px 8px; letter-spacing: .08em; }   /* zwei Zeichen (美食) untereinander */
.stempel--latein { font: 600 .82rem/1.15 var(--sans); text-transform: uppercase; letter-spacing: .16em; padding: 7px 10px 6px; text-align: center; }
.stempel--klein.stempel--zeichen { font-size: 1.35rem; padding: 5px 4px; border-width: 1.5px; }
.stempel--gross { font-size: 1.5rem; letter-spacing: .18em; padding: 18px 22px; border-width: 3px; line-height: 1.2; }
.senkrecht { writing-mode: vertical-rl; font: 600 2rem/1 var(--zeichen); color: var(--tinte); letter-spacing: .35em; margin: 0; }
.kreis { position: absolute; pointer-events: none; mix-blend-mode: multiply; height: auto; }

/* ------------------------------------------------------------------------------------------------ Kopf */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(236, 230, 218, .82); -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: 34px; 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; text-decoration: none; margin-right: auto; min-width: 0; flex: none; }
.marke__logo { height: 52px; width: auto; transition: height .25s; }
.kopf--fest .marke__logo { height: 44px; }
.kopf nav { display: flex; gap: 26px; font-size: .98rem; }
.kopf nav a { text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; white-space: nowrap; }
.kopf nav a:hover, .kopf nav a[aria-current="page"] { border-bottom-color: var(--rot); }
.kopf .knopf { min-height: 48px; padding: 0 20px; }
.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); }
/* Hinweise aus dem Dashboard: rote Leiste oben im Kopf (auf der Startseite stehen sie im Kasten „Aktuell“) */
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); }

/* ------------------------------------------------------------------------------------------------ Bühne (Start) */
.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; min-width: 0; }
/* Schriftgröße nach der Breite der Textspalte, nicht nach dem Fenster: Die Spalte wird ab etwa 1500 px wieder schmaler,
   weil ihr Innenabstand mitwächst (der Text steht an der Kante des 1200er-Rasters). Mit 4,3vw lief „Familiengeführt.“
   (7,04 Geviert breit) dort über die Spalte und brach mitten im Wort. 13cqi lässt dem längsten Wort 8 % Luft; die erste
   Zeile gilt für Browser ohne Container-Einheiten. */
.buehne__links { container-type: inline-size; }
.buehne h1 { margin: 0 0 24px; font-size: clamp(2.2rem, 4.3vw, 4.3rem); font-size: clamp(2.2rem, 13cqi, 4.3rem); line-height: 1.04; }
.buehne__text > p:not(.etikett) { font-size: 1.22rem; line-height: 1.55; margin: 0 0 34px; max-width: 36ch; }
.buehne__bild { position: relative; background: #1b1611; min-height: 720px; overflow: hidden; }
.buehne__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.buehne__bild::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1; background: linear-gradient(0deg, rgba(20, 16, 12, .7), rgba(20, 16, 12, 0)); pointer-events: none; }
.buehne__bild .hinweis { position: absolute; z-index: 2; left: 40px; bottom: 36px; color: #efe8dc; max-width: 260px; }
.buehne__bild .stempel { position: absolute; z-index: 2; right: 34px; bottom: 30px; background: rgba(20, 16, 12, .35); color: #f6d3cc; border-color: #e0685a; }

/* Kasten „Aktuell“ (Haibo, 12.10.2026: „kleine Infobox für aktuelle Informationen … einfach und flexibel zu bearbeiten“).
   Der Text kommt aus dem Reiter „Hinweis“ im Dashboard; ohne aktuellen Hinweis bleibt der Kasten weg. */
.infobox { position: relative; margin-top: 30px; max-width: 470px; background: rgba(243, 238, 228, .82); border: 1px solid var(--kachel-rand); border-left: 3px solid var(--rot); padding: 18px 22px 18px 20px; box-shadow: 0 24px 40px -34px rgba(30, 29, 26, .6); }
.infobox[hidden] { display: none; }
.infobox__titel { margin: 0 0 10px; }
.infobox__titel .stempel { font-size: .72rem; padding: 5px 8px 4px; }
.infobox__liste p { font: 400 1.05rem/1.5 var(--serif); color: var(--tinte); }
.infobox__liste p + p { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }

/* ------------------------------------------------------------------------------------------------ Abschnitte */
.abschnitt { padding: clamp(64px, 8vw, 96px) 0; }
.abschnitt--eng { padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 90px); }
.abschnitt--linie { border-top: 1px solid var(--linie); }
.abschnitt--dunkel { background: rgba(226, 219, 205, .5); border-top: 1px solid var(--linie); }
.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 .knopf { flex: none; }

/* Geschichte und Catering: 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: 16px; min-width: 0; }
.willkommen h2 { font-size: clamp(2.5rem, 4.2vw, 3.8rem); margin-bottom: 8px; }
.willkommen__text > p:not(.etikett) { font-size: 1.1rem; line-height: 1.6; max-width: 52ch; }
.willkommen .knoepfe { margin-top: 10px; }
.willkommen--gedreht .willkommen__bild { order: -1; }
.rahmen { position: relative; margin: 0; 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: 46px; background: var(--papier); }
.rahmen .hinweis { display: block; margin-top: 12px; }

/* Beliebte Gerichte: Kacheln wie im Entwurf, ganz klickbar */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.kachel { display: block; background: var(--kachel); border: 1px solid var(--kachel-rand); text-decoration: none; }
.kachel__bild { position: relative; 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; }

/* Zutaten: grüne Fläche und Tuschezeichnungen */
.zutaten { display: grid; grid-template-columns: minmax(340px, 42%) minmax(0, 1fr); min-height: 560px; }
.zutaten__gruen { background: var(--gruen); color: #ece6da; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; 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.5rem, 3.8vw, 3.6rem); margin-bottom: 26px; }
.zutaten__gruen p:not(.etikett) { margin: 0 0 30px; font-size: 1.1rem; line-height: 1.6; color: #dcd5c7; max-width: 44ch; }
.zutaten__zeichnungen { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; align-content: center; align-items: center; 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); }
.zutat--stempel { display: flex; justify-content: center; }
.zutat--stempel .stempel { font-size: 2.4rem; letter-spacing: .1em; padding: 12px 8px; }

/* Mittagstisch und Buffet */
.angebote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.angebot { display: grid; grid-template-rows: auto 1fr; background: var(--kachel); border: 1px solid var(--kachel-rand); }
.angebot__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1b1611; }
.angebot__bild img { width: 100%; height: 100%; object-fit: cover; }
.angebot__text { display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 32px; }
.angebot__text .etikett { margin: 0; }
.angebot h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.angebot__text p:not(.etikett) { font-size: 1.06rem; max-width: 46ch; }
.angebot .knoepfe { margin-top: auto; padding-top: 6px; }

/* Zum Mitnehmen: Telefon, Bambus und Tuschesonne */
.bestellung { position: relative; display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: center; min-height: 480px; padding: 48px 0; overflow: hidden; border-top: 1px solid var(--linie); }
.bestellung__bild { position: relative; height: 100%; min-height: 380px; }
.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; left: 14%; top: 30%; }
.bestellung__bild img:not(.kreis) { z-index: 1; }
.bestellung__mitte { text-align: center; position: relative; z-index: 2; padding: 0 12px; }
.bestellung h2 { font-size: clamp(2.5rem, 4vw, 3.8rem); margin-bottom: 20px; }
.bestellung__mitte > p:not(.etikett) { margin: 0 auto 28px; max-width: 42ch; font-size: 1.08rem; }
.bestellung .knoepfe { justify-content: center; }

/* Reservierung auf der Startseite */
.reservieren-teaser__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.reservieren-teaser__text { position: relative; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.reservieren-teaser h2 { font-size: clamp(2.5rem, 4vw, 3.8rem); }
.reservieren-teaser__text > p:not(.etikett) { font-size: 1.1rem; line-height: 1.6; max-width: 40ch; }
.reservieren-teaser__text .stempel { margin-top: 18px; }

/* Öffnungszeiten, Anfahrt, Foto vom Haus */
.standort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; background: rgba(226, 219, 205, .45); border-top: 1px solid var(--linie); }
.standort__kasten { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; background: rgba(236, 230, 218, .55); padding: 56px 40px 56px max(40px, calc((100vw - var(--innen)) / 2)); }
.standort__kasten + .standort__kasten { padding-left: 48px; }
.standort h2 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); margin-bottom: 4px; }
.standort__kasten > p { font-size: 1.08rem; color: var(--tinte); }
.standort__foto { position: relative; min-height: 340px; overflow: hidden; }
.standort__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.standort__foto .hinweis { position: absolute; right: 22px; top: 22px; background: rgba(236, 230, 218, .92); padding: 12px 14px; color: var(--tinte); }

.zeiten { width: 100%; border-collapse: collapse; margin: 0; font-size: 1rem; color: var(--tinte); }
.zeiten caption { text-align: left; font: 500 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); padding-bottom: 8px; }
.zeiten th, .zeiten td { text-align: left; vertical-align: top; padding: 9px 0; border-top: 1px solid var(--linie); }
.zeiten th { font-weight: 500; padding-right: 14px; width: 42%; }
.zeiten td { color: var(--text); }
.zeiten .zeit { display: block; white-space: nowrap; }
.zeiten__zusatz { display: block; font: 400 .85rem/1.4 var(--sans); color: var(--leise); margin-top: 2px; }
.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); }

/* ------------------------------------------------------------------------------------------------ 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--schlicht .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); }
.seitenkopf--schlicht { padding-bottom: 36px; }
.seitenkopf__text { min-width: 0; }
.seitenkopf h1 { font-size: clamp(2.6rem, 4.8vw, 4.4rem); margin: 0 0 22px; }
.seitenkopf__text > p:not(.etikett) { font-size: 1.14rem; line-height: 1.6; max-width: 54ch; }
.seitenkopf .knoepfe { margin-top: 30px; }
.seitenkopf__bild .rahmen img { aspect-ratio: 4 / 3; max-height: 440px; }

/* Gut zu wissen (Reis, Mitnehmen, Allergene) */
.wissen { background: var(--kachel); border: 1px solid var(--kachel-rand); border-left: 3px solid var(--gruen); padding: 20px 24px; margin-bottom: 10px; }
.wissen .etikett { margin-bottom: 8px; }
.wissen ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.wissen li { font-size: 1.02rem; color: var(--tinte); }
.wissen li::marker { color: var(--rot); }

/* Speisekarte: Sprungleiste und Suche (kleben unter dem Kopf), Abschnitte, Posten */
.chips { position: sticky; top: calc(var(--kopf, 74px) - 1px); z-index: 20; margin-top: 26px; 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::-webkit-scrollbar { display: none; }
.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: 12px 0 40px; }
.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.2rem var(--serif); color: var(--rot); }
.abschnitt__info { margin: 14px 0 0; color: var(--leise); font-size: 1rem; max-width: 80ch; }
.posten-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.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 .74rem/1 var(--sans); letter-spacing: .06em; color: var(--rot); font-variant-numeric: tabular-nums; }
.posten__name { font: 500 1.16rem/1.3 var(--serif); color: var(--tinte); letter-spacing: 0; }
.posten__codes { font: 600 .62rem/1 var(--sans); letter-spacing: .06em; color: var(--leise); margin-left: 6px; vertical-align: super; }
.posten__preis { font: 500 1.08rem var(--serif); color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.posten__text, .posten__merkmale, .gaenge { margin: 4px 0 0 calc(3.1em + 10px); color: var(--leise); font-size: .96rem; line-height: 1.45; }
.posten__merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.merkmal { font: 600 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 4px 6px 3px; border: 1px solid currentColor; color: var(--gruen-hell); }
.merkmal--scharf { color: var(--rot); }
.gaenge { list-style: none; padding: 0; display: grid; gap: 5px; margin-top: 8px; }
.gaenge li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; }
.gaenge__nr { font: 600 .66rem/1.9 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rot); white-space: nowrap; }
.posten.versteckt-suche, .karte-abschnitt.versteckt-suche { display: none; }
.nichts { padding: 40px 0; color: var(--leise); font-size: 1.1rem; }
.nichts[hidden] { display: none; }
.legende { margin-top: 56px; padding: 26px 30px; background: var(--kachel); border: 1px solid var(--kachel-rand); }
.legende[hidden] { display: none; }
.legende h2 { font-size: 1.5rem; margin-bottom: 8px; }
.legende p { color: var(--leise); margin-bottom: 12px; }
.legende ul { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: 30px; }
.legende li { padding: 3px 0; break-inside: avoid; }
.legende li b { display: inline-block; width: 1.6em; color: var(--rot); font-family: var(--sans); font-weight: 600; }
.karte-weiter { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 clamp(56px, 7vw, 90px); }

/* Buffet: die eine Karte als Kasten, daneben Feiertage und Reservierung */
.buffet { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 22px; align-items: start; }
.buffet-karte .karte { padding: 0; }
.buffet-karte .karte > .innen { width: auto; }
.buffet-karte .karte-abschnitt { padding: 30px 34px 26px; background: var(--kachel); border: 1px solid var(--kachel-rand); }
.buffet-karte .posten-liste { grid-template-columns: minmax(0, 1fr); }
.buffet-karte .posten__kopf { grid-template-columns: minmax(0, 1fr) auto; }
.buffet-karte .posten__nr { display: none; }
.buffet-karte .posten__text { margin-left: 0; }
.buffet-karte .posten__name { font-size: 1.3rem; }
.buffet-karte .posten__preis { font-size: 1.3rem; color: var(--rot); }

/* Reservieren, Kontakt: Formular und Kästen */
.reservieren__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.kontakt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.karte-kasten { background: var(--kachel); border: 1px solid var(--kachel-rand); padding: 30px 30px 28px; display: grid; gap: 22px; min-width: 0; }
.karte-kasten h3 { font-size: 1.5rem; }
.karte-kasten > div { display: grid; gap: 12px; justify-items: start; }
.karte-kasten > div + div { padding-top: 22px; border-top: 1px solid var(--linie); }
.karte-kasten p { color: var(--text); }
.karte-kasten .zeiten { justify-self: stretch; }
.karte-kasten a:not(.knopf) { color: var(--rot); }

.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; background: rgba(255, 255, 255, .3); border: 1px solid rgba(207, 198, 181, .8); padding: 34px 34px 30px; min-width: 0; }
.feld { display: grid; gap: 4px; min-width: 0; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font: 500 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--leise); }
.feld label span { letter-spacing: .06em; text-transform: none; }
.feld input, .feld select, .feld textarea { width: 100%; min-width: 0; min-height: 46px; border: 0; border-bottom: 1px solid var(--tinte); border-radius: 0; background: transparent; padding: 10px 2px; font: 400 1.08rem var(--serif); color: var(--tinte); }
.feld select { -webkit-appearance: none; appearance: none; padding-right: 30px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e1d1a' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat; }
.feld textarea { min-height: 84px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; border-bottom: 2px solid var(--rot); }
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.formular__fuss .knopf { border: 0; }
.formular__klein { margin: 0; flex: 1 1 220px; font: 400 .85rem/1.5 var(--sans); color: var(--leise); }
.formular__klein a { color: var(--tinte); }
.formular__gruppe, .formular__hinweis { margin: 0; padding: 14px 16px; border-left: 3px solid var(--rot); background: rgba(193, 57, 43, .08); font: 600 .95rem/1.5 var(--sans); color: #8f2a1f; }
.formular__gruppe { border-left-color: var(--gruen); background: rgba(47, 59, 45, .07); color: var(--gruen); font-weight: 500; }
.formular__hinweis--gut { border-left-color: var(--gruen); background: rgba(47, 59, 45, .08); color: var(--gruen); }
.formular [hidden] { display: none; }

/* Über uns */
.ambiente { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 30px; }   /* vier Karten seit 21.10.2026 */
.ambiente__teil { background: var(--kachel); border: 1px solid var(--kachel-rand); padding: 26px 26px 28px; }
.ambiente__teil h3 { font-size: 1.6rem; margin-bottom: 10px; }
.ambiente__teil p { font-size: 1.04rem; }
.bildreihe { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.bildreihe figure { margin: 0; background: var(--papier-hell); border: 1px solid var(--kachel-rand); padding: 10px; }
.bildreihe img { width: 100%; height: 300px; object-fit: cover; }
.bildreihe .hinweis { display: block; margin-top: 8px; }
.bildreihe--zwei { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

/* Galerie und Großansicht */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.galerie figure { margin: 0; background: var(--papier-hell); border: 1px solid var(--kachel-rand); padding: 8px; }
.galerie a { position: relative; display: block; overflow: hidden; }
.galerie img { aspect-ratio: 1; width: 100%; object-fit: cover; transition: transform .5s; }
.galerie a:hover img { transform: scale(1.03); }
.galerie figcaption { font: 400 .86rem/1.4 var(--sans); color: var(--leise); padding: 8px 2px 2px; }
/* 28.10.2026: Buffet-Fotos auf der Buffet-Seite, drei je Reihe im Querformat (am Handy zwei, wie die Galerie) */
.galerie--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galerie--drei img { aspect-ratio: 4 / 3; }
.licht { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 16, 12, .95); color: #f4efe5; }
.licht::backdrop { background: rgba(20, 16, 12, .9); }
.licht__bild { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px 70px 40px; }
.licht__bild img { max-height: calc(100vh - 150px); max-width: 100%; object-fit: contain; }
.licht__bild figcaption { margin-top: 14px; font: 400 .95rem var(--sans); color: #e7e0d3; text-align: center; }
.licht__zahl { color: #b9b1a3; margin-left: 8px; }
.licht__knopf { position: absolute; background: rgba(20, 16, 12, .5); border: 1px solid rgba(244, 239, 229, .45); color: #f4efe5; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; border-radius: 2px; }
.licht__knopf svg { width: 24px; height: 24px; }
.licht__zu { top: 16px; right: 16px; }
.licht__zurueck { left: 12px; top: 50%; transform: translateY(-50%); }
.licht__weiter { right: 12px; top: 50%; transform: translateY(-50%); }

/* Rechtstexte */
.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); }
.entwurf-inline { color: #8f2a1f; font: italic 400 .95em var(--serif); }

/* ------------------------------------------------------------------------------------------------ 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: 1.2fr 1fr 1fr .8fr; gap: 40px; padding-bottom: 30px; }
.fuss__marke { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.fuss__logo { height: 56px; width: auto; }
.fuss__satz { display: flex; align-items: center; gap: 16px; font-size: .98rem; }
.fuss__spalte h2 { font: 500 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--leise); margin-bottom: 12px; }
.fuss__spalte p { font-size: .98rem; margin-bottom: 10px; color: var(--tinte); }
.fuss__spalte a { text-decoration: none; color: var(--rot); }
.fuss__nav { display: flex; flex-direction: column; gap: 8px; 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: 20px; border-top: 1px solid var(--linie); font: 400 .9rem var(--sans); color: var(--leise); }
.fuss__unten nav { display: flex; gap: 26px; }
.fuss__unten a { text-decoration: none; }
.fuss__unten a:hover { color: var(--tinte); }

/* ------------------------------------------------------------------------------------------------ Breiten */
@media (max-width: 1180px) {
  .kopf nav { display: none; }
  .kopf__menue { display: inline-flex; }
  .kopf .innen { gap: 14px; }
  .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); max-height: calc(100vh - 80px); overflow-y: auto; }
  .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; }
}
@media (max-width: 1100px) {
  .buehne__links { padding-left: 96px; padding-right: 40px; }
  .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: minmax(0, 1fr); gap: 36px; }
  .seitenkopf__bild { max-width: 640px; }
  .seitenkopf .kreis { right: -60px; top: 100px; width: 140px; }
  .standort { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .standort__foto { grid-column: 1 / -1; }
  .kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .buffet { grid-template-columns: minmax(0, 1fr); }
  .ambiente { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss__oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .innen { width: min(var(--innen), 100% - 36px); }
  .kopf .innen { min-height: 70px; }
  .kopf--fest .innen { min-height: 62px; }
  .marke__logo, .kopf--fest .marke__logo { height: 42px; }
  .kopf .knopf { min-height: 44px; padding: 0 14px; font-size: .92rem; }
  .buehne { grid-template-columns: minmax(0, 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: minmax(0, 1fr); }
  .willkommen--gedreht .willkommen__bild { order: 0; }
  .rahmen .stempel { right: 10px; bottom: -18px; }
  .rahmen .stempel ~ .hinweis { padding-right: 58px; }   /* Text nicht unter den Stempel (美食 steht seit 21.10.2026 senkrecht, doppelt so hoch) */
  .zutaten { grid-template-columns: minmax(0, 1fr); }
  .zutaten__gruen { padding: 56px 18px; }
  .zutaten__zeichnungen { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px 18px 56px; }
  .angebote { grid-template-columns: minmax(0, 1fr); }
  .bestellung { grid-template-columns: minmax(0, 1fr); padding: 64px 18px; }
  .bestellung__links { display: none; }
  .seitenkopf { padding: 112px 0 40px; }
  .seitenkopf .kreis { right: -56px; top: 84px; width: 120px; }
  .standort { grid-template-columns: minmax(0, 1fr); }
  .standort__kasten, .standort__kasten + .standort__kasten { padding: 44px 18px; }
  .chips { margin-top: 10px; }
  .chips .innen { flex-wrap: wrap; gap: 10px; }
  .chips__reihe { flex-basis: 100%; }
  .suche { flex: 1; }
  .suche input { width: 100%; }
  .posten-liste { grid-template-columns: minmax(0, 1fr); }
  .kontakt { grid-template-columns: minmax(0, 1fr); }
  .formular { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 22px; }
  .bildreihe, .bildreihe--zwei { grid-template-columns: minmax(0, 1fr); }
  .bildreihe img { height: 220px; }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fuss__oben { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .buffet-karte .karte-abschnitt { padding: 22px 18px 18px; }
}
@media (max-width: 560px) {
  .kopf .knopf span { display: none; }
  .kopf .knopf { padding: 0 12px; }
  .kacheln { grid-template-columns: minmax(0, 1fr) minmax(0, 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: clamp(2rem, 13cqi, 2.5rem); }
  .kopfzeile h2 { font-size: 2.5rem; }
  .karte-kasten { padding: 24px 18px; }
  .posten__kopf { grid-template-columns: 2.6em minmax(0, 1fr) auto; }
  .posten__text, .posten__merkmale, .gaenge { margin-left: calc(2.6em + 10px); }
  .gaenge li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .licht__bild { padding: 70px 10px 90px; }
  .licht__zurueck, .licht__weiter { top: auto; bottom: 20px; transform: none; }
}
/* 320 px (Android mit großer Anzeigegröße) */
@media (max-width: 374px) {
  .kopf .innen { gap: 10px; }
  .marke__logo, .kopf--fest .marke__logo { height: 36px; }
  .knopf { white-space: normal; text-align: center; padding: 0 18px; }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .zeiten, .zeiten tbody, .zeiten tr, .zeiten th, .zeiten td { display: block; }
  .zeiten th { width: auto; padding: 9px 0 0; }
  .zeiten td { padding: 2px 0 9px; border-top: 0; }
  .posten__kopf { grid-template-columns: minmax(0, 1fr) auto; }
  .posten__nr { grid-column: 1 / -1; }
  .posten__text, .posten__merkmale, .gaenge { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .kachel__bild img, .galerie img, .kopf, .marke__logo { transition: none; }
}