/* ==========================================================================
   LEVEL 7 — Bar-Seite (23.09.2026)
   Eigenes Stylesheet fuer bar-highlights, bar-lounge und die Reiter-Darstellung der
   Speisekarte. main.css und effekte.css bleiben unangetastet. Farben ausschliesslich die
   Tokens aus main.css (Neon-Tuerkis nur auf Dunkel, --l7-teal-dark auf Hell).
   ========================================================================== */

/* ---------- Enthuellung (bar.js setzt .is-in einmalig) ---------- */
[data-bar-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
[data-bar-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-bar-reveal] { opacity: 1; transform: none; }

/* ---------- Highlights: grosse Bildkarten ---------- */
.l7-barhl { padding: 96px 0 104px; position: relative; }
.l7-barhl__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.l7-barhl__kopf .l7-h2 { margin-bottom: 0; }
.l7-barhl__sub { margin: 0 0 6px; max-width: 420px; text-align: right; font-size: 16px; }
.l7-barhl__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.l7-barhl__raster--2 { grid-template-columns: repeat(2, 1fr); }
.l7-barhl__raster--4 { grid-template-columns: repeat(4, 1fr); }
.l7-barhl__karte { position: relative; overflow: hidden; background: var(--l7-charcoal); aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.l7-barhl__bild { position: absolute; inset: 0; z-index: 0; }
.l7-barhl__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.l7-barhl__karte:hover .l7-barhl__bild img { transform: scale(1.07); }
.l7-barhl__karte::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0) 38%, rgba(10,10,10,0.55) 68%, rgba(10,10,10,0.94) 100%); }
.l7-barhl__preis { position: absolute; top: 18px; right: 18px; z-index: 2; background: var(--l7-teal); color: var(--l7-black); font-weight: 900; font-size: 15px; letter-spacing: -0.01em; padding: 8px 12px; font-variant-numeric: tabular-nums; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.l7-barhl__preis span { font-size: 11px; font-weight: 700; opacity: 0.75; margin-left: 4px; }
.l7-barhl__text { position: relative; z-index: 2; padding: 0 26px 26px; }
.l7-barhl__etikett { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 700; color: var(--l7-teal); margin-bottom: 10px; }
.l7-barhl__titel { font-size: clamp(26px, 2.4vw, 34px); line-height: 1; margin: 0 0 10px; color: var(--l7-white); letter-spacing: -0.02em; }
.l7-barhl__desc { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.78); max-width: 34ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.l7-barhl__mehr { margin-top: 28px; text-align: right; }
.l7-barhl__mehr .l7-link { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 899px) {
  .l7-barhl { padding: 72px 0 80px; }
  .l7-barhl__kopf { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .l7-barhl__sub { text-align: left; }
  /* Am Handy: Karten zum Wischen, eine nach der anderen, mit Einrastung. Der Container hat
     24 px Rand; die Leiste zieht sich auf die volle Breite und bringt den Rand selbst mit. */
  .l7-barhl__raster, .l7-barhl__raster--2, .l7-barhl__raster--4 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -24px; padding: 0 24px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .l7-barhl__raster::-webkit-scrollbar { display: none; }
  .l7-barhl__karte { flex: 0 0 78vw; max-width: 340px; scroll-snap-align: center; }
  .l7-barhl__mehr { text-align: left; margin-top: 16px; }
}

/* ---------- Lounge: Bild-Buehne ---------- */
.l7-barlounge { position: relative; overflow: hidden; background: var(--l7-black); color: var(--l7-white); display: flex; align-items: flex-end; min-height: 88vh; min-height: 88svh; }
.l7-barlounge--mittel { min-height: 62vh; min-height: 62svh; }
.l7-barlounge__medien { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.l7-barlounge__bild { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; transform: translate3d(0, var(--l7-py, 0px), 0) scale(1.14); }
.l7-barlounge__schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0.15) 55%, rgba(10,10,10,0.88) 100%); }
.l7-barlounge__inner { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: 88px; }
.l7-barlounge__eyebrow { margin-bottom: 18px; }
.l7-barlounge__headline { font-size: clamp(52px, 9vw, 132px); line-height: 0.9; letter-spacing: -0.035em; margin: 0 0 22px; max-width: 12ch; text-shadow: 0 10px 40px rgba(0,0,0,0.45); }
.l7-barlounge__sub { font-size: clamp(17px, 1.6vw, 21px); color: rgba(255,255,255,0.82); max-width: 560px; margin: 0 0 30px; }
.l7-barlounge__cta { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .l7-barlounge { min-height: 72vh; min-height: 72svh; }
  .l7-barlounge__inner { padding-top: 80px; padding-bottom: 56px; }
  .l7-barlounge__bild { transform: none; }
}

