/* ============================================================
   CASA LOUNGE — Bar · Lounge · Sports Bar, Lippstadt
   Design System  ·  Gold on near-black, premium nightlife
   Motion polish per Emil Kowalski's design-engineering rules
   ============================================================ */

/* ------------------------------------------------------------
   Schriften — lokal ausgeliefert (DSGVO)
   ------------------------------------------------------------
   Früher kamen Cinzel und Inter von fonts.googleapis.com. Dabei
   geht bei jedem Seitenaufruf die IP des Gastes an Google — dafür
   bräuchten wir eine Einwilligung (LG München, 3 O 17493/20).
   Jetzt liegen die Dateien unter /assets/fonts/ auf unserem Server.

   Es sind Variable Fonts: EINE Datei deckt alle Schnitte von 400
   bis 900 ab. Deshalb `font-weight: 400 900` — nicht anfassen,
   sonst rendert der Browser nur noch einen Strichstärke-Wert.
   Pro Familie zwei Dateien: `latin` für den Normalfall,
   `latin-ext` nur, wenn wirklich ein Sonderzeichen vorkommt.
   Die Pfade sind relativ zu DIESER Datei (/css/), daher `../`.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/cinzel-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: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — off-black with a faint warm/plum lean, never dead #000 */
  --ink-900: #0b0907;
  --ink-850: #0f0c0a;
  --ink-800: #141019;
  --ink-700: #1a1422;
  --ink-600: #25201b;

  /* Brand gold — the single interactive accent */
  --gold: #c9a86a;
  --gold-bright: #e6cf9a;
  --gold-deep: #9c7f44;

  /* Type */
  --cream: #f4eee2;
  --sand: #b9ac95;
  --sand-dim: #968c79;

  /* Atmosphere — AMBIENT/GARNISH ONLY, never text or CTA */
  --warm-glow: #e8923d;     /* ember / sunset amber (gradients + 3D key light) */
  --deep-accent: #2e1b33;   /* plum night (horizon gradient + 3D cool rim) */
  --living-accent: #7e8c5a; /* olive green — garnish glyphs only */
  --live-red: #ff4d4d;      /* functional status only (Fussball live) */

  /* Lines / glass */
  --line: rgba(201, 168, 106, 0.16);
  --line-soft: rgba(244, 238, 226, 0.08);
  --glass: rgba(16, 12, 10, 0.72);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Easing — strong custom curves, never default ease-in for UI */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Layout */
  --maxw: 1160px;
  --header-h: 76px;
  --gold-gradient: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));

  /* ---------- Schriftgroessen ----------
     Acht Stufen statt der ueber 20 einzeln gesetzten Werte, die sich vorher
     hier angesammelt hatten. Gemessen waren allein auf der Startseite Groessen
     wie 14.72, 15.04 und 16.32 px nebeneinander - Abstaende unter einem Pixel
     liest niemand als Hierarchie, sie erzeugen nur Unruhe.
     Eng gestuft im UI-Bereich, weiter nach oben. Wurzel 16 px. */
  --fs-100: 0.6875rem;  /* 11px - Badges, Monatskuerzel, Tags */
  --fs-200: 0.75rem;    /* 12px - Eyebrow, Versal-Label */
  --fs-300: 0.8125rem;  /* 13px - Hinweise, Bildunterschriften, Fusszeile */
  --fs-400: 0.875rem;   /* 14px - Sekundaertext, Chips, kleine Knoepfe */
  --fs-500: 0.9375rem;  /* 15px - Standard-Bedientext */
  --fs-600: 1rem;       /* 16px - Fliesstext, Wortmarke */
  --fs-700: 1.125rem;   /* 18px - Preise, Anstosszeiten */
  --fs-800: 1.3125rem;  /* 21px - Datumszahl, Footer-Wortmarke */

  /* Zeilenmass: rund 68 Zeichen in Inter. Der Lead-Absatz der Unterseiten
     lief vorher mit 44em auf etwa 88 Zeichen - deutlich zu breit zum Lesen. */
  --measure: 34em;

  /* ---------- Abstaende ----------
     Radien und Easings waren tokenisiert, Abstaende bisher nicht - sie standen
     als Einzelwerte verstreut, teils sogar als Inline-Style im HTML. Ein fester
     Wert neben einem fluiden laeuft gegen den Takt: der Sektionskopf hatte
     44px, waehrend die Sektion selbst zwischen 56 und 104px atmete. Am Handy
     war der Kopfabstand damit fast so gross wie der Sektionsabstand, am
     Desktop weniger als die Haelfte. */
  --space-section: clamp(56px, 8vw, 104px);
  --space-section-tight: clamp(28px, 4vw, 52px);
  --space-head: clamp(26px, 3.4vw, 44px);

  /* ---------- Flaechen ----------
     Kanal-Tripel: die Farbe steht genau einmal, die Deckkraft bleibt frei.
     --warm-glow war zwar als Token da, wurde aber kein einziges Mal als var()
     benutzt - stattdessen stand rgba(232,146,61,...) ein Dutzend Mal von Hand
     kopiert im Stylesheet. */
  --warm-glow-rgb: 232 146 61;
  --deep-accent-rgb: 46 27 51;
  --gold-rgb: 201 168 106;
  --cream-rgb: 244 238 226;

  /* Die ink-Rampe kippt zweimal die Temperatur: ink-900 und ink-850 sind warm,
     ink-800 und ink-700 violett. Karten lagen damit kuehl-violett auf warmem
     Grund und wirkten aufgeklebt. Der Sheen legt warmes Licht darueber und holt
     sie zurueck - Lichtabfall von oben plus Ember aus derselben oberen rechten
     Ecke wie der Seitenhintergrund. Kontrast bleibt ueberall ueber AA. */
  --surface-sheen:
    linear-gradient(180deg, rgb(var(--cream-rgb) / 0.035), rgb(var(--cream-rgb) / 0) 42%),
    radial-gradient(150% 115% at 84% -14%, rgb(var(--warm-glow-rgb) / 0.045), transparent 60%);

  /* Helle Haarlinie oben, dunkle unten = gewoelbte Flaeche. Das ist die Tiefe,
     die es vorher NUR im Hover gab und die auf dem Handy deshalb nie erschien. */
  --surface-edge:
    inset 0 1px 0 rgb(var(--cream-rgb) / 0.075),
    inset 0 -1px 0 rgb(0 0 0 / 0.5);
  --surface-lift: 0 18px 42px -32px rgb(0 0 0 / 0.95);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* scrollbar-gutter haelt den Platz der Scrollleiste frei. Ohne das springt das
   Layout beim Oeffnen eines Modals seitlich, weil die Sperre die Leiste
   verschwinden laesst. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Sichtbarer Fokusring fuer die gesamte Seite. Vorher gab es ihn nur an vier
   Stellen - wer mit der Tastatur navigiert, war auf allem anderen blind.
   :focus-visible statt :focus: die Maus loest ihn nicht aus. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--ink-900);
  color: var(--cream);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip statt hidden: hidden macht body zum Scroll-Container und
     bricht Anker-Spruenge (#kaffee) sowie window.scrollTo. */
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ----- Atmosphere: golden hour fading into a Mediterranean night -----
   Layered so flat gold/black gains warmth + depth. The ember glow sits
   upper-RIGHT, the SAME corner the 3D cocktail's key light comes from,
   so page and cocktail read as one lit room. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    /* ember key glow (upper-right) */
    radial-gradient(700px 580px at 84% 4%, rgba(232, 146, 61, 0.17), transparent 62%),
    radial-gradient(520px 420px at 92% 26%, rgba(232, 146, 61, 0.07), transparent 60%),
    /* drifting bokeh — out-of-focus pendant lights */
    radial-gradient(140px 140px at 22% 30%, rgba(201, 168, 106, 0.06), transparent 70%),
    radial-gradient(110px 110px at 64% 58%, rgba(232, 146, 61, 0.05), transparent 72%),
    radial-gradient(90px 90px at 40% 78%, rgba(201, 168, 106, 0.04), transparent 72%),
    /* sunset horizon (lower third) */
    radial-gradient(1300px 640px at 52% 118%, rgba(232, 146, 61, 0.11), transparent 60%),
    /* plum night pool (lower-left) */
    radial-gradient(980px 620px at 10% 104%, rgba(46, 27, 51, 0.55), transparent 62%),
    /* base */
    linear-gradient(180deg, #100c14 0%, var(--ink-900) 58%, #0a0806 100%);
  will-change: opacity;
}
/* Vignette + film grain to pull the eye in and kill gradient banding */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(135% 130% at 50% 38%, transparent 56%, rgba(0, 0, 0, 0.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: normal, overlay;
  opacity: 0.5;
}
/* Das "Atmen" des Seitenhintergrunds wurde ENTFERNT: 9 Sekunden Umlauf bei
   6 % Amplitude - eine Bewegung, die niemand bewusst sehen kann, die aber auf
   jeder Seite dauerhaft eine Compositing-Ebene in Vollbildgroesse beschaeftigt.
   Bewegung ohne erkennbaren Zweck ist genau das, was eine Seite billig wirken
   laesst. Ein Ersatz-Effekt beim Seitenaufruf wurde bewusst NICHT eingebaut:
   das ist eine Mehrseiten-Website, man saehe ihn bei jedem Klick erneut. */

/* ---------- Typography ----------
   Die Sperrung (letter-spacing) faellt mit wachsender Groesse. Vorher galten
   pauschal 0.04em fuer alle vier Ebenen - bei 73,6 px sind das 2,94 px pro
   Buchstabenpaar, die grosse Ueberschrift zerfaellt damit in Einzelbuchstaben.
   Alle clamp() teilen sich jetzt dasselbe Wachstumsfenster (360 bis 1280 px),
   damit das Verhaeltnis der Ebenen zueinander nicht mit der Fensterbreite
   wandert. */
.display, h1, h2, h3 {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  text-wrap: balance;          /* keine einsamen Restwoerter in Display-Zeilen */
}
h1 {
  font-size: clamp(2.4rem, 1.539rem + 3.826vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.018em;
}
h2 {
  font-size: clamp(1.7rem, 1.309rem + 1.739vw, 2.7rem);
  line-height: 1.10;
  letter-spacing: 0.03em;
}
h3 {
  font-size: clamp(1.1rem, 0.963rem + 0.609vw, 1.45rem);
  line-height: 1.22;           /* erbte vorher 1.55 aus body - Fliesstext-Durchschuss
                                  unter einer Cinzel-Ueberschrift */
  letter-spacing: 0.06em;      /* bleibt: bei 17,6 px ist das richtig */
}
p { color: var(--sand); text-wrap: pretty; }

.eyebrow {
  font-family: "Inter", sans-serif;
  font-size: var(--fs-200); font-weight: 600;
  line-height: 1;              /* erbte vorher 1.55: gut 3 px toter Halbdurchschuss
                                  oben und unten, wodurch gesetzte gap-Werte
                                  spuerbar groesser ankamen als notiert */
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); display: inline-block;
}
.gold-text { color: var(--gold); }
.muted { color: var(--sand-dim); }

/* ---------- Zeilenmass ----------
   Lesetext bekommt zentral eine Obergrenze. Ohne die laufen Absaetze auf
   breiten Bildschirmen ueber die ganze Spaltenbreite, und das Auge verliert
   beim Zeilenwechsel den Anschluss. */
.section-head p,
.split .body p,
.booking-panel .lead,
.modal-bio,
.legal { max-width: var(--measure); }
.section-head.center p { margin-inline: auto; }

/* ---------- Silbentrennung ----------
   <html lang="de"> ist gesetzt, aber ohne `hyphens` bringt das nichts.
   Deutsche Komposita wie "Champions-League-Abend" oder
   "Verbraucherschlichtungsstelle" reissen im Flattersatz sonst sichtbare
   Loecher in schmale Spalten. Nur dort, wo die Spalten wirklich schmal sind. */
.feature p, .event-body .excerpt, .list-check li,
.menu-item .mi-main .desc, .legal, .booking-cta .hint, .map-gate-text {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}

/* ---------- Ziffern ----------
   Cinzel liefert je nach Kontext Mediaevalziffern mit Unter- und Oberlaengen.
   In Zahlenreihen, die untereinander stehen, tanzen die dann. */
.date-chip .d, .fix-time, .menu-item .price, .menu-cat-head .cat-price {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { position: relative; z-index: 1; padding-block: var(--space-section); }
/* Direkt an die Sektion darueber angeschlossen (war: style="padding-top:0"). */
.section--flush { padding-top: 0; }
/* Direkt unter einem page-hero (war: style="padding-top:24px" bzw. 10px). */
.section--tight { padding-top: var(--space-section-tight); }

/* gap faellt von 14 auf 10: .eyebrow hat mit line-height 1 seinen toten
   Halbdurchschuss verloren, den die 14 vorher mit ausgeglichen haben. */
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-head); max-width: 620px; }
.section-head.center { margin-inline: auto; text-align: center; align-items: center; }

/* Sektionskopf mit Aktionen rechts. Stand bisher ZWEIMAL wortgleich als
   Inline-Style in index.html - und Inline steht in der Kaskade ueber jeder
   Media Query, es gab also keinen Breakpoint, an dem sich dieser Kopf haette
   zuruecknehmen lassen. */
.section-head.with-actions {
  flex-direction: row; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  max-width: none; gap: 18px 24px;
}
.section-head.with-actions > * { min-width: 0; }
.section-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .section-head.with-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .section-head-actions { width: 100%; }
  .section-head-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; }

