/* ===========================================================================
   steki.css — Bausteine, die das Flotten-Kit nicht mitbringt.
   1:1 nachgebaut aus der Taverne Mykonos (Next.js/Tailwind), hier als
   reines CSS in der Farbwelt der Taverne Zorba.

   Quellen der Masse (alle aus dem Taverne-Code uebernommen, nicht geschaetzt):
     · Maeander        globals.css @utility meander (13x13 Maske, 78px breit)
     · Google-Karten   GoogleReviews.tsx  (w-330, size-10 Avatar, #fbbc04)
     · Chatbot         Chatbot.tsx        (bottom-5 right-5, 380px Blatt)
     · Reservierung    ReservationModal.tsx (940px, 300px Markenspalte)
   =========================================================================== */

/* ---------------------------------------------------------------- Maeander */
/* Griechischer Schluessel. Farbe folgt dem Akzent ueber eine Maske, damit sie
   sich mit der Marke aendert, statt im SVG festzustehen. */
.maeander {
  display: block;
  height: 13px;
  width: 78px;
  flex: none;
  background-color: var(--accent);
  opacity: 0.75;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1 12V1h11v7H6V5h3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1 12V1h11v7H6V5h3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 13px 13px;
  mask-size: 13px 13px;
}
/* Der Kit-Eyebrow traegt einen Strich als ::before — der weicht dem Maeander. */
.eyebrow--gr { display: inline-flex; align-items: center; gap: 14px; }
.eyebrow--gr::before { display: none !important; }
.section-head.center .eyebrow--gr { justify-content: center; }

/* Maeander als Trennband ueber die volle Breite, dezent */
.maeander-band {
  height: 13px;
  width: 100%;
  background-color: var(--accent);
  opacity: 0.22;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1 12V1h11v7H6V5h3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1 12V1h11v7H6V5h3' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 13px 13px;
  mask-size: 13px 13px;
}

/* ------------------------------------------------ Google-Rezensionen */
.g-sektion { background: var(--surface); overflow: hidden; padding: 80px 0; }
@media (min-width: 1024px) { .g-sektion { padding: 112px 0; } }

.g-kopf { max-width: 42rem; margin: 0 auto; text-align: center; }
.g-kopf h2 {
  margin-top: 16px;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--ink);
  text-wrap: balance;
}
.g-kopf h2 em { font-style: normal; color: var(--accent-ink); }

/* Die Sektion steht auf hellem Grund. Der helle Akzent kommt dort auf 1,64:1
   — gemessen am 22.09.2026. Auf Hell gilt der dunkle Akzent, wie in der
   Taverne (dort tone="light" -> saffron-ink). Gilt fuer Text UND Ornament. */
.g-kopf .eyebrow--gr { color: var(--accent-ink); }
.g-kopf .maeander { background-color: var(--accent-ink); opacity: 0.55; }

/* Vertrauens-Plakette unter der Ueberschrift */
.g-plakette {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(19, 36, 59, 0.12);
  background: #fff;
  padding: 10px 20px;
  box-shadow: 0 1px 2px rgba(19, 36, 59, 0.06);
}
.g-plakette__text { font-size: 15px; font-weight: 500; color: var(--ink); }
.g-plakette__pruef {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #0b8043;
}

/* Laufband mit weichen Raendern */
.g-band {
  position: relative;
  margin-top: 48px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.g-spur {
  display: flex;
  width: max-content;
  gap: 20px;
  padding: 0 10px;
  animation: g-lauf var(--g-dauer, 70s) linear infinite;
}
@keyframes g-lauf { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--g-weg, -50%), 0, 0); } }
.g-band:hover .g-spur { animation-play-state: paused; }