/* ---------- Speisekarte: Reiter-Darstellung ---------- */
/* Flaeche mit Tiefe (Jamie 23.09.: „etwas nackt"): feines Rauschen, leichter Randverlauf und am
   rechten Rand drei senkrechte, STATISCHE Leisten (Treppenhaus-Leitmotiv). Nichts liegt ueber Text. */
.l7-karte { padding: 96px 0 104px; position: relative; overflow: hidden; isolation: isolate; }
.l7-karte::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.55;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.l7-karte::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(10,10,10,0) 85%, rgba(10,10,10,0.05) 100%); }
.l7-karte__leisten { position: absolute; top: 0; bottom: 0; right: 0; width: 120px; z-index: -1; pointer-events: none; display: none; }
.l7-karte__leisten i { position: absolute; top: 8%; bottom: 8%; width: 2px; border-radius: 2px; opacity: 0.7;
  background: linear-gradient(180deg, rgba(0,184,178,0) 0%, var(--l7-teal-dark) 18%, #7C3AED 55%, var(--l7-magenta) 82%, rgba(255,20,147,0) 100%); }
.l7-karte__leisten i:nth-child(1) { right: 34px; top: 14%; bottom: 22%; }
.l7-karte__leisten i:nth-child(2) { right: 56px; top: 4%; bottom: 10%; opacity: 0.35; }
.l7-karte__leisten i:nth-child(3) { right: 90px; top: 26%; bottom: 30%; opacity: 0.25; }
@media (min-width: 1360px) { .l7-karte__leisten { display: block; } }
.l7-karte__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; }
.l7-karte__kopf .l7-h2 { margin-bottom: 0; }
.l7-karte__sub { margin: 10px 0 0; max-width: 560px; font-size: 16px; color: #444; }
.l7-karte__suche { position: relative; flex: 0 0 auto; width: 300px; max-width: 100%; }
.l7-karte__suche input { width: 100%; font: inherit; font-size: 15px; padding: 13px 16px 13px 44px; border: 2px solid var(--l7-black); background: var(--l7-white); color: var(--l7-black); border-radius: 0; -webkit-appearance: none; appearance: none; }
.l7-karte__suche input:focus { outline: 3px solid var(--l7-teal-dark); outline-offset: 2px; }
.l7-karte__suche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.l7-karte__suche svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.no-js .l7-karte__suche { display: none; }

.l7-karte__chips { position: sticky; top: var(--bar-kopf, 90px); z-index: 20; margin: 0 -24px 40px; padding: 12px 24px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: inherit; border-bottom: 1px solid rgba(10,10,10,0.12); }
.l7-section--cream .l7-karte__chips { background: var(--l7-cream); }
.l7-section--default .l7-karte__chips { background: var(--l7-white); }
.l7-section--dark .l7-karte__chips { background: var(--l7-black); border-bottom-color: rgba(255,255,255,0.14); }
.l7-karte__chips::-webkit-scrollbar { display: none; }
.l7-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 14px; border: 2px solid var(--l7-black); background: transparent; color: var(--l7-black); cursor: pointer; border-radius: 0; transition: background 0.18s, color 0.18s, border-color 0.18s; white-space: nowrap; }
.l7-chip__n { font-size: 11px; font-weight: 700; opacity: 0.6; }
.l7-chip:hover { background: rgba(10,10,10,0.08); }
.l7-chip.is-active { background: var(--l7-black); color: var(--l7-white); }
.l7-chip.is-active .l7-chip__n { color: var(--l7-teal); opacity: 1; }
.l7-chip:focus-visible { outline: 3px solid var(--l7-teal-dark); outline-offset: 2px; }
.l7-section--dark .l7-chip { border-color: rgba(255,255,255,0.5); color: var(--l7-white); }
.l7-section--dark .l7-chip.is-active { background: var(--l7-teal); color: var(--l7-black); border-color: var(--l7-teal); }
.l7-section--dark .l7-chip.is-active .l7-chip__n { color: var(--l7-black); }
.no-js .l7-chip { pointer-events: none; }

.l7-karte__rubrik { padding: 8px 0 44px; scroll-margin-top: calc(var(--bar-kopf, 90px) + 72px); position: relative; }
/* Trenner als Bahn-Motiv: zwei feine Linien mit Rinne dazwischen, links ein kurzer Akzent. */
.l7-karte__rubrik + .l7-karte__rubrik { padding-top: 48px; }
.l7-karte__rubrik + .l7-karte__rubrik::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; pointer-events: none;
  border-top: 1px solid rgba(10,10,10,0.18); border-bottom: 1px solid rgba(10,10,10,0.10); }