/* ---------- Nur fuer Screenreader / Tastatur ---------- */
/* Sichtbar ausgeblendet, aber vorgelesen. NICHT display:none benutzen,
   das nimmt der Screenreader ebenfalls aus dem Baum. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Sprung ueber Header und Navigation direkt zum Inhalt. Liegt ausserhalb des
   Bildes, bis er den Tastaturfokus bekommt. */
.skip-link {
  position: fixed; left: 12px; top: -120px; z-index: 300;
  padding: 13px 20px; border-radius: var(--r-pill);
  background: var(--gold-gradient); color: #2a210f;
  font-weight: 600; font-size: var(--fs-500);
  box-shadow: 0 14px 40px -14px rgba(201, 168, 106, 0.7);
  transition: top 220ms var(--ease-out);
}
.skip-link:focus-visible { top: calc(12px + env(safe-area-inset-top, 0px)); outline-offset: 2px; }
/* Das Sprungziel bekommt den Fokus, soll aber keinen Rahmen zeigen -
   der Gast hat nicht auf den Inhalt geklickt, er ist nur dorthin gesprungen. */
#inhalt:focus { outline: none; }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--ink-900) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); background: color-mix(in srgb, var(--ink-900) 92%, transparent); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; }
/* Original-Logo als rundes Emblem. Das JPG hat sattes Schwarz als Grund;
   mix-blend-mode: screen laesst es auf dem dunklen Header verschwinden,
   ganz ohne Freistellen. Der Ausschnitt zoomt auf den Bogen (Haus+Palme). */
.brand .mark {
  position: relative; width: 38px; height: 38px; flex: none;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line);
}
.brand .mark img {
  position: absolute; left: 50%; top: 50%;
  width: 300%; height: 300%; max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%) translateY(14%);
  mix-blend-mode: screen;
}
.brand .word { font-family: "Cinzel", serif; font-weight: 600; letter-spacing: 0.18em; font-size: var(--fs-600); color: var(--cream); }
.brand .word b { color: var(--gold); font-weight: 600; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  padding: 9px 14px; border-radius: var(--r-pill);
  font-size: var(--fs-500); color: var(--sand);
  transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--cream); background: rgba(244,238,226,0.05); } }
