/* Patcharawadee Fine Thai Cuisine, Freiburger Golfclub.
   Look and Feel nach Entwurf 4 („Papier und Tusche“, 30.09.2026): Reispapier, Tusche, Waldgrün, Zinnoberrot,
   Newsreader als Serife, Source Sans 3 für Beschriftungen, Tuschezeichnungen mit multiply auf dem Papier,
   rote Stempel mit Thai-Schrift. Die zweite Zeile der Überschriften bleibt kursiv wie bisher. */
@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+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("schriften/newsreader-kursiv-latin.woff2") format("woff2"); }
@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+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Zeichen Thai"; font-weight: 600; font-display: swap; src: url("schriften/zeichen-thai.woff2") format("woff2"); }
:root {
  /* Kein Umfärben durch den Browser (01.10.2026, siehe bauen.py, seite()): „only light“ ist die Abmeldung für den
     automatischen Dunkelmodus von Chrome. Die erste Angabe gilt für Browser, die „only“ nicht kennen. */
  color-scheme: light; color-scheme: only light;
  --papier: #ece6da; --papier-dunkel: #e2dbcd; --tinte: #1e1d1a; --text: #3b3934; --leise: #6b665c;
  --gruen: #2f3b2d; --gruen-hell: #3e4d3b; --rot: #c1392b; --rot-dunkel: #a02f23; --linie: #cfc6b5;
  --karte: rgba(255, 255, 255, .32); --karte-rand: rgba(207, 198, 181, .8);
  --innen: 1200px; --serif: "Newsreader", Georgia, serif; --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Auch wer am Gerät den Dunkelmodus eingestellt hat, bekommt das helle Papier: Die Seite hat bewusst nur dieses eine
   Aussehen. Der Block steht hier, weil manche Browser (Samsung Internet) erst dann aufs eigene Umfärben verzichten, 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: 90px; }
body { margin: 0; color: var(--text); font: 400 17px/1.58 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; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
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: italic; font-weight: 400; }
p { margin: 0 0 1em; }
.innen { width: min(var(--innen), 100% - 96px); margin-inline: auto; }
.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); margin: 0; }
.leise { color: var(--leise); }
.klein { font-size: .88rem; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tuschebild { mix-blend-mode: multiply; }

/* Knöpfe und Verweise: eckig, dunkelgrün, Serife wie in der Vorlage */
.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 var(--serif); border: 1px solid var(--gruen); border-radius: 2px; cursor: pointer; white-space: nowrap; transition: background .2s; }
.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--pdf svg { color: var(--rot); }
.knopf--hell { background: transparent; color: #f4efe5; border-color: rgba(244, 239, 229, .7); }
.knopf--hell:hover { background: rgba(244, 239, 229, .1); border-color: #f4efe5; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.verweis { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: .98rem; background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; font-family: inherit; cursor: pointer; }
.verweis svg { width: 16px; height: 12px; flex: none; }
.verweis svg[viewBox="0 0 24 24"] { width: 17px; height: 17px; color: var(--rot); }

/* Stempel und senkrechte Schrift (nur Wörter, die die Zeichen-Schrift enthält: อร่อย สด อาหาร ไทย) */
.stempel { display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--rot); color: var(--rot); line-height: 1; font: 600 1.45rem/1 "Zeichen Thai", serif; padding: 10px 12px; }
.senkrecht { writing-mode: vertical-rl; margin: 0; font: 600 1.35rem/1 "Zeichen Thai", serif; letter-spacing: .12em; color: var(--tinte); }

/* 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: 44px; min-height: 92px; 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; }
/* Logo genau so hoch wie Name plus Zusatz (Frau Keidel, 01.10.2026): Die Höhe des Bildes ist dieselbe Rechnung wie die
   Höhe des Textblocks (Zeile Name + Abstand + Zeile Zusatz), Größen nur über die drei Variablen ändern. */
.marke { --name: 1.85rem; --zusatz: .62rem; --luft: 6px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinte); margin-right: auto; }
.marke img { height: calc(var(--name) * 1.02 + var(--luft) + var(--zusatz) * 1.4); width: auto; flex: none;
  /* Der grüne Buchstabe beginnt im Bild erst unter dem goldenen Schwung (bei 10 % der Höhe). Das Bild rückt deshalb
     so weit nach oben, dass der Buchstabe an der Oberkante des „P“ im Namen beginnt und mit dem Zusatz endet. */
  transform: translateY(calc(-1 * (var(--name) * .034 + .6px + var(--zusatz) * .14))); }