.l7-karte__rubrik + .l7-karte__rubrik::after { content: ''; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--l7-teal-dark); }
.l7-karte__rubrik.is-erste { padding-top: 8px; }
.l7-karte__rubrik.is-erste::before, .l7-karte__rubrik.is-erste::after { display: none; }
.l7-section--dark .l7-karte__rubrik + .l7-karte__rubrik::before { border-top-color: rgba(255,255,255,0.18); border-bottom-color: rgba(255,255,255,0.09); }
.l7-section--dark .l7-karte__rubrik + .l7-karte__rubrik::after { background: var(--l7-teal); }
/* Rubrik-Kopf: Nummer · rundes Bild · Titel, dahinter das blasse Geisterwort (nur Zierde, aria-hidden). */
.l7-karte__rubrik-kopf { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 22px; min-height: 72px; overflow: hidden; padding-top: 6px; }
.l7-karte__rubrik-geist { position: absolute; left: -0.04em; top: 50%; transform: translateY(-50%); z-index: 0; pointer-events: none; white-space: nowrap; user-select: none;
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; font-size: clamp(72px, 9vw, 150px); color: transparent; -webkit-text-stroke: 1px rgba(10,10,10,0.09); }
.l7-section--dark .l7-karte__rubrik-geist { -webkit-text-stroke-color: rgba(255,255,255,0.10); }
.l7-karte__rubrik-nr { position: relative; z-index: 1; font-size: 13px; font-weight: 900; letter-spacing: 0.12em; color: var(--l7-teal-dark); font-variant-numeric: tabular-nums; padding: 6px 8px; border: 2px solid var(--l7-teal-dark); line-height: 1; }
.l7-section--dark .l7-karte__rubrik-nr { color: var(--l7-teal); border-color: var(--l7-teal); }
.l7-karte__rubrik-bild { position: relative; z-index: 1; flex: none; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; box-shadow: 0 6px 18px rgba(10,10,10,0.22), 0 0 0 3px var(--l7-cream-soft); background: var(--l7-charcoal); }
.l7-section--dark .l7-karte__rubrik-bild { box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 3px var(--l7-charcoal); }
.l7-karte__rubrik-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l7-karte__rubrik-titel-wrap { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.l7-karte__rubrik-titel { font-size: clamp(30px, 3.6vw, 44px); margin: 0; letter-spacing: -0.025em; }
.l7-karte__rubrik-n { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--l7-gray); }
.l7-karte__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: 6px; }
.l7-karte__liste--kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; }
.l7-karte__gericht { padding: 12px 0; min-width: 0; }
.l7-karte__zeile { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.l7-karte__name { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; line-height: 1.25; min-width: 0; }
.l7-karte__punkte { flex: 1; min-width: 24px; border-bottom: 2px dotted rgba(10,10,10,0.28); transform: translateY(-5px); }
.l7-section--dark .l7-karte__punkte { border-bottom-color: rgba(255,255,255,0.3); }
.l7-karte__preis { font-weight: 900; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--l7-teal-dark); letter-spacing: -0.01em; }
.l7-section--dark .l7-karte__preis { color: var(--l7-teal); }
.l7-karte__einheit { font-size: 11px; font-weight: 700; opacity: 0.6; margin-left: 4px; color: var(--l7-black); }
.l7-karte__desc { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #555; max-width: 46ch; }
.l7-section--dark .l7-karte__desc { color: rgba(255,255,255,0.7); }
.l7-karte__desc p { margin: 0; }
.l7-karte__allergene { margin: 4px 0 0; font-size: 11px; color: var(--l7-gray); font-style: italic; }
.l7-karte__gericht .l7-tag { vertical-align: 2px; }
.l7-karte__leer { padding: 32px 0 8px; font-size: 16px; color: #444; }
.l7-karte__leer strong { font-weight: 800; }
.l7-karte__hinweis { margin: 40px 0 0; font-size: 13px; color: var(--l7-gray); }
.l7-karte__rubrik[hidden], .l7-karte__gericht[hidden], .l7-karte__leer[hidden] { display: none; }

@media (max-width: 899px) {
  .l7-karte { padding: 72px 0 80px; }
  .l7-karte__kopf { margin-bottom: 20px; }
  .l7-karte__suche { width: 100%; }
  .l7-karte__chips { margin-bottom: 28px; }
  .l7-karte__liste, .l7-karte__liste--kompakt { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; }
  .l7-karte__liste--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .l7-karte__rubrik-kopf { gap: 12px; min-height: 60px; margin-bottom: 14px; }
  .l7-karte__rubrik-bild { width: 54px; height: 54px; }
  .l7-karte__rubrik-geist { font-size: 64px; }
  .l7-karte__rubrik-titel-wrap { gap: 4px 10px; }
  .l7-karte__gericht { padding: 11px 0; border-bottom: 1px solid rgba(10,10,10,0.08); }
  .l7-karte__gericht:last-child { border-bottom: 0; }
  .l7-karte__name, .l7-karte__preis { font-size: 16px; }
  .l7-karte__rubrik { padding-bottom: 28px; }
  .l7-karte__rubrik + .l7-karte__rubrik { padding-top: 28px; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-bar-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .l7-barhl__bild img, .l7-barlounge__bild { transform: none !important; transition: none !important; }
}