.nav a[aria-current="page"] { color: var(--gold); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 1.5px; background: var(--gold-gradient); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.ig-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--sand); transition: transform 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ig-link:hover { color: var(--gold); border-color: var(--gold); } }
.ig-link:active { transform: scale(0.94); }
.ig-link svg { width: 19px; height: 19px; }

/* Burger und Schubladen-Menue wurden ENTFERNT.
   Sie waren toter Code: `.burger` stand auf display:none, wurde unter 720px
   auf display:flex gesetzt und im selben Breakpoint von einer spaeteren Regel
   mit display:none !important wieder abgeraeumt. Der Knopf war damit in keiner
   Fensterbreite sichtbar und die Schublade dahinter unerreichbar.
   Die Handy-Navigation ist die untere App-Leiste (.mobile-bottom-nav), die
   jetzt statisch im HTML jeder Seite steht. */

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-size: var(--fs-500); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  transition: transform 150ms var(--ease-out), background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 17px; height: 17px; }

.btn-primary { background: var(--gold-gradient); color: #2a210f; box-shadow: 0 8px 30px -12px rgba(201,168,106,0.6); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { box-shadow: 0 14px 40px -12px rgba(201,168,106,0.75); filter: brightness(1.04); } }

.btn-ghost { border: 1px solid var(--line); color: var(--cream); background: rgba(244,238,226,0.02); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: var(--gold); color: var(--gold); } }

.btn-sm { padding: 10px 18px; font-size: var(--fs-400); }
.btn-block { width: 100%; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; z-index: 1; min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.hero .wrap { width: 100%; position: relative; z-index: 1; }
/* Die Textspalte ist bewusst breiter als die Buehne: bei 1.02fr blieben der
   Ueberschrift nur ~520 px und sie brach auf VIER Zeilen. .hero-copy erlaubt
   ohnehin 620 px - diese Breite bekommt die Spalte jetzt auch wirklich, damit
   "Wo der Abend golden wird." in zwei Zeilen steht. */
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 60px); align-items: center; }
.hero-copy { position: relative; max-width: 620px; padding-block: clamp(20px, 4vw, 48px); }
/* Eigene Groesse nur fuer den Hero (die globale h1-Regel bleibt, damit 404
   und die Unterseiten unberuehrt sind). Gemessen: in der 587-px-Spalte kippt
   die Zeile zwischen 72 und 73.6 px von zwei auf drei Zeilen. 4.25rem = 68 px
   haelt bewusst Abstand zu dieser Kante, damit ein anderer Browser oder eine
   leicht andere Schriftmetrik den Umbruch nicht zurueckholt.
   text-wrap: balance verteilt die zwei Zeilen gleichmaessig, statt die zweite
   zu einem einzelnen Wort verkuemmern zu lassen. */
.hero h1 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 4.25rem); text-wrap: balance; }
.hero h1 .gold-word { color: var(--gold); }
/* Der frueher hier stehende clamp war ein Nulleffekt: 2,24 px Zuwachs, wirksam
   nur zwischen 1067 und 1216 px Fensterbreite. Eine feste Stufe ist ehrlicher. */
.hero-sub { margin-top: 20px; font-size: var(--fs-600); max-width: 32em; color: var(--sand); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Right zone — the realistic 3D cocktail on its lit stage */
.hero-stage { position: relative; align-self: stretch; min-height: min(66svh, 580px); display: grid; place-items: center; }
.hero-stage canvas { position: relative; z-index: 2; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.hero-stage canvas.dragging { cursor: grabbing; }
.hero-spin-hint { position: absolute; z-index: 3; bottom: 6px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--line); color: var(--sand); font-size: var(--fs-200); letter-spacing: 0.02em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease-out); }
.hero-spin-hint svg { width: 15px; height: 15px; color: var(--gold); }
.hero[data-3d="on"] .hero-spin-hint { opacity: 1; }
.hero[data-spun="true"] .hero-spin-hint { opacity: 0; }
.stage-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(6px);
  background:
    radial-gradient(58% 40% at 56% 82%, rgba(232, 146, 61, 0.22), transparent 70%),
    radial-gradient(70% 60% at 62% 30%, rgba(232, 146, 61, 0.10), transparent 68%),
    radial-gradient(42% 32% at 38% 58%, rgba(46, 27, 51, 0.38), transparent 70%); }
.palm-silhouette { position: absolute; z-index: 1; right: -3%; bottom: 0; height: 94%; width: auto; color: var(--ink-850); opacity: 0.92; pointer-events: none; }
.stage-fallback { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--gold); }
.stage-fallback svg { width: min(58%, 270px); height: auto; filter: drop-shadow(0 0 42px rgba(232, 146, 61, 0.4)); }
.hero[data-3d="on"] .stage-fallback { display: none; }

/* Live football ticker */
.ticker {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  padding: 10px 18px 10px 14px; border-radius: var(--r-pill);
  background: var(--ink-700); border: 1px solid var(--line);
}
/* Grundzustand: Gold, ruhig. Rot und Puls gibt es NUR, wenn heute wirklich
   angestossen wird ([data-live="true"], gesetzt in js/home.js). Ein rot
   pulsierender Punkt fuer ein Spiel am Freitag ist ein Alarmsignal fuer etwas,
   das gar nicht passiert - und entwertet das Signal fuer den Fall, in dem es
   stimmt. Der Ticker bleibt in beiden Zustaenden gleich gross und gleich
   lesbar; nur die Farbe sagt die Wahrheit. */
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex: none; }
.ticker[data-live="true"] .live-dot { background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255,77,77,0.55); animation: pulse 1.8s var(--ease-out) infinite; }
.ticker .lbl { font-size: var(--fs-200); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright); }
.ticker[data-live="true"] .lbl { color: #ff7a7a; }
/* Damit die Pille auf schmalen Geraeten nicht aufreisst, wenn zwei lange
   Mannschaftsnamen zusammenkommen. */
.ticker { max-width: 100%; }
.ticker .game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker .game { font-size: var(--fs-500); color: var(--cream); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,0.5); } 70% { box-shadow: 0 0 0 10px rgba(255,77,77,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); } }

/* Scroll hint */
.scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 1; color: var(--sand-dim); font-size: var(--fs-200); letter-spacing: 0.22em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint .bar { width: 1px; height: 36px; background: linear-gradient(var(--gold), transparent); animation: drop 2.2s var(--ease-in-out) infinite; }
@keyframes drop { 0%,100% { transform: scaleY(0.5); transform-origin: top; opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============================================================
   Cards & grids
   ============================================================ */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Event card */
.event-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; text-align: left;
  box-shadow: inset 0 1px 0 var(--line-soft);
  /* translate und transform sind GETRENNTE Eigenschaften. Das Anheben laeuft
     ueber `translate`, das Druck-Feedback ueber `transform: scale` - so
     ueberschreiben sie einander nicht mehr gegenseitig. Beide muessen einzeln
     in der transition stehen. */
  transition: translate 240ms var(--ease-out), transform 140ms var(--ease-out),
              border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.event-card:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  /* Die Tiefe im Hover steht jetzt im Flaechen-Rezept am Dateiende (M5).
     Hier bleibt nur, was dort nicht hingehoert: der Bildzoom. */
  .event-card:hover .event-thumb img { scale: 1.06; }
}
/* Instagram-Feed-Format (4:5, 1080x1350). Flyer, die fuer Instagram
   gestaltet wurden, passen so ohne Beschnitt in die Karte. */
.event-thumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-700); }
/* 600 ms waren fuer eine Hover-Reaktion mehr als doppelt so lang wie das
   UI-Budget - und sie standen gegen die 240 ms, in denen sich der Rahmen
   darum bewegt. Zwei Takte in einer Karte liest das Auge als Ruckeln. */