.marke__text { display: flex; flex-direction: column; line-height: 1; }
.marke__name { font: 600 var(--name)/1.02 var(--serif); letter-spacing: -.03em; }
.marke__zusatz { font: 500 var(--zusatz)/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; margin-top: var(--luft); color: var(--leise); }
.kopf nav { display: flex; gap: 34px; font-size: .98rem; }
.kopf nav a { text-decoration: none; padding: 6px 0; 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: 46px; padding: 0 18px; }
/* Sprachwahl (Trung, 01.10.2026): Dropdown links neben der Telefonnummer. Am Handy ist dafür kein Platz, dort steht
   die andere Sprache als letzter Punkt im aufgeklappten Menü (.nav__sprache). */
.sprache { position: relative; flex: none; margin: 0 -22px 0 -14px; }
.sprache summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 2px; cursor: pointer; font: 600 .82rem var(--sans); letter-spacing: .1em; color: var(--tinte); -webkit-user-select: none; user-select: none; transition: border-color .2s; }
.sprache summary::-webkit-details-marker { display: none; }
.sprache summary svg { width: 17px; height: 17px; flex: none; }
.sprache summary svg:last-child { width: 13px; height: 13px; transition: transform .2s; }
.sprache[open] summary svg:last-child { transform: rotate(180deg); }
.sprache summary:hover, .sprache[open] summary { border-color: var(--tinte); }
.sprache ul { position: absolute; right: 0; top: calc(100% + 6px); min-width: 164px; margin: 0; padding: 6px; list-style: none; background: var(--papier); border: 1px solid var(--linie); box-shadow: 0 22px 30px -22px rgba(30, 29, 26, .6); }
.sprache li a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; text-decoration: none; font-size: 1rem; }
.sprache li a:hover { background: rgba(30, 29, 26, .06); }
.sprache li a[aria-current] { font-weight: 600; }
.sprache li svg { width: 15px; height: 15px; flex: none; color: var(--rot); }
.kopf nav .nav__sprache { 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 Tuschekreis, rechts das Foto */
.buehne { position: relative; display: grid; grid-template-columns: 50% 50%; min-height: 720px; }
.buehne__links { position: relative; display: flex; align-items: center; padding: 150px 60px 80px max(48px, calc((100vw - var(--innen)) / 2)); overflow: hidden; }
.buehne__kreis { position: absolute; left: -70px; top: 100px; width: 230px; opacity: .9; pointer-events: none; }
.buehne__zeichen { position: absolute; left: max(14px, calc((100vw - var(--innen)) / 2 - 56px)); top: 360px; }
.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.02; }
.buehne__text > p:not(.etikett) { font-size: 1.22rem; line-height: 1.55; margin: 0 0 34px; max-width: 34em; }
.buehne__bild { position: relative; min-height: 720px; background: #1b1611; }
.buehne__bild picture, .buehne__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hero seit 30.09.2026 die Tafel im Restaurant: Ausschnitt nach oben, damit Fensterfront und Grün im Bild sind */
.buehne__bild img { object-position: 50% 6%; }
.buehne__bild::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(20, 16, 12, .6), rgba(20, 16, 12, 0)); pointer-events: none; }
.buehne__bild .hinweis { position: absolute; z-index: 1; left: 34px; bottom: 34px; color: #f4efe5; max-width: 240px; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.buehne__bild .stempel { position: absolute; z-index: 1; right: 34px; bottom: 30px; background: var(--papier); }

/* Seitenkopf der Unterseiten */
.seitenkopf { position: relative; padding: 150px 0 60px; overflow: hidden; }
.seitenkopf--schlicht { padding-bottom: 36px; }
.seitenkopf__raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.seitenkopf h1 { font-size: clamp(2.7rem, 4.4vw, 4.3rem); margin-bottom: 22px; }
.seitenkopf p:not(.etikett) { font-size: 1.15rem; max-width: 36em; }
.seitenkopf .knoepfe { margin-top: 26px; }
.seitenkopf__bild { position: relative; }
.seitenkopf__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.seitenkopf__bild--zeichnung img { aspect-ratio: 1; object-fit: contain; max-width: 460px; margin-inline: auto; mix-blend-mode: multiply; }
.seitenkopf__bild .stempel { position: absolute; right: 18px; bottom: 18px; background: var(--papier); }
.seitenkopf__kreis { position: absolute; right: -80px; top: 90px; width: 240px; opacity: .8; pointer-events: none; }

/* Abschnitte allgemein */
.abschnitt { padding: 90px 0; }
.abschnitt--dunkel { background: rgba(226, 219, 205, .5); border-block: 1px solid var(--linie); }
.zeilenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 36px; flex-wrap: wrap; }
.zeilenkopf h2 { font-size: clamp(2.5rem, 4.4vw, 4rem); }
.zeilenkopf > p { margin: 0; max-width: 30em; color: var(--leise); }