.g-karte {
  display: flex;
  width: 330px;
  flex-shrink: 0;
  flex-direction: column;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(19, 36, 59, 0.12);
  background: #fff;
  padding: 24px;
  box-shadow: 0 24px 50px -42px rgba(19, 36, 59, 0.5);
}
.g-karte__kopf { display: flex; align-items: center; gap: 12px; }
.g-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 16px;
  color: #fff;
}
.g-karte__wer { min-width: 0; flex: 1; }
.g-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
}
.g-quelle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}
.g-haken { width: 14px; height: 14px; color: #1a73e8; flex: none; }
.g-logo { width: 24px; height: 24px; flex: none; }
.g-sterne { display: flex; color: #fbbc04; margin-top: 12px; }
.g-karte blockquote {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-fuss { margin-top: 48px; text-align: center; }
.g-knopf {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(19, 36, 59, 0.2);
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.2s;
}
.g-knopf:hover { border-color: var(--accent); }

/* ------------------------------------------------------- Feiern & Anlaesse */
.anlaesse { display: grid; gap: 18px; margin-top: 44px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .anlaesse { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .anlaesse { grid-template-columns: 1fr; } }
.anlass {
  position: relative;
  border-radius: var(--radius-card, 18px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 26px 24px 24px;
  transition: transform 0.35s var(--ease-out-soft, ease), border-color 0.35s;
}
.anlass:hover { transform: translateY(-4px); border-color: rgb(var(--c-accent-rgb, 217 162 63) / 0.45); }
.anlass__zeichen {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgb(var(--c-accent-rgb, 217 162 63) / 0.35);
  color: var(--accent);
  margin-bottom: 16px;
}
.anlass h3 { font-family: var(--font-display); font-size: 1.28rem; color: var(--text); }
.anlass p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--text-soft); }

/* --------------------------------------------------------------- Chatbot */
.chat-knopf {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 80;
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: var(--on-accent, #050E1C);
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 14px 34px -14px rgb(var(--c-accent-rgb, 217 162 63) / 0.55);
  transition: transform 0.3s;
}
.chat-knopf:hover { transform: scale(1.05); }
.chat-knopf:active { transform: scale(0.95); }
.chat-punkt {
  position: absolute;
  right: -2px;
  top: -2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: #e23c3c;
}
.chat-blatt {
  position: fixed;
  bottom: 92px;
  right: 20px;
  z-index: 80;
  display: none;
  max-height: min(620px, calc(100dvh - 120px));
  width: min(380px, calc(100vw - 32px));
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(19, 36, 59, 0.1);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(19, 36, 59, 0.28);
}
.chat-blatt.ist-offen { display: flex; animation: chat-auf 0.26s var(--ease-out-soft, ease) both; }
@keyframes chat-auf { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
.chat-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(19, 36, 59, 0.1);
  background: #fff;
  padding: 14px 16px;
}
.chat-kopf__marke {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg-2);
}
.chat-kopf__marke img { width: 85%; height: auto; }
.chat-kopf__wer { min-width: 0; flex: 1; }
.chat-kopf__wer strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  font-weight: 400;
}
.chat-kopf__wer span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.chat-kopf__wer i { width: 6px; height: 6px; border-radius: 999px; background: #0b8043; }
.chat-zu {
  margin-left: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.chat-zu:hover { background: rgba(19, 36, 59, 0.05); }
.chat-verlauf {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  background: var(--surface);
  padding: 16px;
}
.chat-blase {
  max-width: 85%;
  white-space: pre-line;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 14.5px;
  line-height: 1.65;
}
.chat-blase--bot { align-self: flex-start; border-bottom-left-radius: 6px; border: 1px solid rgba(19, 36, 59, 0.1); background: #fff; color: var(--ink); }
.chat-blase--ich { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--accent); color: var(--on-accent, #050E1C); }
.chat-tippt { display: flex; gap: 6px; align-self: flex-start; border-radius: 16px; border-bottom-left-radius: 6px; border: 1px solid rgba(19, 36, 59, 0.1); background: #fff; padding: 14px 16px; }
.chat-tippt i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-soft); animation: chat-huepf 1s infinite; }
@keyframes chat-huepf { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px); } }
.chat-taten { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.chat-tat {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border-radius: 999px;
  background: var(--accent);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-accent, #050E1C);
  border: 0;
  cursor: pointer;
}
.chat-tat:hover { background: var(--accent-soft); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; background: var(--surface); padding: 0 16px 12px; }
.chat-chip {
  min-height: 36px;
  border-radius: 999px;
  border: 1.5px solid rgb(var(--c-accent-rgb, 217 162 63) / 0.45);
  background: #fff;
  padding: 0 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.chat-chip:hover { background: var(--accent); color: var(--on-accent, #050E1C); }
.chat-zeile { display: flex; gap: 8px; border-top: 1px solid rgba(19, 36, 59, 0.1); background: #fff; padding: 12px; }
.chat-feld {
  min-width: 0;
  flex: 1;
  border-radius: 999px;
  border: 1.5px solid rgba(19, 36, 59, 0.15);
  background: #fff;
  padding: 10px 16px;
  font-size: 16px; /* unter 16px zoomt iOS beim Tippen hinein */
  color: var(--ink);
  font-family: inherit;
}
.chat-feld::placeholder { color: rgba(70, 88, 110, 0.7); }
.chat-feld:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-senden {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent, #050E1C);
  cursor: pointer;
}
.chat-fuss { background: #fff; padding: 0 12px 10px; text-align: center; font-size: 10.5px; color: rgba(70, 88, 110, 0.7); }
@media (max-width: 640px) {
  .chat-blatt { inset: 0; height: 100dvh; max-height: none; width: 100%; border-radius: 0; border: 0; bottom: auto; right: auto; }
  .chat-kopf { padding-top: calc(env(safe-area-inset-top) + 14px); }
  .chat-fuss { padding-bottom: calc(env(safe-area-inset-bottom) + 10px); }
}

/* ---------------------------------------------------------- Reservierung */
.res-grund {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(5 14 28 / 0.65);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.res-grund.ist-offen { opacity: 1; pointer-events: auto; }
@media (min-width: 640px) { .res-grund { align-items: center; padding: 24px; } }

.res-fenster {
  display: flex;
  max-height: 94dvh;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 40px 120px -30px rgba(7, 17, 32, 0.7);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 260ms var(--ease-out-expo, cubic-bezier(.16,1,.3,1)), opacity 260ms;
  outline: none; /* wird per focus() angesprungen — der Ring gehoert nicht aufs Fenster */
}
.res-fenster:focus-visible { outline: none; }
.res-grund.ist-offen .res-fenster { transform: none; opacity: 1; }
@media (min-width: 640px) {
  .res-fenster { max-height: 88dvh; max-width: 940px; flex-direction: row; border-radius: 28px; transform: scale(0.97); }
  .res-grund.ist-offen .res-fenster { transform: none; }
}

/* Linke Markenspalte */
.res-marke {
  position: relative;
  display: none;
  width: 300px;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: var(--bg-1);
  padding: 32px;
  color: var(--text);
}
@media (min-width: 640px) { .res-marke { display: flex; } }
.res-marke__schimmer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.7;
  background:
    radial-gradient(420px 300px at 110% -10%, rgba(28, 66, 114, 0.55), transparent 60%),
    radial-gradient(360px 320px at -20% 120%, rgb(var(--c-accent-rgb, 217 162 63) / 0.16), transparent 55%);
}
.res-marke__oben { position: relative; }
.res-marke__oben img { height: 96px; width: auto; display: block; }
.res-marke__oben p { margin-top: 24px; max-width: 22ch; font-size: 15px; line-height: 1.65; color: var(--text-soft); text-wrap: pretty; }
.res-marke__unten { position: relative; font-size: 13.5px; color: var(--text-soft); }
.res-marke__unten > * + * { margin-top: 16px; }
.res-strich { height: 1px; width: 100%; background: var(--line-strong); }
.res-marke__unten b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-soft);
}
.res-marke__unten a { color: var(--text); }
.res-marke__unten a:hover { color: var(--accent-soft); }

/* Rechte Spalte */
.res-rechts { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.res-handykopf { display: flex; align-items: center; justify-content: space-between; background: var(--bg-1); padding: 16px 20px; }
.res-handykopf img { height: 44px; width: auto; }
@media (min-width: 640px) { .res-handykopf { display: none; } }

.res-reiter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(19, 36, 59, 0.1);
  padding: 16px 20px 0;
}
@media (min-width: 640px) { .res-reiter { padding: 16px 28px 0; } }
.res-reiter__liste { display: flex; gap: 4px; }
.res-reiter button {
  position: relative;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 4px 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
@media (min-width: 640px) { .res-reiter button { padding-left: 12px; padding-right: 12px; font-size: 14.5px; } }
.res-reiter button:hover { color: var(--ink); }
.res-reiter button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); }
.res-zu {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s;
}
.res-zu:hover { background: rgba(19, 36, 59, 0.05); }
.res-zu--hell { color: var(--text); }
.res-zu--hell:hover { background: var(--bg-2); }
.res-zu--gross { display: none; }
@media (min-width: 640px) { .res-zu--gross { display: grid; } }

.res-inhalt { min-height: 0; flex: 1; overflow-y: auto; padding: 24px 20px 0; }
@media (min-width: 640px) { .res-inhalt { padding: 24px 28px; } }
.res-inhalt h2 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.res-inhalt > p.res-unter { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }

/* Schrittbalken */
.res-schritte { margin: 20px 0; display: flex; align-items: center; gap: 6px; }
.res-schritte span { height: 6px; border-radius: 999px; background: rgba(19, 36, 59, 0.15); width: 12px; transition: all 0.3s; }
.res-schritte span.ist-da { width: 28px; background: var(--accent); }

.res-feldname { margin-bottom: 6px; display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.res-feld {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(19, 36, 59, 0.15);
  background: #fff;
  padding: 12px 16px;
  font-size: 16px; /* iOS zoomt unter 16px hinein */
  color: var(--ink);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.res-feld::placeholder { color: rgba(19, 36, 59, 0.4); }
.res-feld:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgb(var(--c-accent-rgb, 217 162 63) / 0.25); }
textarea.res-feld { resize: vertical; min-height: 68px; }

/* Kalender */
.res-gitter { display: grid; gap: 24px; }
@media (min-width: 640px) { .res-gitter { grid-template-columns: minmax(0, 1fr) 180px; } }
.kal { border-radius: 16px; border: 1px solid rgba(19, 36, 59, 0.1); padding: 14px; }
.kal__kopf { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.kal__kopf span { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.kal__nav {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s;
}
.kal__nav:hover:not(:disabled) { background: rgba(19, 36, 59, 0.05); }
.kal__nav:disabled { opacity: 0.25; cursor: default; }
.kal__tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.kal__wt { padding: 4px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.kal__tag {
  margin: 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
}
.kal__tag:hover:not(:disabled) { background: rgb(var(--c-accent-rgb, 217 162 63) / 0.15); }
.kal__tag:disabled { color: rgba(19, 36, 59, 0.25); text-decoration: line-through; cursor: default; }
.kal__tag.ist-gewaehlt { background: var(--accent); font-weight: 600; color: var(--on-accent, #050E1C); }

/* Personen-Stepper */
.res-stufe { display: flex; align-items: center; gap: 12px; }
.res-stufe button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(19, 36, 59, 0.15);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s;
}
.res-stufe button:hover:not(:disabled) { border-color: rgb(var(--c-accent-rgb, 217 162 63) / 0.6); }
.res-stufe button:disabled { opacity: 0.3; cursor: default; }
.res-stufe__zahl { width: 32px; text-align: center; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.res-mehr { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.res-mehr button {
  border: 0;
  background: none;
  padding: 0;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* Pillen (Uhrzeit, Anlass) */
.res-pille {
  border-radius: 999px;
  border: 1px solid rgba(19, 36, 59, 0.15);
  background: #fff;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.res-pille:hover { border-color: rgb(var(--c-accent-rgb, 217 162 63) / 0.5); color: var(--ink); }
.res-pille.ist-gewaehlt {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent, #050E1C);
  box-shadow: 0 8px 22px -12px rgb(var(--c-accent-rgb, 217 162 63) / 0.6);
}
.res-pillen { display: flex; flex-wrap: wrap; gap: 8px; }

/* Zusammenfassung auf Schritt 2 */
.res-merk { border-radius: 12px; background: var(--surface); padding: 12px 16px; font-size: 14px; color: var(--ink); }
.res-merk b { font-weight: 600; }

/* Fussleiste mit den Knoepfen */
.res-leiste {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin: 16px -20px 0;
  border-top: 1px solid rgba(19, 36, 59, 0.1);
  background: rgba(255, 255, 255, 0.95);
  padding: 12px 20px;
  backdrop-filter: blur(4px);
}
@media (min-width: 640px) {
  .res-leiste { position: static; margin: 8px 0 0; border: 0; background: none; padding: 4px 0; backdrop-filter: none; }
}
.res-hinweis { margin-bottom: 8px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
@media (min-width: 640px) { .res-hinweis { text-align: left; } }
.res-knoepfe { display: flex; gap: 12px; }
.res-haupt {
  display: inline-flex;
  min-height: 50px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  padding: 0 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-accent, #050E1C);
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 14px 34px -14px rgb(var(--c-accent-rgb, 217 162 63) / 0.55);
  transition: transform 0.2s, background 0.2s;
}
.res-haupt:hover:not(:disabled) { transform: translateY(-2px); background: var(--accent-soft); }
.res-haupt:disabled { cursor: not-allowed; opacity: 0.4; transform: none; }
.res-zurueck {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(19, 36, 59, 0.2);
  background: none;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s;
}
.res-zurueck:hover { border-color: rgba(19, 36, 59, 0.45); }
.res-klein { font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.res-paar { display: grid; gap: 16px; }
@media (min-width: 640px) { .res-paar { grid-template-columns: 1fr 1fr; } }
.res-stapel > * + * { margin-top: 16px; }
.res-gruppe > * + * { margin-top: 24px; }

/* Erfolgsansicht */
.res-fertig { padding: 16px 0 24px; text-align: center; }
.res-fertig__zeichen {
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgb(var(--c-accent-rgb, 217 162 63) / 0.14);
  color: var(--accent-ink);
}
.res-fertig h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.res-fertig p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .g-spur { animation: none; }
  .chat-blatt.ist-offen { animation: none; }
  .res-fenster, .res-grund { transition: none; }
  .chat-tippt i { animation: none; }
}


/* ---------------------------------------------- Kontaktband (Zeiten & Anfahrt)
   Die Vorlage traegt das Flex-Layout als Inline-Stil; bei 390 px bricht es nicht
   um und quetscht die Adresse aus dem Bild (gemessen: 337–412 px bei 390 px
   Fenster). Hier steht es als Klasse und bricht ab 620 px sauber auf eine
   Spalte. Die Adresse bleibt in jeder Breite ganz lesbar. */
.kontaktband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
  padding: 22px 28px;
}
.kontaktband > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kontaktband b { display: block; white-space: nowrap; }
.kontaktband span { font-size: 13px; color: var(--text-soft); white-space: nowrap; }
@media (max-width: 620px) {
  .kontaktband { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 22px; }
  .kontaktband > div { width: 100%; }
}

/* --------------------------------- Google-Sektion auf hellem Grund
   Zurueck auf --surface (Ansage vom 22.09.2026, zweite Runde). Auf Hell gilt
   der dunkle Akzent: der helle kommt dort nur auf 1,64:1 (gemessen), der
   dunkle auf 5,99:1. Das steht weiter oben schon so und bleibt gueltig. */
.g-sektion { background: var(--surface); }
.g-kopf h2 { color: var(--ink); }
.g-kopf h2 em { color: var(--accent-ink); }
.g-knopf { border-color: rgba(19, 36, 59, 0.2); color: var(--ink); }
.g-knopf:hover { border-color: var(--accent); }

/* ======================================================= Aus unserer Kueche
   1:1 nach app/page.tsx der Taverne: vier Bogenkacheln, gestaffelt versetzt,
   Titel unten im Bild, darunter eine weisse Leiste mit drei Merkmalen.
   Kachelrahmen: topRadius 170, Verhaeltnis 3/3.7 — beides uebernommen. */
.kuechen-raster { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
@media (max-width: 1024px) { .kuechen-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kuechen-raster { grid-template-columns: 1fr; } }

.kuechen-kachel {
  position: relative;
  aspect-ratio: 3 / 3.7;
  overflow: hidden;
  border: 1px solid rgb(var(--c-accent-rgb) / 0.35);
  border-radius: 170px 170px 22px 22px;
  box-shadow: 0 40px 90px -42px rgba(0, 0, 0, 0.6);
}
/* Jede zweite Kachel sitzt tiefer — der Versatz aus der Vorlage. */
@media (min-width: 1025px) { .kuechen-kachel.ist-tief { margin-top: 42px; } }
.kuechen-kachel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}
.kuechen-kachel:hover img { transform: scale(1.045); }
.kuechen-kachel figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 64px 22px 20px;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg-0) 88%, transparent));
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
}

.kuechen-leiste {
  display: flex; flex-direction: column; gap: 24px;
  margin-top: 20px;
  border-radius: var(--radius-card, 18px);
  border: 1px solid rgba(19, 36, 59, 0.12);
  background: #fff;
  padding: 24px;
}
@media (min-width: 1024px) {
  .kuechen-leiste { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; padding: 28px; }
}
.kuechen-leiste__merkmale { display: grid; flex: 1; gap: 20px; }
@media (min-width: 640px) { .kuechen-leiste__merkmale { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kuechen-leiste__merkmale { gap: 32px; } }
.kuechen-leiste__tat { flex: none; }
.merkmal { display: flex; align-items: flex-start; gap: 14px; }
.merkmal .flagge { width: 32px; height: 22px; flex: none; margin-top: 2px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.merkmal__zeichen { flex: none; margin-top: 2px; color: var(--accent-ink); }
.merkmal__titel { font-weight: 600; color: var(--ink); }
.merkmal__unter { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }

/* =========================================================== Die Taverne
   1:1 nach FiloxeniaSection.tsx: dunkle Flaeche mit Lichtschein oben rechts,
   links die Bildcollage (Hauptbild 86 % im Bogen mit topRadius 260, kleines
   Bild 54 % haengt unten rechts heraus, 6 px Rand in der Grundfarbe),
   rechts Text, sechs Merkmale, drei Kennzahlen. */
.tav { position: relative; overflow: hidden; background: var(--bg-1); padding: 80px 0; }
@media (min-width: 1024px) { .tav { padding: 112px 0; } }
.tav__schein {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 88% 0%, rgba(28, 66, 114, 0.4), transparent 60%);
}
.tav__raster { position: relative; z-index: 10; display: grid; align-items: center; gap: 56px; }
@media (min-width: 1024px) { .tav__raster { grid-template-columns: 0.92fr 1.08fr; gap: 80px; } }

.tav__collage { position: relative; width: 100%; max-width: 440px; margin: 0 auto; padding-bottom: 56px; }
.tav__gross { width: 86%; overflow: hidden; border: 1px solid rgb(var(--c-accent-rgb) / 0.35);
  border-radius: 260px 260px 22px 22px; box-shadow: 0 40px 90px -42px rgba(0,0,0,.6); aspect-ratio: 0.8; }
.tav__gross img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tav__klein {
  position: absolute; bottom: 0; inset-inline-end: 0; width: 54%;
  overflow: hidden; border-radius: 18px;
  border: 6px solid var(--bg-1);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.8);
  aspect-ratio: 4 / 3;
}
.tav__klein img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tav__h2 { margin-top: 16px; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; color: var(--text); text-wrap: balance; }
.tav__h2 em { font-style: normal; color: var(--accent-soft); }
.tav__absaetze { margin-top: 20px; }
.tav__absaetze p { color: var(--text-soft); line-height: 1.7; text-wrap: pretty; }
.tav__absaetze p + p { margin-top: 16px; }
.tav__signatur { margin-top: 24px; display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text); }
.tav__signatur span { font-weight: 600; }
.tav__merkmale { list-style: none; margin-top: 28px; display: grid; gap: 14px 32px; padding: 0; }
@media (min-width: 640px) { .tav__merkmale { grid-template-columns: 1fr 1fr; } }
.tav__merkmale li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text); }
.tav-merkmal__zeichen {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 10px; background: rgb(var(--c-accent-rgb) / 0.14); color: var(--accent-soft);
}
.tav__zahlen { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 28px; }
@media (max-width: 560px) { .tav__zahlen { grid-template-columns: 1fr; gap: 18px; } }
.tav-zahl__wert { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; color: var(--text); }
.tav-zahl__wert span { font-size: 1rem; color: var(--accent-soft); }
.tav-zahl__text { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--text-soft); }

/* ================================================ "Das Haus": zweites Bild
   Dieselbe Collage-Technik wie bei der Taverne — ein kleines Bild haengt
   unten rechts ueber den Bogen, mit Rand in der Flaechenfarbe. */
.haus-collage { position: relative; padding-bottom: 46px; }
.haus-collage .arch { width: 88%; }
.haus-zweit {
  position: absolute; bottom: 0; inset-inline-end: 0; width: 50%;
  overflow: hidden; border-radius: 18px;
  border: 6px solid var(--surface);
  box-shadow: 0 30px 60px -28px rgba(19, 36, 59, 0.45);
  aspect-ratio: 4 / 3; margin: 0;
}
.haus-zweit img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) {
  .haus-collage { max-width: 460px; margin-inline: auto; }
}


/* ======================================== Sektionsuebergaenge (Silhouette)
   Aufbau 1:1 nach SkylineDivider.tsx der Taverne Mykonos: ein Kasten in der
   Farbe der Sektion darueber, darin ein SVG-Pfad in der Farbe der Sektion
   darunter. Die Farben kommen als Inline-Werte und zeigen auf die Token,
   damit die Uebergaenge dem Variantenwechsel folgen (Cmd+1 / Cmd+2).

   Das 1 px Ueberlappen nach oben und unten ist kein Schoenheitsfehler: ohne
   das blitzt an der Naht der Body-Grund als feiner Strich durch. */
.trenner {
  position: relative;
  z-index: 2;
  margin-top: -1px;
  margin-bottom: -1px;
  line-height: 0;
}
.trenner svg { display: block; width: 100%; }

/* Der Hero endet im laufenden Film, nicht in seiner Grundfarbe (gemessen:
   rgb(27,30,30) statt rgb(5,14,28)). Ohne dieses Ausblenden saesse die erste
   Silhouette auf einer sichtbaren Kante. Liegt ueber Film und Scrims, aber
   unter Text und "Entdecken"-Hinweis. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 190px;
  background: linear-gradient(to bottom in oklab, transparent, var(--bg-0));
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------- Verschachtelte Raster auf dem Handy
   "Zeiten & Anfahrt" traegt sein zweispaltiges Raster als Inline-Stil an einem
   div INNERHALB von .wrap — die frueher eingebaute Regel traf nur .wrap selbst
   und liess dieses hier stehen. Gemessen bei 390 px: Spalten von 231 und
   287 px in einem 350 px breiten Behaelter, das Kontaktband lief dadurch von
   285 bis 572 px, also 182 px aus dem Bild. */
@media (max-width: 880px) {
  .section [style*="grid-template-columns"],
  .section .wrap[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* ===========================================================================
   SPRACHUMSCHALTER  ·  22.09.2026
   Vorbild ist die Leiste aus Lukes Vorlage: Globus, Kuerzel, Pfeil — ohne
   Flaggen. Das Blatt traegt die Eigennamen der Sprachen in eigener Schrift,
   weil „Ελληνικά" ein Grieche erkennt und „Griechisch" nicht.
   =========================================================================== */

.sprachwahl { position: relative; flex: none; }

.sprachwahl__knopf {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 10px 10px; border: 0; background: none;
  font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-soft); cursor: pointer; border-radius: var(--radius-sm);
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.sprachwahl__knopf:hover { color: var(--text); background: rgba(255,255,255,.07); }
.sprachwahl__knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprachwahl__globus { flex: none; opacity: .9; }
.sprachwahl__kurz { font-variant-numeric: tabular-nums; }
.sprachwahl__pfeil { flex: none; opacity: .7; transition: transform var(--dur-fast) ease; }
.sprachwahl__knopf[aria-expanded="true"] .sprachwahl__pfeil { transform: rotate(180deg); }
.sprachwahl__knopf[aria-expanded="true"] { color: var(--text); }

.sprachwahl__blatt {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70;
  min-width: 214px; margin: 0; padding: 7px; list-style: none;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line-ink); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(5, 11, 20, .26), 0 2px 8px rgba(5, 11, 20, .12);
  /* Kein scale() im geschlossenen Zustand: eine skalierte Flaeche misst sich
     kleiner, als sie ist — die Abnahme meldete deshalb 21 Tippflaechen unter
     44 px, obwohl jede Zeile 44 px hoch ist. Aufgefallen am 22.09.2026. */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transform-origin: 100% 0;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sprachwahl.ist-offen .sprachwahl__blatt {
  opacity: 1; visibility: visible; transform: none;
}

.sprachwahl__zeile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 9px 12px; border: 0; background: none;
  font: inherit; font-size: 15px; color: var(--ink); text-align: left;
  cursor: pointer; border-radius: 10px;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.sprachwahl__zeile:hover { background: var(--surface); }
.sprachwahl__zeile:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.sprachwahl__name { flex: 1 1 auto; }
.sprachwahl__kuerzel {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-soft); opacity: .6;
}
.sprachwahl__haken { flex: none; color: var(--accent-ink); opacity: 0; }
.sprachwahl__zeile.ist-gewaehlt { color: var(--accent-ink); font-weight: 600; }
.sprachwahl__zeile.ist-gewaehlt .sprachwahl__haken { opacity: 1; }
.sprachwahl__zeile.ist-gewaehlt .sprachwahl__kuerzel { color: var(--accent-ink); opacity: .75; }

/* Im Schubfach: volle Breite, Blatt klappt nach unten auf statt zu schweben. */
.sprachwahl--schub { display: block; margin: 18px 0 0; }
.sprachwahl--schub .sprachwahl__knopf {
  width: 100%; justify-content: flex-start; gap: 10px;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text);
}
.sprachwahl--schub .sprachwahl__pfeil { margin-left: auto; }
.sprachwahl--schub .sprachwahl__blatt {
  position: static; min-width: 0; margin-top: 8px; box-shadow: none;
  max-height: 0; overflow: hidden; padding: 0;
  transition: max-height .24s ease, opacity .18s ease, padding .18s ease;
}
.sprachwahl--schub.ist-offen .sprachwahl__blatt { max-height: 420px; padding: 7px; overflow: auto; }

/* Auf schmalen Geraeten weicht zuerst der Zweitknopf, dann der Erstknopf —
   der Umschalter bleibt bis zuletzt stehen, weil er hier die Eintrittskarte
   fuer griechische, tuerkische und arabische Gaeste ist. */
@media (max-width: 1023px) {
  .nav-actions .nav-cta--kontakt { display: none; }
  .nav-actions .nav-cta--reserve { display: inline-flex; }
  .sprachwahl__knopf { padding: 10px 6px; }
}
@media (max-width: 599px) {
  .nav-actions .nav-cta--reserve { display: none; }
  .nav-actions { gap: 4px; }
}

/* ===========================================================================
   SCHWEBEBAHN ALS SEKTIONSUEBERGANG
   Sie steht zwischen zwei Sektionen auf hellem Grund. Der Kasten braucht
   denselben Grund wie seine Nachbarn, sonst blitzt darunter die Seitenfarbe
   durch das durchsichtige Obenteil der Zeichnung.
   =========================================================================== */
.schwebebahn--sektion {
  background: var(--surface);
  margin-top: -1px;
  /* Die Fassung bringt unten ein 30 px hohes Fussband mit, das hier dieselbe
     Farbe hat wie beide Nachbarn — also unsichtbar ist und nur Luft macht.
     Es wird weggezogen, damit die Kueche nicht zu weit abrutscht. */
  margin-bottom: -31px;
  overflow: hidden;
}

/* ===========================================================================
   ARABISCH: SCHREIBRICHTUNG VON RECHTS
   Fliesstext, Aufzaehlungen und Flex-Reihen drehen sich von selbst. Nicht
   drehen duerfen sich die Dinge, die eine EIGENE Richtung haben: das
   Rezensionsband laeuft mit einer Rechnung in Pixeln, die Schwebebahn faehrt
   eine Strecke, und die Uhrzeiten sind auch im arabischen Satz von links
   nach rechts zu lesen.
   =========================================================================== */
html[dir="rtl"] .g-band,
html[dir="rtl"] .g-spur,
html[dir="rtl"] .schwebebahn,
html[dir="rtl"] .trenner,
html[dir="rtl"] .hero-media { direction: ltr; }

html[dir="rtl"] .g-karte,
html[dir="rtl"] .g-karte__wer { direction: rtl; text-align: right; }

html[dir="rtl"] time,
html[dir="rtl"] .res-zeit,
html[dir="rtl"] .res-kalender { direction: ltr; }
html[dir="rtl"] [data-hours] li { direction: rtl; }
html[dir="rtl"] [data-hours] li time { direction: ltr; text-align: left; }

html[dir="rtl"] .sprachwahl__blatt { right: auto; left: 0; transform-origin: 0 0; }
html[dir="rtl"] .sprachwahl__zeile { text-align: right; }

/* Der Maeander ist ein gerichtetes Muster; gespiegelt liest er sich richtig. */
html[dir="rtl"] .maeander { transform: scaleX(-1); }

/* Das zweite, ueberlappende Bild braucht hier keine Sonderregel mehr:
   .haus-zweit und .tav__klein haengen an inset-inline-end und wandern damit
   von selbst auf die richtige Seite. */

/* Die Leiste am unteren Rand ist die Knopfleiste des Handys — sie folgt
   derselben Ansage vom 22.09.2026 wie der Kopf: die Farbe traegt der
   Reservieren-Knopf, "Kontakt" bleibt ruhig. Ohne das waere der Anruf unten
   laut und oben leise. */
.mobile-bar a.is-call { background: var(--bg-0); color: var(--text); }
.mobile-bar a[href="#reservieren"] { background: var(--accent); color: var(--on-accent); }

/* ===========================================================================
   INSTRUMENTE IN DEN ECKEN  ·  25.09.2026
   Klarino oben rechts in „Feiern & Anlaesse", Bouzouki unten links in
   „Aus unserer Kueche". Jedes genau einmal auf der Seite.

   Beide liegen HINTER dem Inhalt (z-index 0 gegen 1). Zierrat darf nie mit
   Text um Aufmerksamkeit ringen; wo sich etwas ueberschneidet, verschwindet
   die Zeichnung dahinter — wie ein Instrument, das hinter dem Tresen an der
   Wand haengt.

   .section bringt `position: relative` und `overflow: clip` schon mit; was
   ueber die Kante laeuft, wird sauber beschnitten.
   =========================================================================== */
#kueche > .wrap,
#anlass > .wrap { position: relative; z-index: 1; }

.kueche__instr,
.anlass__instr { position: absolute; z-index: 0; }

/* --- Bouzouki, unten links in der Kueche ---------------------------------
   Auf Ansage vom 25.09.2026 (rotes Rechteck im Bildschirmfoto) LEHNT es
   jetzt, statt aufrecht zu stehen: Kopfplatte oben links, Korpus unten
   rechts. In CSS ist rotate() im Uhrzeigersinn positiv — damit der Korpus
   nach rechts kippt, braucht es einen negativen Winkel.

   Gerechnet bei 150 px Breite und 25°, Kastenmitte (105, 924):
     Kopfplatte  (30, 770)   — in der Rinne, die bei 1440 px 0..98 px breit ist
     Korpusmitte (147, 1022) — im freien Band unter der Leiste (ab y 959)
     Korpus endet bei y 1063 — die Sektion bei 1088, also 25 px Luft

   Die Spannweite der geneigten Zeichnung ist 174 px und passt damit bei
   1440 px NICHT in die 98er Rinne: der Hals kreuzt ein Stueck hinter der
   Leiste. Das ist kein Fehler, sondern genau das Bild — das Instrument lehnt
   an der Wand, die Theke steht davor. Ab etwa 1700 px ist die Rinne breit
   genug, dann liegt alles frei.

   Die Neigung sitzt am Kasten, das Pendeln im SVG darin. Beide stoeren sich
   nicht: die Neigung ist statisch, das Pendeln laeuft um den obersten Punkt
   der Zeichnung. */
.kueche__instr {
  /* Nachgemessen statt gerechnet: durch die Neigung wandern die Wirbel
     weiter nach links, als die reine Kastenrechnung vermuten laesst. Bei
     left: 30px lagen sie bei x = −10 und waren angeschnitten. 46 px setzen
     den linkesten Punkt der Zeichnung auf x = 6, die Unterkante auf 1086 —
     beides innerhalb der Sektion. */
  left: 46px;
  bottom: -11px;
  width: 150px;
  transform: rotate(-25deg);
  transform-origin: 50% 50%;
  --instr-deckkraft: .9;
}

/* --- Klarino, oben rechts bei den Anlaessen ------------------------------
   GANZ sichtbar, nichts abgeschnitten. Damit bestimmt die Hoehe die Groesse:
   ueber den Karten sind je nach Fenster nur 346..361 px frei, und die
   Bechermuendung liegt bei 95,7 % der Feldhoehe.
      (346 − 12 oben − 16 Luft) / (0,957 · 620/168) = 90 px
   88 px ist die groesste runde Breite, die ueberall passt. */
.anlass__instr {
  top: 12px;
  right: 92px;
  width: 88px;
  --instr-deckkraft: .85;
}

/* --- Unter 1440 px: dasselbe Instrument als Wasserzeichen ----------------
   Auf Ansage vom 25.09.2026 sollen beide auch auf dem Handy da sein. Die
   Ecken-Platzierung geht dort NICHT: bei 390 px sind die Rinnen 20 px breit,
   und unter der Leiste bleiben 67 px — jede Ecke wuerde das Instrument
   zerschneiden oder hinter einer weissen Karte verstecken.
   Frei ist dort nur der Streifen ueber dem Kachel- bzw. Kartenraster, und
   der traegt nur Text. Deshalb rueckt die Zeichnung dorthin und wird zum
   Wasserzeichen: gross, vollstaendig, aber so leise, dass sie den Text nicht
   anfasst.

   Nachgerechnet, damit „leise" keine Meinung ist: bei 13 % Deckkraft liegt
   der Text in der Kueche noch bei 12,3:1 statt 14,2:1, bei den Anlaessen bei
   15,6:1. Beides weit ueber den 4,5:1, die AA verlangt. */
@media (max-width: 1439px) {
  .kueche__instr {
    left: -30px; top: 10px; bottom: auto;
    width: clamp(120px, 38vw, 190px);
    /* Aufrecht: ein geneigtes Wasserzeichen hinter Textzeilen wird unruhig. */
    transform: none;
    --instr-deckkraft: .13;
  }
  .anlass__instr {
    top: 20px; right: -8px;
    width: clamp(74px, 22vw, 110px);
    --instr-deckkraft: .17;
  }
}

/* ===========================================================================
   LEISTE UNTEN UND FRAGEFENSTER  ·  25.09.2026
   Zwei Dinge, die auf dem Handy nicht stimmten:

   1. Der Knopf des Fragefensters stand mit `bottom: 20px` MITTEN IN der
      Leiste — gemessen 37 px Ueberlapp bei 390 px. Er deckte damit einen
      Teil von „Route" zu und war selbst schwer zu treffen. Jetzt sitzt er
      ueber der Leiste, und das Fragefenster darueber.

   2. Die Leiste hatte `gap: 1px` mit der Linienfarbe als Untergrund — das
      war als feine Trennlinie gedacht, liest sich auf dem Geraet aber als
      Spalt zwischen drei losen Knoepfen. Die drei stossen jetzt aneinander.

   Die Hoehe der Leiste steht in EINER Variablen. Wer sie aendert, verschiebt
   Knopf und Fenster automatisch mit — sonst wandert der Ueberlapp beim
   naechsten Mal still zurueck.
   =========================================================================== */
@media (max-width: 860px) {
  :root { --leiste-h: calc(57px + env(safe-area-inset-bottom, 0px)); }

  .mobile-bar { gap: 0; }

  .chat-knopf { bottom: calc(var(--leiste-h) + 16px); }

  .chat-blatt {
    /* Leiste + 16 Luft + 60 Knopf + 12 Luft */
    bottom: calc(var(--leiste-h) + 88px);
    max-height: min(620px, calc(100dvh - var(--leiste-h) - 148px));
  }
}

/* ===================================================================
   Hero, Fassung „Der Tag führt" — mit dem Film dahinter
   ===================================================================
   Der Aufmacherfilm zeigt keinen Himmel (Rotwein, dann ein gedeckter
   Tisch). Eine wandernde Sonnenscheibe hätte deshalb nichts, worüber sie
   wandern könnte. Die Aussage „von mittags bis spät" trägt stattdessen
   das LICHT über dem Film: mittags warm, abends tief.

   Wichtig für den Kontrast: BEIDE Zustände verdunkeln, der warme nur
   weniger. Damit liegt die Schrift zu keinem Zeitpunkt heller als vorher,
   und die Schleier des Kits (hero-scrim) bleiben unangetastet.
   Ebene −1: über Film und Schleiern, unter .hero-inner (z-index 2). */
.tageslicht {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
              rgba(217, 162, 63, .16), rgba(5, 14, 28, .55));
  animation: tageslauf 24s ease-in-out infinite alternate;
}
@keyframes tageslauf {
  from { background: linear-gradient(180deg,
         rgba(217, 162, 63, .16), rgba(5, 14, 28, .55)); }
  to   { background: linear-gradient(180deg,
         rgba(12, 28, 56, .38), rgba(5, 14, 28, .80)); }
}

/* Das Halal-Medaillon. inset-inline-end statt right — auf Arabisch
   klappt die Seite um, und „rechts" wäre dort die falsche Seite. */
.hero-siegel {
  position: absolute; z-index: 2; bottom: 104px; inset-inline-end: 48px;
  width: 232px; text-align: center;
}
.hero-siegel .siegel { width: 112px; margin: 0 auto 10px; }
.hero-siegel .siegel__ring { transform-origin: 110px 110px;
  animation: siegeldrehen 60s linear infinite; }
@keyframes siegeldrehen { to { transform: rotate(360deg); } }
.hero-siegel__satz {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft);
  text-shadow: 0 1px 16px color-mix(in srgb, var(--bg-0) 70%, transparent);
}

/* Unter 1180 px wird der Textblock breit genug, dass das Medaillon ihm in
   die Quere kommt. Dann ohne Satz und kleiner in die Ecke. */
@media (max-width: 1179px) {
  .hero-siegel { width: auto; bottom: 88px; inset-inline-end: 22px; }
  .hero-siegel .siegel { width: 78px; margin: 0; }
  .hero-siegel__satz { display: none; }
}
/* Auf dem Handy steht unten die feste Leiste, und der Textblock nimmt die
   ganze Breite. Frei ist nur das Band zwischen Kopfzeile (endet bei rund
   92 px) und Dachzeile (beginnt bei rund 218 px) — dort sitzt das Siegel. */
@media (max-width: 860px) {
  .hero-siegel { top: 106px; bottom: auto; inset-inline-end: 16px; }
  .hero-siegel .siegel { width: 64px; }
}

/* Reduzierte Bewegung: der Abendzustand bleibt stehen — er ist der
   dunklere und damit der kontrastsichere von beiden. */
@media (prefers-reduced-motion: reduce) {
  .tageslicht {
    animation: none;
    background: linear-gradient(180deg,
                rgba(12, 28, 56, .38), rgba(5, 14, 28, .80));
  }
  .hero-siegel .siegel__ring { animation: none; }
}

/* ===================================================================
   Kopfleiste — sieben Glieder statt sechs
   ===================================================================
   Seit „Speisekarte" dazugekommen ist, braucht die Leiste bei 1440 px
   gemessene 713 px und bekommt 597 px. Ohne Gegenmaßnahme brechen „Das
   Haus", „Die Taverne" und „Zeiten & Anfahrt" zweizeilig um, und die
   Leiste wird 68 statt 44 px hoch — genau das war zu sehen.

   Drei Schritte, in dieser Reihenfolge:
   1. Kein Umbruch mehr in einem Glied.
   2. Zwischen 1024 und 1560 px enger und eine Spur kleiner.
   3. Unter 1260 px reicht auch das nicht mehr — dort das Schubfach,
      statt die Glieder zu quetschen. Das Kit schaltet erst bei 1023 um;
      das galt für sechs Glieder. */
.nav-links a { white-space: nowrap; }

@media (min-width: 1024px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13.5px; }
}

/* Das Kit schaltet bei 1023 px aufs Schubfach um — das galt fuer sechs
   Glieder. Mit sieben laeuft die Leiste bei 1024 px um 211 px ueber.
   Gemessen wird deshalb neu, wo sie wirklich noch passt. */
@media (max-width: 1259px) {
  .nav-links { display: none; }
  .nav-actions .nav-cta--reserve { display: none; }
  .nav-burger { display: inline-flex; }
}