.event-thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale 280ms var(--ease-out); }
.event-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(10,9,8,0.7)); }
.badge { position: absolute; z-index: 2; font-size: var(--fs-100); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--r-pill); }
.badge-cat { top: 14px; left: 14px; background: var(--gold-gradient); color: #2a210f; }
.badge-age { top: 14px; right: 14px; background: rgba(10,9,8,0.7); color: var(--cream); border: 1px solid var(--line); backdrop-filter: blur(6px); }

.date-chip { position: absolute; bottom: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 9px 13px; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.date-chip .d { font-family: "Cinzel", serif; font-size: var(--fs-800); color: var(--gold); }
.date-chip .m { font-size: var(--fs-100); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); margin-top: 3px; }

.event-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.event-body .day { font-size: var(--fs-300); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand-dim); }
.event-body h3 { color: var(--cream); letter-spacing: 0.03em; }
.event-body .excerpt { font-size: var(--fs-500); color: var(--sand); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-meta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 12px; font-size: var(--fs-300); color: var(--sand); }
.event-meta .mi { display: inline-flex; align-items: center; gap: 6px; }
.event-meta svg { width: 14px; height: 14px; color: var(--gold); }

/* Stagger-in */
/* Einblenden beim Scrollen.
   Der versteckte Startzustand gilt NUR, wenn auch ein Skript laeuft, das ihn
   wieder aufheben kann - deshalb der :root[data-js]-Praefix, den ein winziges
   Inline-Skript im <head> jeder Seite setzt. Ohne JavaScript bleibt jeder
   Block sofort sichtbar. Vorher war das umgekehrt: auf karte.html standen
   14 von 18 Bloecken auf opacity: 0, die komplette Getraenkekarte war ohne
   JavaScript unsichtbar.
   ACHTUNG Spezifitaet: `.in` MUSS denselben Praefix tragen, sonst gewinnt der
   Startzustand und nichts blendet je ein.
   Der Stagger-Versatz liegt in einer EIGENEN Custom Property und nicht als
   transition-delay am Element - sonst bremst er spaeter jeden Hover mit. */
:root[data-js] .reveal { opacity: 0; transform: translateY(16px); }
:root[data-js] .reveal.in {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--ease-out) var(--reveal-delay, 0ms),
              transform 420ms var(--ease-out) var(--reveal-delay, 0ms);
}

/* ============================================================
   Feature blocks (Bar / Lounge / Sports)
   ============================================================ */
.feature { background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 1px 0 var(--line-soft); transition: translate 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
/* Hover-Tiefe steht im Flaechen-Rezept am Dateiende (M5) - hier stand vorher
   eine zweite, konkurrierende Fassung mit transform statt translate. */
.feature .fi { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--r-md); background: rgba(232, 146, 61, 0.12); color: var(--gold); }
.feature .fi svg { width: 24px; height: 24px; }
.feature h3 { color: var(--cream); }
.feature p { font-size: var(--fs-500); }

/* Split (image + text) */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split .media { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 5 / 4; background: var(--ink-700); }
.split .media > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Karten-Einwilligung (Google Maps) ----------
   Steht anstelle des iframes, bis der Gast zustimmt. Soll sich wie ein
   ruhiger Teil der Seite anfuehlen, nicht wie ein Cookie-Banner: gleiche
   Flaeche, gleicher Rahmen, nur ein Hinweis statt der Karte. */
.map-embed { display: grid; place-items: center; position: relative; }
.map-embed::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* angedeutetes Strassenraster — signalisiert "hier waere die Karte" */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 146, 61, 0.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 46px, var(--line-soft) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, var(--line-soft) 46px 47px);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 78%);
}
.map-embed[data-map-loaded] { display: block; }
.map-embed[data-map-loaded]::before { content: none; }
.map-gate {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 12px;
  max-width: 380px; padding: clamp(24px, 4vw, 34px); text-align: center;
}
.map-gate-pin {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: var(--r-pill); color: var(--gold);
  border: 1px solid var(--line); background: rgba(201, 168, 106, 0.07);
}
.map-gate-pin svg { width: 24px; height: 24px; }
.map-gate-title { font-family: "Cinzel", serif; font-size: var(--fs-600); color: var(--cream); font-weight: 600; }
.map-gate-text { font-size: var(--fs-400); line-height: 1.6; color: var(--sand-dim); text-wrap: pretty; }
.map-gate-remember {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-300); color: var(--sand-dim); cursor: pointer;
}
.map-gate-remember input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; }
.map-gate-remember:hover { color: var(--sand); }

/* ---------- Echte Fotos ---------- */
/* Foto-Band: das Bild IST die Sektion (full-bleed, kein Rahmen drumherum) */
.photo-band { position: relative; z-index: 1; margin-bottom: var(--space-section); }
.photo-band img { width: 100%; height: clamp(300px, 52vh, 520px); object-fit: cover; }
.photo-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Ober- und Unterkante in die Seitenflaeche einbetten, Mitte unangetastet */
  background: linear-gradient(180deg, var(--ink-900) 0%, transparent 14%, transparent 82%, var(--ink-900) 100%);
}
.photo-band .band-caption {
  position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); transform: translateX(-50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream); font-size: var(--fs-300); letter-spacing: 0.04em;
  max-width: 92vw; text-align: center; text-wrap: balance;
}

/* Galerie */
.gallery-item {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg);
  overflow: hidden; border: 1px solid var(--line-soft); background: var(--ink-700);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover img { transform: scale(1.05); }
}
.gallery-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(10, 9, 8, 0.55));
}
.gallery-item .tag-label {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-size: var(--fs-200); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream); text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.split .media img { width: 100%; height: 100%; object-fit: cover; }
.split .body { display: flex; flex-direction: column; gap: 18px; }
.list-check { display: flex; flex-direction: column; gap: 12px; }
.list-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--sand); font-size: var(--fs-500); }
.list-check svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }

/* Info strip (hours / address) */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.info-cell { background: var(--ink-800); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.info-cell .k { font-size: var(--fs-200); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.info-cell .v { color: var(--cream); font-size: var(--fs-600); }
.info-cell .v.small { font-size: var(--fs-500); color: var(--sand); }

/* ============================================================
   Football / fixtures
   ============================================================ */
.fixtures { display: flex; flex-direction: column; gap: 28px; }
.fix-day { display: flex; flex-direction: column; gap: 12px; }
/* Tagesueberschrift im Spielplan. Eine Stufe ueber der reinen Rundung, weil
   sie als Abschnittsmarke traegt, und line-height 1, weil sie als Versal-Label
   sonst den Fliesstext-Durchschuss von h3 mitnimmt. */
.fix-day h3 { font-family: "Inter", sans-serif; font-weight: 600; font-size: var(--fs-400); line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.fix-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 18px; padding: 16px 20px; background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fix-row:hover { border-color: var(--gold); } }
.fix-time { font-family: "Cinzel", serif; font-size: var(--fs-700); color: var(--gold); }
.fix-teams { display: flex; flex-direction: column; gap: 3px; }
.fix-teams .t { color: var(--cream); font-weight: 500; }
.fix-league { font-size: var(--fs-200); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand-dim); }
.fix-channel { font-size: var(--fs-300); color: var(--sand); display: inline-flex; align-items: center; gap: 7px; }
.fix-channel .live-dot { width: 7px; height: 7px; }

/* ============================================================
   Modal (event detail) — modals stay centered
   ============================================================ */
.modal-root { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal-root[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(6,5,4,0.74); backdrop-filter: blur(4px); opacity: 0; transition: opacity 240ms var(--ease-out); }
.modal-card {
  position: relative; width: min(640px, 100%); max-height: 88svh; overflow: auto;
  background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg);
  transform: scale(0.96); opacity: 0; transform-origin: center;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}
.modal-root[data-open="true"] .modal-backdrop { opacity: 1; }
.modal-root[data-open="true"] .modal-card { transform: scale(1); opacity: 1; }
/* Detailansicht: Flyer immer VOLLSTAENDIG zeigen - hier steht das
   Kleingedruckte drauf.

   Frueher stand hier `aspect-ratio: 4/5` ZUSAMMEN mit `max-height: 58svh`.
   Beides zugleich deckelt nicht nur die Hoehe: der Browser haelt das
   Seitenverhaeltnis ein und schrumpft deshalb auch die BREITE mit. Gemessen
   in einer 640 px breiten Modalkarte: die Bildflaeche war nur noch 422 px
   breit und klebte oben links, rechts daneben stand ein 218 px breiter
   schwarzer Streifen. Genau das sah aus wie "oben links und nicht komplett".

   Jetzt ohne festes Seitenverhaeltnis: die Flaeche nimmt die volle Breite,
   das Bild wird ueber max-width/max-height eingepasst und bleibt dabei
   vollstaendig - egal ob der Flyer hochkant, quadratisch oder quer ist.
   min-height greift nur fuer den Platzhalter ohne Bild, damit der nicht
   auf null zusammenfaellt. */
.modal-hero {
  position: relative; width: 100%; min-height: 180px;
  background: var(--ink-900);
  display: grid; place-items: center;
}
.modal-hero > * { grid-area: 1 / 1; width: 100%; height: 100%; }
.modal-hero img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 58svh;
  justify-self: center; align-self: center;
}
.modal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--ink-800)); }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: rgba(10,9,8,0.6); border: 1px solid var(--line); color: var(--cream); display: grid; place-items: center; backdrop-filter: blur(6px); transition: transform 150ms var(--ease-out), background 150ms var(--ease-out); }
.modal-close:hover { background: rgba(10,9,8,0.85); } .modal-close:active { transform: scale(0.92); }
.modal-close svg { width: 18px; height: 18px; }
.modal-body { padding: 26px clamp(22px, 4vw, 34px) 32px; display: flex; flex-direction: column; gap: 16px; }
.modal-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: var(--fs-100); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--gold); }
.modal-body h2 { color: var(--cream); }
.modal-facts { display: flex; flex-wrap: wrap; gap: 18px 28px; padding: 16px 0; border-block: 1px solid var(--line-soft); }
.modal-facts .f { display: flex; flex-direction: column; gap: 3px; }
.modal-facts .f .k { font-size: var(--fs-100); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-dim); }
.modal-facts .f .v { color: var(--cream); }
.modal-bio { color: var(--sand); white-space: pre-line; }

/* ============================================================
   Filters / tabs
   ============================================================ */
.filterbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-head); }
.chip { padding: 9px 17px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--sand); font-size: var(--fs-400); font-weight: 500; transition: transform 150ms var(--ease-out), color 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.chip:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .chip:hover { color: var(--cream); border-color: var(--sand-dim); } }
.chip[aria-pressed="true"] { background: var(--gold-gradient); color: #2a210f; border-color: transparent; }

/* ============================================================
   Forms / Admin
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: var(--fs-300); letter-spacing: 0.06em; color: var(--sand); }
.field input, .field select, .field textarea {
  background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; color: var(--cream); font: inherit; font-size: var(--fs-500); width: 100%;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--sand-dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--ink-800); }
.field textarea { resize: vertical; min-height: 110px; }
.field .hint { font-size: var(--fs-300); line-height: 1.55; color: var(--sand-dim); margin-top: 7px; }
.field .hint b { color: var(--sand); font-weight: 600; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.card-panel { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 34px); }
.admin-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 26px; align-items: start; }
/* Grid-Spalten duerfen unter die Inhaltsbreite schrumpfen, sonst schiebt
   das Formular auf schmalen Displays die ganze Seite seitlich raus. */
.admin-grid > * { min-width: 0; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 26px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.admin-list { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow: auto; padding-right: 4px; }
.admin-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px; background: var(--ink-850); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
/* Vorschau im gleichen 4:5 wie auf der Website, damit im Admin sichtbar
   wird, wie das Bild spaeter tatsaechlich ankommt. */
.admin-item .thumb { width: 44px; height: 55px; border-radius: var(--r-sm); object-fit: cover; background: var(--ink-700); }
.admin-item .meta .t { color: var(--cream); font-size: var(--fs-500); font-weight: 500; }
.admin-item .meta .s { color: var(--sand-dim); font-size: var(--fs-300); }
.icon-btn { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--sand); border: 1px solid var(--line-soft); transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 140ms var(--ease-out); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn:hover { color: var(--gold); border-color: var(--gold); }
.icon-btn.danger:hover { color: #ff6b6b; border-color: #ff6b6b; }
.icon-btn svg { width: 16px; height: 16px; }

/* Toast / notice */
.notice { padding: 13px 16px; border-radius: var(--r-sm); font-size: var(--fs-400); border: 1px solid; }
.notice.warn { background: rgba(201,168,106,0.08); border-color: var(--line); color: var(--gold-bright); }
.notice.ok { background: rgba(96,201,120,0.08); border-color: rgba(96,201,120,0.3); color: #9fe3b0; }
.notice.err { background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.3); color: #ffb0b0; }

.toast { position: fixed; bottom: 24px; left: 50%; z-index: 300; transform: translate(-50%, 16px); opacity: 0; padding: 13px 20px; border-radius: var(--r-pill); background: var(--ink-700); border: 1px solid var(--line); color: var(--cream); font-size: var(--fs-500); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.9); transition: opacity 300ms var(--ease-out), transform 320ms var(--ease-out); }
.toast.err { border-color: rgba(255,107,107,0.4); color: #ffb0b0; }
.toast.ok { border-color: rgba(96,201,120,0.4); color: #9fe3b0; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   Empty / loading states
   ============================================================ */
.empty { text-align: center; padding: 60px 20px; color: var(--sand-dim); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty svg { width: 38px; height: 38px; color: var(--gold-deep); margin-bottom: 14px; }
.skeleton { background: linear-gradient(90deg, var(--ink-800) 25%, var(--ink-700) 50%, var(--ink-800) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-lg); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding-block: var(--space-section-tight) 30px; margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.footer-brand .word { font-family: "Cinzel", serif; letter-spacing: 0.16em; font-size: var(--fs-800); }
/* Bewusste Logo-Kachel (wie im Hero) — blend-screen scheitert hier am
   Stacking-Kontext des Footers und liesse einen rohen schwarzen Kasten. */
.footer-logo { width: 128px; height: auto; margin-bottom: 4px;
  border-radius: 14px; border: 1px solid var(--line); }
.footer-brand p { margin-top: 14px; font-size: var(--fs-500); max-width: 30em; }
.leaf-note { color: var(--living-accent); }
.footer-col h4 { font-family: "Inter", sans-serif; font-size: var(--fs-200); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; color: var(--sand); font-size: var(--fs-500); padding: 5px 0; transition: color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--gold); } }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: var(--fs-300); color: var(--sand-dim); flex-wrap: wrap; }

/* ============================================================
   Öffnungszeiten
   ============================================================ */
.hours-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.hours-row { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-500); }
.hours-row:last-child { border-bottom: 0; }
.hours-row .d { color: var(--sand); }
.hours-row .t { color: var(--cream); white-space: nowrap; }
/* Der heutige Tag wird hervorgehoben — das ist die Zeile, die 90 % der
   Besucher tatsaechlich suchen. */
.hours-row.is-today .d, .hours-row.is-today .t { color: var(--gold); font-weight: 600; }

/* Live-Status "Jetzt geoeffnet" / "Heute ab 17:00 Uhr" */
.open-now {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 13px 6px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(20, 16, 25, 0.6);
  font-size: var(--fs-300); font-weight: 600; letter-spacing: 0.02em; color: var(--sand);
}
.open-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sand-dim); flex: none; }
/* Bleibt GRUEN. Gold waere markenreiner, aber Gold ist auf dieser Seite die
   Farbe von allem - Knoepfen, Preisen, Ueberschriften-Akzenten, Tags. "Wir
   haben gerade offen" bekaeme damit dieselbe Farbe wie "Alle Events ansehen".
   Gruen ist die Konvention, die man ohne Nachdenken liest, und diese
   Information ist die wertvollste der ganzen Seite.
   Der Dauerpuls ist dagegen ENTFERNT: er lief unendlich, waehrend die Bar
   geoeffnet ist - also von 17 bis 3 Uhr, genau im Zeitfenster, in dem die
   Gaeste die Seite aufrufen. Die Information steht als Klartext daneben. */
.open-now[data-open="true"] { color: #9fe3b0; border-color: rgba(96, 201, 120, 0.32); }
.open-now[data-open="true"]::before { background: #60c978; box-shadow: 0 0 0 3px rgba(96, 201, 120, 0.16); }

/* ============================================================
   Buchungs-Panel (Firmenfeier, Geburtstag, Gruppen)
   ============================================================ */
.booking-panel {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(24px, 4vw, 44px);
  align-items: center;
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(232, 146, 61, 0.14), transparent 58%),
    var(--ink-800);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 42px);
}
.booking-panel h2 { color: var(--cream); }
.booking-panel .lead { margin-top: 12px; }
.booking-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.booking-tags span {
  font-size: var(--fs-300); font-weight: 600; letter-spacing: 0.04em;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--sand);
}
.booking-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
/* Runder Instagram-Knopf: bis Telefon/E-Mail feststehen laeuft jede
   Anfrage ueber die DM, also bekommt der Kanal die volle Buehne. */