/* Gerichte als Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.kachel { background: var(--karte); border: 1px solid var(--karte-rand); display: flex; flex-direction: column; }
.kachel img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kachel > div { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.kachel h3 { font-size: 1.32rem; font-weight: 600; margin-bottom: 8px; }
.kachel p { margin: 0 0 12px; color: var(--leise); font-size: .97rem; line-height: 1.5; }
.kachel__preis { margin-top: auto !important; font: 500 .78rem/1.4 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--rot) !important; }

/* Zutaten: grünes Feld 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: 70px 60px 70px max(48px, calc((100vw - var(--innen)) / 2)); }
.zutaten__gruen .etikett { color: #c9c3b5; }
.zutaten__gruen h2 { color: #f4efe5; font-size: clamp(2.5rem, 3.8vw, 3.5rem); margin-bottom: 24px; }
.zutaten__gruen p:not(.etikett) { font-size: 1.1rem; line-height: 1.6; color: #dcd5c7; margin-bottom: 30px; }
.zutaten__gruen .verweis { color: #f4efe5; align-self: flex-start; }
/* Seit 01.10.2026 sind alle Verweise im Linkstil Knöpfe (Trung): der Knopf im grünen Feld soll nicht die ganze Breite nehmen */
.zutaten__gruen .knopf { align-self: flex-start; }
.zutaten__zeichnungen { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; align-content: center; padding: 44px max(48px, calc((100vw - var(--innen)) / 2)) 44px 44px; }
.zutat { text-align: center; padding: 8px 4px; }
.zutat img { width: 100%; max-width: 160px; margin: 0 auto 6px; aspect-ratio: 1; object-fit: contain; }
.zutat strong { display: block; font: 500 1.14rem var(--serif); color: var(--tinte); }
.zutat span { display: block; font: 500 .66rem/1.55 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.zutaten__zeichnungen .stempel { position: absolute; right: max(20px, calc((100vw - var(--innen)) / 2 - 30px)); top: 22px; }

/* Bild mit Text daneben */
.zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zweier--umgekehrt > :first-child { order: 2; }
.zweier h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin-bottom: 22px; }
.zweier p:not(.etikett) { font-size: 1.08rem; }
.zweier .knoepfe { margin-top: 26px; }
.bildstapel { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; align-items: end; }
.bildstapel img { width: 100%; object-fit: cover; }
.bildstapel > :first-child img { aspect-ratio: 3 / 4; }
.bildstapel > :last-child img { aspect-ratio: 3 / 4; }
.bildstapel .stempel { position: absolute; left: -14px; top: -14px; background: var(--papier); }
.preisschild { display: inline-flex; align-items: baseline; gap: 10px; margin: 6px 0 20px; font: 500 2.4rem/1 var(--serif); color: var(--rot); }
.preisschild small { font: 500 .78rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }

/* Feiern und Events: Bildraster */
.feiern { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 14px; }
.feiern figure { margin: 0; position: relative; overflow: hidden; }
.feiern img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.feiern figure:hover img { transform: scale(1.03); }
.feiern .hoch { grid-row: span 2; }
.feiern .breit { grid-column: span 2; }
.feiern figcaption { position: absolute; left: 12px; bottom: 10px; font: 500 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #f4efe5; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* Anrufen, mit gezeichnetem Telefon und Bambus */
.anruf { position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center; min-height: 440px; padding: 30px 0; overflow: hidden; border-top: 1px solid var(--linie); }
.anruf__bild { position: relative; height: 100%; min-height: 360px; }
.anruf__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.anruf__kreis { position: absolute !important; inset: auto !important; width: 150px !important; height: auto !important; left: 18%; top: 26%; }
.anruf__mitte { text-align: center; position: relative; z-index: 2; padding: 20px; }
.anruf h2 { font-size: clamp(2.5rem, 4vw, 3.7rem); margin-bottom: 20px; }
.nummer { display: inline-flex; align-items: center; gap: 14px; color: var(--rot); font: 500 clamp(2rem, 3vw, 2.7rem)/1 var(--serif); text-decoration: none; margin-bottom: 14px; }
.nummer svg { width: 30px; height: 30px; }
.anruf__mitte p:not(.etikett) { margin: 0; color: var(--text); }

/* Reservieren */
.reservieren { padding: 90px 0 96px; border-top: 1px solid var(--linie); }
.reservieren__karte { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.reservieren__text { position: relative; }
.reservieren__text h2 { font-size: clamp(2.5rem, 4vw, 3.7rem); margin-bottom: 22px; }
.reservieren__text p:not(.etikett) { font-size: 1.06rem; }
.reservieren__text .stempel { margin-top: 10px; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; background: var(--karte); border: 1px solid var(--karte-rand); padding: 34px 34px 30px; }
.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 input:focus, .feld select:focus, .feld textarea:focus { outline: 0; border-bottom: 2px solid var(--rot); }
.formular__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }
.formular__klein { margin: 0; flex: 1 1 220px; font: 400 .85rem/1.5 var(--sans); color: var(--leise); }
.formular__hinweis { grid-column: 1 / -1; 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; }

/* Öffnungszeiten, Adresse, Bild */
.standort { display: grid; grid-template-columns: 1.75fr 1fr .85fr; gap: 10px; background: rgba(226, 219, 205, .45); }
.standort__kasten { 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: 20px; }
.standort__bild { position: relative; min-height: 360px; }
.standort__bild picture, .standort__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.standort__bild .hinweis { position: absolute; right: 22px; top: 22px; background: rgba(236, 230, 218, .92); padding: 14px 16px; max-width: 190px; color: var(--tinte); }
/* Öffnungszeiten (01.10.2026): Tage links, rechts je Zeile „Art + Uhrzeit“ (Geöffnet, Warme Küche). Die Art hat eine
   feste Breite, dadurch stehen alle Uhrzeiten in Sommer und Winter untereinander. */
.zeiten { width: 100%; border-collapse: collapse; font-size: 1rem; color: var(--tinte); }
.zeiten th, .zeiten td { text-align: left; vertical-align: baseline; padding: 7px 14px 7px 0; }
.zeiten td { padding-right: 0; font-variant-numeric: tabular-nums; }
.zeiten tbody th[scope="row"] { width: 40%; font-weight: 400; }
.zeiten__saison th { padding: 18px 0 6px; border-top: 1px solid var(--linie); font: 600 .74rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.saison:first-of-type .zeiten__saison th { border-top: 0; padding-top: 0; }
.zeit { display: grid; grid-template-columns: 112px 1fr; column-gap: 12px; align-items: baseline; }
.zeit + .zeit { margin-top: 5px; }
.zeit__art { font: 600 .7rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.zeiten__ruhe { color: var(--leise); }
.zeiten__hinweis { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linie); font-size: .92rem; line-height: 1.5; color: var(--leise); }
.saison__jetzt { display: none; margin-left: 8px; vertical-align: 1px; font: 600 .62rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--rot); padding: 3px 7px 2px; }
.saison--jetzt .saison__jetzt { display: inline-block; }
.ferien { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid var(--rot); background: rgba(193, 57, 43, .07); font-size: .98rem; color: var(--tinte); }
.kontaktliste { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.kontaktliste a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border-bottom: 1px solid transparent; }
.kontaktliste a:hover { border-bottom-color: currentColor; }
.kontaktliste svg { width: 17px; height: 17px; flex: none; color: var(--rot); }
.adresse { font-size: 1.08rem; color: var(--tinte); }

/* Speisekarte */
.chips { position: sticky; top: calc(var(--kopf, 74px) - 1px); z-index: 20; background: rgba(236, 230, 218, .96); border-block: 1px solid var(--linie); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* position: relative, damit das unsichtbare Label „Suchen“ im Scrollbereich bleibt; sonst ragte es aus der
   klebenden Leiste und machte die Speisekarte am Handy breiter als den Bildschirm (30.09.2026) */
.chips .innen { position: relative; display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.chips .innen::-webkit-scrollbar { display: none; }
.chips a { flex: none; text-decoration: none; font: 500 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--linie); background: rgba(255, 255, 255, .35); }
.chips a:hover { border-color: var(--tinte); }
.suche { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--tinte); padding: 4px 2px; }
.suche svg { width: 17px; height: 17px; color: var(--leise); }
.suche input { border: 0; background: transparent; font: 400 1rem var(--serif); color: var(--tinte); width: 220px; padding: 6px 0; }
.suche input:focus { outline: 0; }
.karte { padding: 50px 0 90px; }
.karten-hinweis { margin: 0 0 6px; padding: 14px 18px; border-left: 3px solid var(--gruen); background: rgba(47, 59, 45, .07); color: var(--tinte); font-size: 1rem; }
.karte-abschnitt { padding: 44px 0 20px; scroll-margin-top: calc(var(--kopf, 74px) + 56px); }
.karte-abschnitt__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--tinte); padding-bottom: 12px; margin-bottom: 26px; }
.karte-abschnitt__kopf h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.karte-abschnitt__zahl { font: 500 .72rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--leise); white-space: nowrap; }
.karte-abschnitt__inhalt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
/* Ein Kartenblatt je Abschnitt, die Gerichte untereinander (Trung, 30.09.2026: ungleich hohe Boxen mit Lücken).
   Nummern, Namen und Preise stehen dadurch auf festen Achsen; Varianten eines Gerichts in zwei Spalten. */