.ig-orb {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-gradient); color: #2a210f;
  box-shadow: 0 14px 40px -14px rgba(201, 168, 106, 0.7);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.ig-orb svg { width: 38px; height: 38px; }
@media (hover: hover) and (pointer: fine) { .ig-orb:hover { transform: translateY(-3px); box-shadow: 0 20px 52px -14px rgba(201, 168, 106, 0.85); } }
.ig-orb:active { transform: scale(0.94); }
.booking-cta .hint { font-size: var(--fs-300); color: var(--sand-dim); max-width: 24em; }
.booking-cta .handle { color: var(--gold); font-weight: 600; font-size: var(--fs-500); }
@media (max-width: 900px) {
  .booking-panel { grid-template-columns: 1fr; text-align: center; }
  .booking-panel .booking-tags { justify-content: center; }
  .booking-panel .open-now { align-self: center; }
}

/* ============================================================
   Rechtstexte (Impressum / Datenschutz)
   ============================================================ */
/* Sprungziel unter den Sticky-Header schieben, sonst verdeckt er die
   Ueberschrift beim Klick auf "Impressum" im Footer. */
#impressum, #datenschutz { scroll-margin-top: calc(var(--header-h) + 20px); }
.legal { font-size: var(--fs-400); line-height: 1.7; color: var(--sand); }
.legal + .legal-h { margin-top: 18px; }
.legal-h {
  font-size: var(--fs-200); font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 5px;
}
.legal a { text-decoration: underline; text-underline-offset: 3px; }
/* Noch fehlende Pflichtangabe. Sichtbar gekennzeichnet, damit sie vor dem
   Livegang niemand uebersieht - aber ohne toten Link. */
.legal-offen {
  display: inline-block; padding: 1px 9px; border-radius: var(--r-sm);
  border: 1px dashed var(--sand-dim); color: var(--sand-dim);
  font-size: 0.86em; font-style: italic;
}
/* .legal.note wurde entfernt: der Absatz enthielt eine interne Arbeitsanweisung
   an den Betreiber und wurde dem Gast angezeigt. Der Text steht jetzt als
   HTML-Kommentar in kontakt.html. */

/* Page hero (sub-pages) — compact, no endless scroll */
.page-hero { position: relative; z-index: 1; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(20px, 3vw, 36px); }
.page-hero h1 { font-size: clamp(2rem, 1.452rem + 2.435vw, 3.4rem); letter-spacing: 0.026em; }
/* 44em waren rund 88 Zeichen pro Zeile - deutlich ueber dem gut lesbaren
   Bereich von 60 bis 75. Betrifft den ersten Absatz JEDER Unterseite, also
   genau den Text, an dem der Gast entscheidet, ob er weiterliest. */
.page-hero p { margin-top: 16px; max-width: var(--measure); text-wrap: pretty; }

/* ============================================================
   Speisekarte / Menü
   ============================================================ */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); align-items: start; }
/* Kategorien als gerahmte Panels — greift die Gold-Rahmen der Print-Karte auf */
.menu-cat {
  background: rgba(20, 16, 25, 0.55);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 26px);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.menu-cat:last-child { margin-bottom: 0; }
.menu-cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  /* Sprungziel: Platz fuer Header + Chip-Leiste beim Anspringen */
  scroll-margin-top: calc(var(--header-h) + 76px); }
.menu-cat-head h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); color: var(--cream); }
.menu-cat-head .ci { width: 21px; height: 21px; color: var(--gold); flex: none; }
.menu-cat-head .ci svg { width: 100%; height: 100%; }
.menu-cat-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* Sprungnavigation zur Kategorie — am Handy wischbare Leiste */
.cat-nav {
  position: sticky; top: var(--header-h); z-index: 40;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 4px 14px; margin: 4px -4px 24px;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--ink-900) 72%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
  mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav a {
  flex: none; padding: 9px 16px; min-height: 40px;
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: rgba(20, 16, 25, 0.7); color: var(--sand);
  /* Eine Stufe ueber der reinen Rundung: das hier ist ein Tippziel, keine
     Beschriftung. Unter 14px wird eine Pille auf dem Handy fummelig. */
  font-size: var(--fs-400); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .cat-nav a:hover { color: var(--gold); border-color: var(--gold); } }
.cat-nav a:active { transform: scale(0.96); }
.menu-list { display: flex; flex-direction: column; }
/* Grid statt Flex: die Preisspalte bekommt eine feste Breite, damit die Zahlen
   untereinander eine echte Spalte bilden. Mit space-between endete jeder Preis
   dort, wo der Name aufhoerte - bei "Aperol Spritz" und "Gin Tonic mit
   Gurke und Rosmarin" also an voellig verschiedenen Stellen. Der Gast sucht in
   einer Karte aber genau eine Zahl und faehrt dafuer die rechte Kante entlang. */
.menu-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.menu-item:last-child { border-bottom: 0; }
.menu-item .mi-main .name { color: var(--cream); font-weight: 500; }
.menu-item .mi-main .desc { color: var(--sand); font-size: var(--fs-400); margin-top: 2px; }
/* tabular-nums ist hier das Entscheidende: erst mit gleich breiten Ziffern
   stehen 9,90 und 12,50 wirklich buendig untereinander. */