.karte-liste { --einzug: 54px; background: var(--karte); border: 1px solid var(--karte-rand); padding: 6px 34px; }
/* sticky bildet einen eigenen Stapelkontext: die Mischung gehört deshalb an den Rahmen, nicht ans Bild */
.zeichnung { position: sticky; top: calc(var(--kopf, 74px) + 90px); margin: 0; text-align: center; mix-blend-mode: multiply; }
.zeichnung img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.zeichnung figcaption { margin-top: 4px; font: 500 .66rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--leise); }
.posten { padding: 22px 0 24px; border-bottom: 1px solid var(--linie); }
.posten:last-child { border-bottom: 0; }
.posten__kopf { display: flex; align-items: baseline; gap: 14px; }
.posten__nr { flex: none; width: calc(var(--einzug) - 14px); font: 500 .8rem var(--sans); letter-spacing: .06em; color: var(--rot); }
.posten--ohne-nr > .posten__kopf { padding-left: var(--einzug); }
.posten__text, .posten > .groessen, .aufpreis-hinweis { margin-left: var(--einzug); }
.posten__name .allergene { margin: 0; gap: 3px; }
.posten__name { font: 600 1.2rem/1.2 var(--serif); color: var(--tinte); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.posten__preis { margin-left: auto; flex: none; font: 500 1.08rem var(--serif); color: var(--tinte); white-space: nowrap; }
.posten__text { margin-top: 6px; margin-bottom: 0; max-width: 62ch; color: var(--leise); font-size: .96rem; line-height: 1.5; }
.chili { display: inline-flex; gap: 2px; color: var(--rot); }
.chili svg { width: 15px; height: 15px; }
.geschmack { font: 600 .64rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rot); border: 1px solid rgba(193, 57, 43, .5); padding: 3px 6px 2px; }
.allergene { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.allergene abbr { text-decoration: none; font: 600 .66rem var(--sans); color: var(--leise); border: 1px solid var(--linie); padding: 1px 5px; cursor: help; }
.varianten { list-style: none; margin-top: 12px; margin-bottom: 0; padding: 10px 0 0; border-top: 1px solid rgba(207, 198, 181, .55); columns: 2; column-gap: 56px; column-rule: 1px solid rgba(207, 198, 181, .55); }
.varianten li { display: grid; grid-template-columns: var(--einzug) 1fr auto; gap: 0; align-items: baseline; padding: 5px 0; break-inside: avoid; font-size: .98rem; }
.varianten li > .posten__preis { padding-left: 14px; }
.varianten .posten__nr { width: auto; }
.varianten small { display: block; color: var(--leise); font-size: .85rem; }
.varianten .posten__preis { font-size: 1rem; }
.aufpreis-hinweis { margin-top: 10px; margin-bottom: 0; font: 500 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.groessen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; margin-bottom: 0; font-size: .98rem; }
.groessen b { font-weight: 500; color: var(--tinte); }
.nichts { display: none; padding: 30px 0; font-size: 1.1rem; }
.legende { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 44px; margin-top: 40px; padding: 30px 34px; background: var(--karte); border: 1px solid var(--karte-rand); }
.legende h3 { font-size: 1.4rem; margin-bottom: 12px; }
.legende ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .94rem; }
.legende li b { display: inline-block; width: 1.6em; color: var(--rot); font-weight: 600; }
.legende p { font-size: .95rem; color: var(--leise); }