.menu-item .price {
  color: var(--gold); font-family: "Cinzel", serif; font-size: var(--fs-700);
  white-space: nowrap; text-align: right; min-width: 5.5ch;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Pauschalpreis-Kategorien (alle Cocktails ein Preis): Preis am Kopf,
   Sorten als Fliesstext — spart bei 15 Positionen enorm Hoehe. */
.menu-cat-head .cat-price {
  align-self: center;
  color: #2a210f; background: var(--gold-gradient);
  font-size: var(--fs-300); font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 13px; border-radius: var(--r-pill); white-space: nowrap;
}
.menu-flow { color: var(--sand); font-size: var(--fs-500); line-height: 2; padding-block: 10px 4px; }
.menu-flow .sep { color: var(--gold-deep); padding-inline: 7px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split .media { order: -1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .admin-grid { grid-template-columns: 1fr; }
  /* Hero auf dem Handy: erst die Ueberschrift, dann der Cocktail, dann
     Untertitel und Buttons. Vorher stand die Buehne ganz oben (order: -1) und
     der Gast musste an einem Bild vorbeiscrollen, bevor ueberhaupt dastand,
     worum es hier geht.

     Der Trick ist display:contents auf .hero-copy: die Box loest sich auf,
     ihre Kinder werden selbst zu Grid-Elementen und lassen sich einzeln per
     order sortieren - ohne das HTML zu doppeln.
     ACHTUNG: mit display:contents faellt die Box weg, also padding, max-width
     und position. Was davon gebraucht wird, steht deshalb unten an den Kindern
     oder am Grid. Vererbte Eigenschaften wie text-align wirken weiterhin. */
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; padding-block: 8px 28px; text-align: center; }
  .hero-copy { display: contents; }
  .hero-copy::before { display: none; }

  .hero h1 { order: 1; }
  .hero-stage { order: 2; min-height: 38svh; max-height: 320px; margin-block: 16px 2px; }
  /* justify-self: center, weil Grid-Elemente sonst auf volle Breite gezogen
     werden - der Ticker ist eine Pille und darf nicht ueber den Schirm laufen. */
  .hero-sub { order: 3; justify-self: center; margin-top: 14px; }
  .hero-cta { order: 4; justify-content: center; margin-top: 22px; }
  .hero .ticker { order: 5; justify-self: center; margin-top: 22px; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  /* Der Instagram-Knopf bleibt am Handy stehen. Er war frueher hier mit
     ausgeblendet - damit war .header-actions leer, der Header kippte aus der
     Balance, und ausgerechnet der Kanal verschwand, ueber den laut eigener
     Seitenaussage die Reservierungen laufen. 44px ist das Mindestmass fuer
     ein Touch-Ziel. */
  .ig-link { width: 44px; height: 44px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .fix-row { grid-template-columns: 64px 1fr; }
  .fix-channel { grid-column: 2; justify-self: start; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }

  /* Admin am Handy: der Bereich wird unterwegs bedient, nicht am Schreibtisch.
     iOS Safari zoomt beim Antippen automatisch rein, sobald ein Eingabefeld
     kleiner als 16px schreibt, danach steht die Seite schief. Darum exakt 16px. */
  .field input, .field select, .field textarea { font-size: 16px; }
  .form-actions .btn { flex: 1 1 auto; }
  /* Fingerfreundliche Trefferflaechen (Apple-Richtwert 44px) */
  .chip, .btn-sm, .icon-btn, .cat-nav a { min-height: 44px; }
  .icon-btn { min-width: 44px; }
}

/* ============================================================
   Reduced motion — keep opacity, drop movement
   ============================================================ */
/* ============================================================
   Bild-Zuschneider (nur admin.html, siehe js/crop.js)
   Fester 4:5-Rahmen, das Bild wandert darunter. Was im hellen Bereich steht,
   steht spaeter exakt so auf der Event-Karte - .event-thumb hat dieselbe
   aspect-ratio 4/5 mit object-fit: cover.
   Ebene 250: ueber .modal-root (200), unter .toast (300).
   Dieser Block MUSS vor dem Reduced-Motion-Abschnitt stehen, damit dessen
   !important-Regeln greifen.
   ============================================================ */
.crop-sheet { position: fixed; inset: 0; z-index: 250; display: flex; align-items: flex-end; justify-content: center; }
/* noetig: display:flex schlaegt sonst das browsereigene [hidden] */
.crop-sheet[hidden] { display: none; }
.crop-backdrop { position: absolute; inset: 0; background: rgba(6,5,4,0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 240ms var(--ease-out); }
.crop-card {
  position: relative; width: min(440px, 100%); max-height: 96svh; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 13px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-800); border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(12%); opacity: 0;
  transition: transform 320ms var(--ease-drawer), opacity 200ms var(--ease-out);
}
.crop-sheet[data-open="true"] .crop-backdrop { opacity: 1; }
.crop-sheet[data-open="true"] .crop-card { transform: none; opacity: 1; }
@media (min-width: 721px) {
  .crop-sheet { align-items: center; }
  .crop-card { border-radius: var(--r-lg); transform: scale(0.97); }
}
.crop-card h3 { color: var(--cream); font-size: var(--fs-700); }
.crop-help { font-size: var(--fs-300); line-height: 1.5; color: var(--sand-dim); }

/* touch-action: none ist Pflicht - sonst scrollt beim Ziehen die Seite mit.
   -webkit-touch-callout verhindert das "Bild sichern"-Menue bei langem Druck. */
.crop-stage {
  position: relative; display: grid; place-items: center; padding: 14px; overflow: hidden;
  background: var(--ink-900); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  touch-action: none; overscroll-behavior: contain; cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.crop-stage.is-grabbing { cursor: grabbing; }
/* Der Tastaturfokus wird am Rahmen gezeigt, nicht an der Buehne. */
.crop-stage:focus-visible { outline: none; }
.crop-stage:focus-visible .crop-mask { outline: 2px solid var(--gold); }

.crop-frame { position: relative; width: min(300px, 68vw, 34svh); aspect-ratio: 4 / 5; }
/* will-change steht BEWUSST nicht hier, sondern wird in js/crop.js nur waehrend
   der Geste gesetzt. Dauerhaft haelt der Browser sonst eine Compositing-Ebene in
   voller Bildgroesse vor - bei einem grossen Foto genau der Speicherdruck,
   gegen den die Pixelbremse im Skript arbeitet. */
.crop-img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
/* Uebergang nur um diskrete Spruenge herum (Neu ausrichten, Plus/Minus), nie
   beim Ziehen - sonst hinkt das Bild dem Finger hinterher. Weil es ein
   CSS-Uebergang ist, schaltet ihn der Reduced-Motion-Block darunter automatisch
   ab; eine JS-Schleife muesste ihre eigene matchMedia-Abfrage mitschleppen. */
.crop-img.is-easing { transition: transform 260ms var(--ease-out); }
/* Die Maske liegt NACH dem Bild im DOM und malt darueber; ihr eigener Kasten
   bleibt transparent, der riesige Schatten-Spread dunkelt alles ausserhalb ab.
   Geklippt wird erst an .crop-stage. So sieht der Betreiber, was wegfaellt. */
.crop-mask { position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 9999px rgba(11,9,7,0.74); outline: 1px solid rgba(201,168,106,0.85); outline-offset: -1px; }

.crop-controls { display: grid; grid-template-columns: auto 44px 1fr 44px; align-items: center; gap: 9px; }
.crop-controls label { font-size: var(--fs-300); letter-spacing: 0.06em; color: var(--sand); }
.crop-step { width: 44px; min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--cream); font-size: var(--fs-700); line-height: 1; display: grid; place-items: center; transition: border-color 160ms var(--ease-out), transform 140ms var(--ease-out); }
.crop-step:active { transform: scale(0.94); }
.crop-step:disabled { opacity: 0.4; }
#crop-zoom { width: 100%; height: 44px; accent-color: var(--gold); background: transparent; }

.crop-foot { display: flex; align-items: center; gap: 10px; }
.crop-status { flex: 1; min-height: 1.3em; font-size: var(--fs-300); line-height: 1.4; color: var(--sand-dim); }
.crop-status.is-warn { color: var(--gold-bright); }
.crop-foot .btn { flex: none; }
.crop-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crop-actions .btn { width: 100%; }

/* Vorschau im Formular. Sie bestaetigt dauerhaft, was gleich hochgeht - der
   Toast ist nach 2,6 Sekunden weg. 52x65 ist dasselbe 4:5 wie .admin-item .thumb. */
.crop-preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; background: var(--ink-850); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.crop-preview[hidden] { display: none; }
.crop-preview img { width: 52px; height: 65px; object-fit: cover; border-radius: var(--r-sm); flex: none; background: var(--ink-700); }
.crop-preview img[hidden] { display: none; }
.crop-preview .pv { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.crop-preview b { color: var(--cream); font-size: var(--fs-400); font-weight: 600; }
.crop-preview span { color: var(--sand-dim); font-size: var(--fs-300); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  /* !important ist hier noetig, nicht bequem: der Startzustand steht unter
     :root[data-js] .reveal und hat damit Spezifitaet 0,2,1 - diese Regel hier
     hat 0,1,0 und wuerde ohne !important verlieren. Dann haenge die
     Sichtbarkeit allein am IntersectionObserver, und genau die statische
     Absicherung, fuer die dieser Block da ist, waere weg. */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Mobile bottom navigation (app-style) — replaces the top nav
   on phones only. Injected globally via ui.js.
   ============================================================ */
.mobile-bottom-nav { display: none; }
@media (max-width: 720px) {
  .mobile-bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    justify-content: space-around; gap: 2px;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--ink-850) 86%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 32px -20px rgba(0, 0, 0, 0.95);
  }
  /* 11px statt der bisherigen 8,6 bis 9,9px und --sand statt --sand-dim: die
     Beschriftung war kleiner als alles andere auf der Seite und zugleich das,
     was der Gast im Halbdunkel einer Bar treffen soll. 48px Mindesthoehe ist
     die Trefferflaeche, nicht die Textgroesse. */
  .mobile-bottom-nav a {
    flex: 1 1 0; min-width: 0; min-height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 1px; color: var(--sand); font-size: 0.6875rem; letter-spacing: 0;
    text-align: center; line-height: 1; white-space: nowrap;
    transition: color 160ms var(--ease-out), transform 120ms var(--ease-out);
  }
  .mobile-bottom-nav a svg { width: 21px; height: 21px; flex: none; }
  .mobile-bottom-nav a[aria-current="page"] { color: var(--gold); }
  .mobile-bottom-nav a[aria-current="page"] svg { filter: drop-shadow(0 0 8px rgba(201, 168, 106, 0.4)); }
  /* 0.9 war ein sehr harter Einschlag fuer ein Navigationsziel. */
  .mobile-bottom-nav a:active { transform: scale(0.96); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* über der Bottom-Nav */
}

/* ============================================================
   Flaechen-Rezept
   ------------------------------------------------------------
   Ein Ort fuer alle Karten und Panels. Vorher steckte die einzige echte
   Tiefe (der warme Innenschatten) ausschliesslich in
   @media (hover: hover) - auf dem Handy, wo die Mehrheit der Gaeste
   ankommt, war die Seite damit eine Sammlung flacher Rechtecke.
   Steht bewusst am Dateiende: gleiche Spezifitaet wie die Ursprungsregeln,
   spaeter in der Quellreihenfolge, gewinnt also.
   ============================================================ */
.event-card,
.feature {
  background-image: var(--surface-sheen);
  background-color: var(--ink-700);
  background-repeat: no-repeat;
  box-shadow: var(--surface-edge), var(--surface-lift);
}
.card-panel,
.fix-row {
  background-image: var(--surface-sheen);
  background-color: var(--ink-800);
  background-repeat: no-repeat;
  box-shadow: var(--surface-edge), var(--surface-lift);
}
.menu-cat {
  background-image: var(--surface-sheen);
  background-color: rgb(20 16 25 / 0.55);
  background-repeat: no-repeat;
  box-shadow: var(--surface-edge);
}
/* .info-grid zeichnet seine Trenner ueber gap: 1px - hier NUR die Oberkante,
   sonst sitzt die Linie doppelt. */
.info-cell {
  background-image: var(--surface-sheen);
  background-color: var(--ink-800);
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgb(var(--cream-rgb) / 0.06);
}
/* Modal ist die hoechste Ebene, also die hellste Flaeche. Nutzt endlich
   --ink-600 (#25201b, warm) und gibt der ink-Rampe damit eine Bedeutung
   (Seite -> Karte -> Modal) statt nur eine Nummerierung. */
.modal-card {
  background-image: var(--surface-sheen);
  background-color: var(--ink-600);
  background-repeat: no-repeat;
  box-shadow: var(--surface-edge), 0 40px 90px -40px rgb(0 0 0 / 0.95);
}
/* mitziehen, sonst blendet der Flyer gegen die falsche Farbe aus */
.modal-hero::after { background: linear-gradient(180deg, transparent 45%, var(--ink-600)); }

/* Hover ERGAENZT jetzt Tiefe, statt sie ueberhaupt erst zu erzeugen. */
@media (hover: hover) and (pointer: fine) {
  .event-card:hover {
    translate: 0 -4px; border-color: var(--gold);
    box-shadow: var(--surface-edge),
                inset 0 -52px 64px -44px rgb(var(--warm-glow-rgb) / 0.26),
                0 28px 56px -26px rgb(0 0 0 / 0.9);
  }
  .feature:hover {
    translate: 0 -3px; border-color: var(--gold);
    box-shadow: var(--surface-edge),
                inset 0 -48px 60px -44px rgb(var(--warm-glow-rgb) / 0.24),
                0 24px 48px -26px rgb(0 0 0 / 0.9);
  }
}
/* Touch bekommt denselben warmen Aufschein beim Antippen - bisher gab es auf
   dem Handy ueberhaupt keine Tiefenreaktion auf eine Beruehrung. */
@media (hover: none) {
  .event-card:active, .feature:active {
    box-shadow: var(--surface-edge),
                inset 0 -52px 64px -44px rgb(var(--warm-glow-rgb) / 0.26);
  }
}

/* ============================================================
   Die drei Welten auf der Startseite
   ------------------------------------------------------------
   Statt drei gleich grosser Kacheln (das haeufigste Muster ueberhaupt und
   damit das aussageloseste) bekommt die Bar die breite Kachel oben, Lounge
   und Sports Bar teilen sich die Reihe darunter. Das erzeugt eine
   Rangfolge, wo vorher nur eine Aufzaehlung stand.
   ============================================================ */
.worlds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 24px); }
.worlds > .feature:first-child { grid-column: 1 / -1; }
/* Die breite Kachel darf ihren Text nicht ueber die ganze Breite ziehen. */
.worlds > .feature:first-child p { max-width: var(--measure); }
@media (max-width: 720px) {
  /* Erst hier einspaltig. Auf dem Tablet (721 bis 900px) blieben sonst drei
     Kacheln untereinander stehen, wo vorher zwei nebeneinander passten - genau
     auf der Breite, auf der viele Gaeste das Geraet quer halten. */
  .worlds { grid-template-columns: 1fr; }
}

/* ============================================================
   Breite Bild-Sektion (lounge.html, dritter Abschnitt)
   ------------------------------------------------------------
   Bricht die Zickzack-Reihe: nach zwei Bild-Text-Wechseln liest ein
   dritter sich nicht mehr als Rhythmus, sondern als Schablone.
   ============================================================ */
.wide-feature { display: flex; flex-direction: column; gap: clamp(24px, 4vw, 40px); }
.wide-feature-media {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--ink-700); aspect-ratio: 16 / 7;
}
.wide-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wide-feature .body { display: flex; flex-direction: column; gap: 18px; max-width: var(--measure); }
@media (max-width: 720px) {
  /* Hochkant-Quelle: bei 16:7 bliebe auf dem Handy ein Briefschlitz uebrig. */
  .wide-feature-media { aspect-ratio: 4 / 3; }
}