/* Hot Pot */
.menuekarte { max-width: 760px; margin: 0 auto; padding: 44px 48px 40px; background: var(--karte); border: 1px solid var(--karte-rand); text-align: center; position: relative; }
.menuekarte h2 { font-size: clamp(2.3rem, 3.6vw, 3.2rem); margin-bottom: 8px; }
.menuekarte .stempel { position: absolute; right: -16px; top: -16px; background: var(--papier); }
.menuekarte__zeichnung { width: 280px; max-width: 70%; margin: -14px auto 4px; mix-blend-mode: multiply; }
.menuekarte__zeichnung img { width: 100%; height: auto; }
.gang { padding: 22px 0; border-top: 1px solid var(--linie); }
.gang:first-of-type { margin-top: 24px; }
.gang h3 { font-size: 1.45rem; margin-bottom: 6px; }
.gang p { margin: 4px 0; color: var(--text); }
.gang ul { list-style: none; margin: 12px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gang li { border: 1px solid var(--linie); background: rgba(255, 255, 255, .4); padding: 5px 12px; font-size: .95rem; }
.bildreihe { display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 14px; align-items: stretch; }
.bildreihe img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* Über uns */
.geschichte { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.geschichte__bild { position: relative; }
.geschichte__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.geschichte__bild .stempel { position: absolute; left: -14px; bottom: 26px; background: var(--papier); }
.geschichte h2 { font-size: clamp(2.3rem, 3.6vw, 3.3rem); margin-bottom: 18px; }
.stationen { list-style: none; margin: 22px 0 0; padding: 0; }
.stationen li { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--linie); font-size: .98rem; }
.stationen b { font: 500 .8rem/1.7 var(--sans); letter-spacing: .08em; color: var(--rot); }
.team-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.person { background: var(--karte); border: 1px solid var(--karte-rand); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person div { padding: 14px 16px 18px; }
.person strong { display: block; font: 600 1.3rem/1.2 var(--serif); color: var(--tinte); }
.person span { display: block; margin-top: 2px; font: 500 .72rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.neue-koeche { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-top: 36px; padding: 30px 34px; background: var(--gruen); color: #ece6da; }
.neue-koeche .stempel { border-color: #e9573f; color: #f6d9d0; }
.neue-koeche h3 { color: #f4efe5; font-size: 1.8rem; margin-bottom: 8px; }
.neue-koeche p { margin: 0; color: #dcd5c7; font-size: 1.05rem; }
.film video { width: 100%; background: #111; }

/* Fenster (Speisekarte als PDF) */
.fenster-offen { overflow: hidden; }
.pdf-fenster { width: min(640px, 100% - 32px); max-width: none; padding: 32px 32px 28px; border: 1px solid var(--linie); border-radius: 0; background: var(--papier) url("bilder/tusche/papier.webp") center / 900px auto; color: var(--text); box-shadow: 0 40px 90px -30px rgba(15, 12, 8, .7); }
.pdf-fenster::backdrop { background: rgba(20, 18, 14, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pdf-fenster .etikett { padding-right: 52px; }
.pdf-fenster h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin: 0 44px 12px 0; }
.pdf-fenster__text { margin: 0 0 20px; color: var(--leise); }
.pdf-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pdf-liste a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 13px 14px; border: 1px solid var(--linie); background: rgba(255, 255, 255, .5); text-decoration: none; color: var(--tinte); font: 600 1rem/1.25 var(--serif); }
.pdf-liste a:hover { border-color: var(--tinte); }
.pdf-liste svg { width: 24px; height: 24px; flex: none; color: var(--rot); }
.pdf-liste small { display: block; margin-top: 3px; font: 500 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
/* Galerie-Großansicht (Trung, 30.09.2026) */
.feiern a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.feiern a:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.galerie { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(22, 19, 15, .95); color: #f4efe5; overflow: hidden; }
.galerie::backdrop { background: rgba(22, 19, 15, .6); }
.galerie[open] { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px; align-items: center; }
.galerie__buehne { grid-column: 2; margin: 0; height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 0 30px; }
.galerie__buehne img { display: block; max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; background: rgba(244, 239, 229, .04); }
.galerie figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font: 500 .74rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 239, 229, .82); text-align: center; }
.galerie__zahl { color: #f08a74; }
.galerie__pfeil { width: 52px; height: 52px; justify-self: center; padding: 0; border: 1px solid rgba(244, 239, 229, .5); background: transparent; color: #f4efe5; display: grid; place-items: center; cursor: pointer; }
.galerie__pfeil--zurueck { grid-column: 1; grid-row: 1; }
.galerie__pfeil--vor { grid-column: 3; grid-row: 1; }
.galerie__buehne { grid-row: 1; }
.galerie__pfeil svg { width: 20px; height: 20px; }
.galerie__pfeil:hover, .galerie__zu:hover { background: rgba(244, 239, 229, .12); }
.galerie__zu { position: absolute; top: 16px; right: 16px; z-index: 1; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(244, 239, 229, .5); background: transparent; color: #f4efe5; display: grid; place-items: center; cursor: pointer; }
.galerie__zu svg { width: 16px; height: 16px; }
.fenster__zu { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; padding: 0; border: 1px solid var(--tinte); background: transparent; color: var(--tinte); display: grid; place-items: center; cursor: pointer; }
.fenster__zu svg { width: 16px; height: 16px; }
.fenster__zu:hover { background: rgba(30, 29, 26, .06); }

/* Rechtliches und Fließtext */
.text { max-width: 820px; }
.text h2 { font-size: 1.7rem; margin: 34px 0 12px; }
.text h3 { font-size: 1.2rem; margin: 22px 0 8px; }
.text p, .text li { font-size: 1.02rem; }
.text a { color: var(--rot-dunkel); }
/* Knöpfe in einem Textblock (404-Seite) behalten ihre eigene Schriftfarbe */
.text a.knopf { color: #f4efe5; }
.text a.knopf--rand { color: var(--tinte); }

/* Fuß */
.fuss { padding: 64px 0 34px; border-top: 1px solid var(--linie); }
.fuss__oben { display: grid; grid-template-columns: auto 1fr auto; gap: 56px; align-items: start; padding-bottom: 36px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: center; padding-top: 8px; }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; }
.fuss__kontakt { margin: 0; font-size: .98rem; line-height: 1.7; }
.fuss__kontakt a { text-decoration: none; }
.fuss__unten { display: flex; flex-wrap: wrap; gap: 14px 30px; padding-top: 24px; border-top: 1px solid var(--linie); font: 400 .86rem var(--sans); color: var(--leise); }
.fuss__unten a { text-decoration: none; }
.fuss__unten span { margin-left: auto; }

/* Vorschauleiste (nur in der Vorschau) */
.vorschau { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #141210; color: #f3eee6; font: 400 13px/1.45 var(--sans); box-shadow: 0 -10px 34px rgba(0, 0, 0, .38); border-top: 1px solid rgba(255, 255, 255, .14); }
.vorschau__innen { max-width: 1440px; margin: 0 auto; padding: 10px 20px; display: flex; gap: 16px; align-items: center; }
.vorschau__marke { flex: none; background: #f2b33d; color: #141210; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-radius: 6px; padding: 5px 9px; }
.vorschau p { margin: 0; flex: 1; min-width: 0; }
.vorschau strong { color: #fff; }
.vorschau__knoepfe { display: flex; gap: 8px; flex: none; }
.vorschau a { white-space: nowrap; border: 1px solid rgba(255, 255, 255, .4); border-radius: 9px; padding: 8px 13px; font-weight: 700; font-size: 12px; text-decoration: none; color: #fff; }
.vorschau a.vorschau__haupt { background: #fff; color: #141210; border-color: #fff; }
.vorschau-platz { height: var(--vorschau, 64px); }

/* Kopfleiste mit Sprachwahl (01.10.2026): Zwischen 1101 und 1280 px brachen Menüpunkte und Zusatz um, deshalb gilt
   die kompakte Fassung (kurzer Zusatz, engere Abstände) schon ab 1280 px. */
@media (max-width: 1280px) {
  .kopf .innen { gap: 24px; }
  .kopf nav { gap: 22px; font-size: .94rem; }
  .sprache { margin: 0 -8px 0 0; }
  .marke .nur-breit { display: none; }
}
@media (max-width: 1100px) {
  /* Text beginnt hier schon bei 48 px: Tuschekreis weiter an den Rand, sonst verdeckt er „Fine Thai Cuisine“ */
  .buehne__kreis { left: -118px; top: 84px; width: 200px; }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .karte-abschnitt__inhalt { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
  .anruf { grid-template-columns: 1fr 1.6fr; }
  .anruf__bild--rechts { display: none; }
  .standort { grid-template-columns: 1fr 1fr; }
  .standort__bild { grid-column: 1 / -1; }
  .feiern { grid-template-columns: repeat(3, 1fr); }
  .team-raster { grid-template-columns: repeat(2, 1fr); }
}
/* Mit Sprachwahl und Rufnummer passt die volle Navigation unter 1040 px nicht mehr in eine Zeile: ab hier das Aufklappmenü */
@media (max-width: 1040px) {
  .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, .kopf--offen nav a:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 960px) {
  .varianten { columns: 1; }
  .buehne { grid-template-columns: 1fr; min-height: 0; }
  .buehne__links { padding: 120px 24px 44px; }
  .buehne__kreis { left: auto; right: -62px; top: 84px; width: 150px; }
  .buehne__zeichen { display: none; }
  .buehne__bild { min-height: 440px; }
  .seitenkopf { padding: 118px 0 40px; }
  .seitenkopf__kreis { width: 140px; right: -64px; top: 64px; }
  .seitenkopf__raster, .zweier, .geschichte, .reservieren__karte { grid-template-columns: 1fr; gap: 34px; }
  .zweier--umgekehrt > :first-child { order: 0; }
  .zutaten { grid-template-columns: 1fr; }
  .zutaten__gruen { padding: 56px 24px; }
  .zutaten__zeichnungen { padding: 40px 24px 50px; }
}
@media (max-width: 760px) {
  .galerie[open] { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .galerie__buehne { grid-column: 1 / -1; grid-row: 1; padding: 70px 10px 6px; }
  .galerie__buehne img { max-height: calc(100dvh - 190px); }
  .galerie__pfeil--zurueck { grid-column: 1; grid-row: 2; margin-bottom: 26px; }
  .galerie__pfeil--vor { grid-column: 2; grid-row: 2; margin-bottom: 26px; }
  body { font-size: 16.5px; }
  .innen { width: min(var(--innen), 100% - 32px); }
  html { scroll-padding-top: 76px; }
  .kopf .innen { min-height: 70px; gap: 12px; }
  .kopf--fest .innen { min-height: 62px; }
  /* min(rem, vw): Auf schmalen Handys (ab 320 px, etwa bei großer Anzeigegröße) und bei vergrößerter Schrift schob sich
     der Telefonknopf über „Patcharawadee“ (Frau Keidels Handy, 01.10.2026). So bleibt die Marke immer neben den Knöpfen. */
  .marke { --name: min(1.45rem, 6.6vw); --zusatz: min(.55rem, 2.5vw); }
  .marke__zusatz { letter-spacing: .16em; }
  .kopf .knopf span { display: none; }
  .sprache { display: none; }
  .kopf--offen nav .nav__sprache { display: flex; align-items: center; gap: 10px; }
  .kopf--offen nav a:nth-last-child(2) { border-bottom: 1px solid var(--linie); }
  .nav__sprache svg { width: 18px; height: 18px; flex: none; color: var(--rot); }
  .kopf .knopf { padding: 0 13px; min-height: 44px; }
  .nur-breit { display: none; }
  .abschnitt { padding: 64px 0; }
  .kacheln { gap: 14px; }
  .kachel > div { padding: 14px 14px 18px; }
  .kachel h3 { font-size: 1.12rem; }
  .kachel p { font-size: .9rem; }
  .zutaten__zeichnungen { grid-template-columns: repeat(2, 1fr); }
  .zutaten__zeichnungen .stempel { display: none; }
  .bildstapel { grid-template-columns: 1fr 1fr; }
  .feiern { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .feiern .breit { grid-column: span 2; }
  .anruf { grid-template-columns: 1fr; padding: 50px 0; }
  .anruf__bild--links { display: none; }
  .formular { grid-template-columns: 1fr 1fr; padding: 24px 18px 22px; }
  .standort { grid-template-columns: 1fr; }
  .standort__kasten, .standort__kasten + .standort__kasten { padding: 40px 18px; }
  /* Handy: Tag als eigene Zeile, darunter die Zeiten mit ihrer Art */
  .zeiten tr { display: block; padding: 6px 0; }
  .zeiten th, .zeiten td { display: block; padding: 0; }
  .zeiten tbody th[scope="row"] { width: auto; font-weight: 600; margin-bottom: 4px; }
  .zeiten tr:has(.zeiten__ruhe) { display: grid; grid-template-columns: 124px 1fr; align-items: baseline; }
  .zeiten tr:has(.zeiten__ruhe) th[scope="row"] { margin-bottom: 0; }
  .zeiten__ruhe .zeit { display: block; }
  .zeiten__saison { padding-bottom: 0 !important; }
  .zeiten__saison th { padding: 16px 0 2px; }
  .standort__bild { min-height: 280px; }
  .chips .innen { width: 100%; padding: 10px 16px; }
  .suche input { width: 150px; }
  .karte-abschnitt__inhalt { grid-template-columns: 1fr; }
  .karte-liste { --einzug: 40px; padding: 2px 16px; }
  .zeichnung { position: static; order: -1; max-width: 190px; margin: -10px auto 0; }
  .posten { padding: 18px 0 20px; }
  .posten__name { font-size: 1.1rem; }
  .legende { grid-template-columns: 1fr; padding: 24px 20px; }
  .menuekarte { padding: 34px 20px 30px; }
  .menuekarte .stempel { right: 8px; top: -18px; }
  .bildreihe { grid-template-columns: 1fr 1fr; }
  .bildreihe > :first-child { grid-column: 1 / -1; }
  .bildreihe > :first-child img { aspect-ratio: 4 / 3; }
  .stationen li { grid-template-columns: 1fr; gap: 2px; }
  .team-raster { gap: 14px; }
  .person div { padding: 10px 12px 14px; }
  .person strong { font-size: 1.12rem; }
  .person span { font-size: .64rem; letter-spacing: .1em; }
  .neue-koeche { grid-template-columns: 1fr; padding: 26px 20px; gap: 16px; }
  .fuss__oben { grid-template-columns: 1fr; gap: 26px; }
  .fuss nav { justify-content: flex-start; }
  .fuss__unten span { margin-left: 0; }
  .pdf-fenster { width: calc(100% - 20px); padding: 26px 18px 20px; }
  .pdf-liste { grid-template-columns: 1fr; }
  .vorschau__innen { flex-wrap: wrap; gap: 8px 12px; padding: 9px 14px; }
  .vorschau p { flex-basis: calc(100% - 80px); }
  .vorschau__lang { display: none; }
  .vorschau__knoepfe { width: 100%; }
  .vorschau__knoepfe a { flex: 1; text-align: center; }
}
@media (max-width: 370px) {
  .kopf .innen { gap: 8px; }
  .marke { gap: 8px; }
}
@media (max-width: 480px) {
  /* Zeile über der Überschrift der Startseite zweizeilig, sonst läuft „Freiburger“ in den Tuschekreis */
  .buehne .etikett__punkt { display: none; }
  .buehne .etikett__ort { display: block; }
  .formular { grid-template-columns: minmax(0, 1fr); }
  /* „Per WhatsApp vorbestellen“ ist als Knopf mit Rand 316 px breit: Auf schmalen Handys darf er umbrechen und füllt die Zeile */
  .formular .knopf { width: 100%; white-space: normal; text-align: center; padding: 10px 18px; }
  .buehne h1 { font-size: 2.6rem; }
  .kacheln { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feiern img, .kopf, .kopf .innen, .sprache summary, .sprache summary svg:last-child { transition: none; }
}