/* =============================================================
   LIMA LOUNGE — Shisha-Bar Walldorf
   Premium Dark + Gold Design System
   Fonts lokal selbst-gehostet (assets/fonts/fonts.css) — bewusst KEIN
   Google-Fonts-CDN (DSGVO: keine Besucher-IP an Google beim Seitenaufruf).
   Farben/Fonts zentral hier in :root → 1 Stelle zum Anpassen.
   ============================================================= */

:root {
  /* --- Farben --- */
  --bg: #0a0a0b;
  --bg-1: #0e0d10;
  --bg-2: #131216;
  --bg-elev: #17151b;
  --bg-glass: rgba(18, 16, 21, 0.72);

  --gold: #c9a24b;
  --gold-soft: #d9b766;
  --gold-light: #ecd79a;
  --gold-deep: #98782f;

  --text: #f4efe4;
  --muted: #a9a193;
  --muted-2: #948c7d;
  --line: rgba(201, 162, 75, 0.20);
  --line-soft: rgba(255, 255, 255, 0.07);

  /* Gold-Verlauf für Headline-Akzente & edle Linien */
  --grad-gold: linear-gradient(115deg, #ecd79a 0%, #c9a24b 38%, #f6e7bd 64%, #a9842f 100%);
  --grad-gold-line: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-light) 50%, var(--gold) 82%, transparent);

  /* --- Typografie --- */
  --font-display: "Clash Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Layout --- */
  --container: 1200px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 10px 40px -12px rgba(201, 162, 75, 0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------- Reset / Base ----------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* dezente Hintergrund-Textur (Vignette + warmer Schimmer) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(201, 162, 75, 0.10), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(201, 162, 75, 0.06), transparent 55%);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

::selection { background: rgba(201, 162, 75, 0.3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------- Layout-Helfer ----------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 1;
}

.section { padding: clamp(64px, 9vw, 130px) 0; position: relative; z-index: 1; }
section[id], .hero[id] { scroll-margin-top: 84px; }

.section-head { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--grad-gold-line);
}
.section-head.left .eyebrow::after,
.eyebrow.solo::after { display: none; }

.section-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: -0.015em;
}
/* Gold als gezielter Akzent (ein Wort), nicht als Dauer-Verlauf auf allem —
   Zurückhaltung liest sich hochwertiger als Dauer-Glanz. */
.section-title .accent { color: var(--gold-light); }
.section-sub { color: var(--muted); margin-top: 16px; font-size: 1.05rem; }

.gold-text { color: var(--gold-light); }

/* ----------------------------- Buttons ----------------------------- */
/* Buttons: kein Pillen-Radius, kein Verlauf, kein Glow-Lift.
   Ruhige, kantige Form + solides Gold = wirkt gemeint, nicht generiert. */
.btn {
  --btn-pad-y: 15px;
  --btn-pad-x: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.015em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }

.btn-gold {
  background: var(--gold);
  color: #17120a;
}
.btn-gold:hover { background: var(--gold-light); }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(201, 162, 75, 0.05);
}

.btn-lg { --btn-pad-y: 17px; --btn-pad-x: 34px; font-size: 1rem; }

/* ----------------------------- Navbar ----------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
    backdrop-filter 0.45s var(--ease), padding 0.45s var(--ease);
  padding: 22px 0;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding: 14px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand .brand-mark { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 4px 16px -6px rgba(0,0,0,0.6); }
.brand .brand-text { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.52rem;
  letter-spacing: 0.42em;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}

.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  position: relative;
  padding: 6px 0;
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--grad-gold-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta { display: inline-flex; align-items: center; gap: 16px; }

/* Burger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 120;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 2px;
  background: var(--gold-light);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span::before { transform: translate(-50%, -8px); }
.nav-toggle span::after { transform: translate(-50%, 8px); }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { transform: translate(-50%, 0) rotate(45deg); }
body.menu-open .nav-toggle span::after { transform: translate(-50%, 0) rotate(-45deg); }

/* Mobile Overlay-Menü */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: linear-gradient(160deg, #0c0b0e 0%, #070608 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s;
}
body.menu-open .nav-overlay { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-overlay a {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--text);
  letter-spacing: 0.04em;
  opacity: 0.85;
  transition: color 0.3s, opacity 0.3s;
}
.nav-overlay a:hover { color: var(--gold-light); opacity: 1; }
.nav-overlay .btn { margin-top: 14px; }

/* ----------------------------- Hero ----------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(110% 90% at 70% 18%, #1d1812 0%, #0c0a0b 46%, #060507 100%);
}
/* Hintergrundvideo — liegt auf dem Gradient, unter Glows und Text.
   Bleibt unsichtbar bis es wirklich spielt, sonst greift der Gradient-Fallback. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  filter: brightness(0.6) saturate(0.85) contrast(1.05);
  pointer-events: none;
}
.hero-video.is-ready { opacity: 1; }
/* warmer Schleier + zentrale Abdunklung: der Rauch im Video ist hellweiss
   und genau dort, wo Logo und Tagline stehen */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(85% 65% at 50% 45%, rgba(6,5,7,0.42), transparent 72%),
    linear-gradient(180deg, rgba(29,24,18,0.3), rgba(12,10,11,0.18) 45%, rgba(6,5,7,0.55));
}
/* Mashrabiya-Gitter: echte architektonische Textur (Laternenschirm),
   dichter zum Rand, hinter dem Logo ausgeblendet — ersetzt die generischen Blobs. */
.hero-lattice {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../assets/img/lattice.svg") center / 210px repeat;
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 42%, transparent 44%, #000 100%);
  mask-image: radial-gradient(125% 100% at 50% 42%, transparent 44%, #000 100%);
  pointer-events: none;
}

/* Canvas-Rauch liegt über dem Gitter, hinter dem Text */
#smoke {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.8s var(--ease);
}
#smoke.is-off { opacity: 0; }
/* Gitter tritt zurück, sobald das Video übernimmt */
.hero.video-active .hero-lattice { opacity: 0.05; }
/* feine Körnung + Vignette für edlen Foto-Look */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 22%, transparent 70%, rgba(0,0,0,0.7));
}

.hero-content { padding: 130px 0 90px; max-width: 860px; }

/* Rezensions-Nachweis ohne Oval: klare Typo statt Pillen-Badge. */
.hero-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 28px;
}
.hero-badge .stars { color: var(--gold); letter-spacing: 0.08em; font-size: 0.98rem; }
.hero-badge strong { color: var(--text); font-weight: 600; }

.hero h1 {
  font-size: clamp(3.1rem, 11vw, 7.5rem);
  line-height: 0.96;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
/* Echtes Logo im Hero */
.hero-logo { margin: 0 0 22px; line-height: 0; }
.hero-logo img {
  width: clamp(210px, 30vw, 330px);
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 0 55px rgba(201, 162, 75, 0.5));
}
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  color: var(--gold-light);
  letter-spacing: 0.005em;
  margin: 8px 0 6px;
}
.hero-sub {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 540px;
  margin-bottom: 38px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ----------------------------- Scroll-Reveal ----------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

/* ----------------------------- Erlebnis / Über uns ----------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.about-copy .section-title { margin-bottom: 22px; }
.about-copy p { color: var(--muted); font-size: 1.06rem; }
.about-copy .lead { color: var(--text); font-size: 1.18rem; }

.about-media { position: relative; }
.about-media .frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
}

.about-media .frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-media .badge-float {
  position: absolute;
  left: -26px; bottom: 36px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
  text-align: center;
}
.about-media .badge-float .num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-media .badge-float .lbl { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line-soft);
}
.stats .stat .num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats .stat .lbl { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.06em; margin-top: 4px; }

/* ----------------------------- Was dich erwartet ----------------------------- */
.offer-head { max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); }
.offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 6vw, 84px);
}
.offer-list li {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 26px 4px;
  border-top: 1px solid var(--line-soft);
}
.offer-idx {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  flex: none;
}
.offer-list h3 { font-size: 1.35rem; margin-bottom: 8px; }
.offer-list p { color: var(--muted); font-size: 0.98rem; margin: 0; }

/* Foto-Platzhalter bis echte Fotos da sind — bewusst gestaltet, kein Fake-Bild */
.photo-slot {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  overflow: hidden;
}
.photo-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/lattice.svg") center / 150px repeat;
  opacity: 0.06;
  pointer-events: none;
}
.photo-slot .ps-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  color: var(--gold-deep);
}
.photo-slot .ps-inner svg { width: 30px; height: 30px; }
.photo-slot .ps-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ----------------------------- Speisekarte ----------------------------- */
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 50px; }
.menu-tab {
  padding: 11px 22px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.menu-tab:hover { color: var(--text); border-color: var(--gold); }
.menu-tab.active { background: var(--gold); color: #17120a; border-color: transparent; font-weight: 600; }

.menu-panel { display: none; }
.menu-panel.active { display: block; animation: fadeUp 0.6s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); }
.menu-group h3 {
  font-size: 1.05rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.menu-item { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--line-soft); }
.menu-item:last-child { border-bottom: 0; }
.menu-item .mi-name { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--text); white-space: nowrap; }
.menu-item .mi-desc { font-size: 0.85rem; color: var(--muted-2); display: block; font-family: var(--font-body); margin-top: 2px; }
.menu-item .mi-dots { flex: 1; border-bottom: 1px dotted rgba(255,255,255,0.14); transform: translateY(-4px); }
.menu-item .mi-price { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--gold-light); white-space: nowrap; }
.menu-note { text-align: center; color: var(--muted-2); font-size: 0.85rem; margin-top: 44px; letter-spacing: 0.02em; }

/* ----------------------------- Galerie ----------------------------- */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  cursor: pointer;
  margin: 0; /* figure bringt vom Browser 1em/40px mit und sprengt sonst das Raster */
  aspect-ratio: 3 / 2;
}
/* Das eine echte Foto ist Hochformat und spannt beide Zeilen */
.gallery-item.real { grid-row: span 2; aspect-ratio: 3 / 4; }
.gallery .photo-slot { aspect-ratio: 3 / 2; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.gallery-item .zoom-ico {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-glass);
  border: 1px solid var(--line);
  color: var(--gold-light);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover .zoom-ico { opacity: 1; transform: scale(1); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 4, 6, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: scale(0.96);
  transition: transform 0.4s var(--ease);
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 24px; right: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--gold-light);
  font-size: 1.4rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.3s var(--ease);
}
.lightbox-close:hover { border-color: var(--gold); transform: rotate(90deg); }
.lightbox-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--gold-light);
  font-size: 1.5rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.3s var(--ease);
}
.lightbox-nav:hover { border-color: var(--gold); background: rgba(201,162,75,0.08); }
.lightbox-nav.prev { left: 18px; }
.lightbox-nav.next { right: 18px; }

/* ----------------------------- Bewertungen ----------------------------- */
.reviews-wrap { display: grid; grid-template-columns: 0.8fr 2fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.reviews-score {
  text-align: center;
  padding: 40px 28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
}
.reviews-score .big {
  font-family: var(--font-display);
  font-size: 4.6rem;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reviews-score .stars { color: var(--gold); font-size: 1.3rem; letter-spacing: 0.15em; margin: 10px 0 8px; }
.reviews-score .count { color: var(--muted); font-size: 0.9rem; }
.reviews-score .src { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.82rem; color: var(--gold-light); border-top: 1px solid var(--line-soft); padding-top: 16px; }

.reviews-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.review {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.review:hover { transform: translateY(-5px); border-color: var(--line); }
.review .stars { color: var(--gold); letter-spacing: 0.12em; margin-bottom: 14px; font-size: 0.95rem; }
.review p { font-family: var(--font-body); font-style: italic; font-size: 1.02rem; color: var(--text); line-height: 1.65; }
.review .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.review .who .av {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-gold);
  color: #1a1305; font-weight: 700; font-family: var(--font-display);
}
.review .who .nm { font-size: 0.92rem; font-weight: 600; }
.review .who .mt { font-size: 0.76rem; color: var(--muted-2); }

/* ----------------------------- Standort / Öffnungszeiten ----------------------------- */
.visit-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 60px); align-items: stretch; }
.hours-card {
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
}
.hours-card h3 { font-size: 1.7rem; margin-bottom: 6px; }
.hours-card .hint { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; }

/* Live-Status: heute geöffnet / geschlossen (per JS aus den Zeilen berechnet) */
.hours-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
}
.hours-status::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted-2);
  flex: none;
}
.hours-status.is-open { color: var(--gold-light); }
.hours-status.is-open::before {
  background: #57c07a;
  box-shadow: 0 0 0 4px rgba(87, 192, 122, 0.16);
}
.hours-status.is-closed::before { background: #c06a45; }
.hours-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.hours-row:last-of-type { border-bottom: 0; }
.hours-row .day { color: var(--muted); letter-spacing: 0.04em; }
.hours-row.today .day { color: var(--gold-light); font-weight: 600; }
.hours-row .time { font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; color: var(--text); }
.hours-row.today .time { color: var(--gold-light); }
.hours-row .closed { color: var(--muted-2); font-size: 0.95rem; }

.contact-lines { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.contact-line { display: flex; align-items: center; gap: 14px; color: var(--text); }
.contact-line svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.contact-line a:hover { color: var(--gold-light); }
.contact-line span small { display: block; color: var(--muted-2); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 420px;
  position: relative;
  box-shadow: var(--shadow);
}
.map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(0.4) invert(0.9) hue-rotate(180deg) contrast(0.9); }

/* Consent-Hinweis vor dem Laden der Google-Maps-Karte (DSGVO) */
.map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 32px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,162,75,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.map-consent .ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(201,162,75,0.08);
  color: var(--gold-light);
}
.map-consent .ico svg { width: 24px; height: 24px; }
.map-consent p { max-width: 380px; color: var(--muted); font-size: 0.9rem; margin: 0; }
.map-consent .map-consent-link { font-size: 0.84rem; color: var(--muted-2); text-decoration: underline; text-underline-offset: 3px; }
.map-consent .map-consent-link:hover { color: var(--gold-light); }

/* ----------------------------- CTA-Band ----------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-inner {
  text-align: center;
  padding: clamp(54px, 8vw, 96px) clamp(24px, 5vw, 80px);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(201,162,75,0.16), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/lattice.svg") center / 200px repeat;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner h2 { font-size: clamp(2rem, 5vw, 3.3rem); margin-bottom: 16px; }
.cta-inner p { color: var(--muted); max-width: 520px; margin: 0 auto 34px; font-size: 1.08rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ----------------------------- Footer ----------------------------- */
.footer { border-top: 1px solid var(--line-soft); padding: 70px 0 32px; position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-soft); }
.footer .brand { margin-bottom: 18px; }
.footer-about p { color: var(--muted); font-size: 0.95rem; max-width: 320px; }
.footer-col h3 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer-col a { color: var(--muted); font-size: 0.95rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold-light); }
.socials { display: flex; gap: 12px; margin-top: 6px; }
.socials a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--muted);
  transition: all 0.35s var(--ease);
}
.socials a:hover { color: var(--gold-light); border-color: var(--gold); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 26px; color: var(--muted-2); font-size: 0.84rem; }
.footer-bottom a { color: var(--muted-2); }
.footer-bottom a:hover { color: var(--gold-light); }

/* ----------------------------- Floating Anruf-Button ----------------------------- */
.call-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: grid; place-items: center;
  box-shadow: 0 12px 34px -8px rgba(201, 162, 75, 0.6);
  transition: transform 0.4s var(--ease);
  animation: callPulse 2.6s infinite;
}
.call-float:hover { transform: scale(1.08); }
.call-float svg { width: 27px; height: 27px; color: #1a1305; }
@keyframes callPulse {
  0% { box-shadow: 0 12px 34px -8px rgba(201,162,75,0.6), 0 0 0 0 rgba(201,162,75,0.5); }
  70% { box-shadow: 0 12px 34px -8px rgba(201,162,75,0.6), 0 0 0 16px rgba(201,162,75,0); }
  100% { box-shadow: 0 12px 34px -8px rgba(201,162,75,0.6), 0 0 0 0 rgba(201,162,75,0); }
}

/* ----------------------------- Legal-Seiten ----------------------------- */
.legal { padding: 160px 0 100px; position: relative; z-index: 1; }
.legal .container { max-width: 820px; }
.legal h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: 14px; }
.legal .lead { color: var(--muted); margin-bottom: 48px; }
.legal h2 { font-size: 1.5rem; margin: 40px 0 14px; color: var(--gold-light); }
.legal h3 { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0.04em; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--muted); }
.legal a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.legal .todo {
  background: rgba(201,162,75,0.07);
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--gold-light);
  font-size: 0.9rem;
  margin: 24px 0;
}
.back-home { display: inline-flex; align-items: center; gap: 8px; margin-top: 50px; color: var(--gold-light); font-weight: 500; }
.back-home:hover { gap: 12px; }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width: 980px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; max-width: 460px; }
  .reviews-wrap { grid-template-columns: 1fr; }
  .visit-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .menu-cols { grid-template-columns: 1fr; gap: 36px; }
  .reviews-list { grid-template-columns: 1fr; }
  .offer-list { grid-template-columns: 1fr; }
  .stats { gap: 16px; }
  .about-media .badge-float { left: 50%; transform: translateX(-50%); bottom: -26px; }
}

@media (max-width: 480px) {
  .container { padding-inline: 18px; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .stats { grid-template-columns: 1fr; text-align: center; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item.real { grid-row: auto; aspect-ratio: 3 / 4; }
}

/* ----------------------------- Reduced Motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  #smoke, .hero-glow { display: none; }
}

/* =============================================================
   Anti-Template-Umbau
   -------------------------------------------------------------
   Die Formen hier leiten sich aus dem Markenzeichen ab. Das
   Mashrabiya-Muster (lattice.svg) ist ein Khatam, ein Stern aus
   zwei um 45 Grad gedrehten Quadraten. Diese 45 Grad kehren als
   Fase an den Belegblöcken wieder, damit das Zeichen die
   Formensprache der Seite liefert und nicht nur als Aufkleber
   oben links sitzt.
   ============================================================= */

:root {
  /* Fasenmass, abgeleitet aus dem 45-Grad-Winkel des Khatam. */
  --fase: 14px;
}

/* --- Hero: eine Handlung, eine leisere Alternative --- */
.hero-quiet {
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero-quiet:hover,
.hero-quiet:focus-visible { color: var(--gold-light); border-color: var(--gold); }

.hero-proof {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-proof .stars { color: var(--gold); letter-spacing: 0.08em; }
.hero-proof strong { color: var(--text); font-weight: 600; }

/* --- Das eine echte Foto, als Beleg gesetzt --- */
.photo-real { margin: 0; overflow: hidden; }
.photo-real img { display: block; width: 100%; height: auto; }
.photo-real figcaption {
  padding: 14px 18px;
  font-size: 0.85rem;
  color: var(--muted-2);
  border-top: 1px solid var(--line-soft);
  background: var(--bg-1);
}

/* --- Belegte Gründe statt gleichartiger Vorteilskarten --- */
.reason-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .reason-list { grid-template-columns: 1fr 1fr; gap: 48px 56px; }
}
.reason h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--text);
}
.reason > p { margin: 0 0 18px; color: var(--muted); }

/* Der Beleg. Die Fase unten rechts ist der 45-Grad-Winkel des Khatam. */
.reason blockquote {
  margin: 0;
  padding: 18px 20px;
  background: var(--bg-1);
  border-left: 2px solid var(--gold-deep);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, 0 100%);
}
.reason cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted-2);
}
.reason-note { margin: 36px 0 0; font-size: 0.875rem; color: var(--muted-2); }
.reason-note a { color: var(--gold-light); }

/* --- Reservierung nur per Telefon --- */
.phone-only { max-width: 62ch; }
.phone-only p { color: var(--muted); }
.phone-only .lead { color: var(--text); }
.phone-only .btn { margin-top: 12px; }
.phone-note { margin: 14px 0 0; font-size: 0.85rem; color: var(--muted-2); }

/* =============================================================
   Obergrenze fuer grosse Bildschirme
   -------------------------------------------------------------
   Gemessen wurde: bei 2560 trug die Huelle 47 Prozent der
   Fensterbreite, und Ueberschrift, Kopfleiste und
   Hauptschaltflaeche waren identisch mit 1280. Oberhalb der
   letzten Bruchstelle gab es also keine Regel mehr, die Seite
   sass in einem Streifen in der Mitte.

   Die beiden Stufen hier sind diese Regel. Sie sind bewusst
   gesetzt und nicht vom Framework geerbt.
   ============================================================= */

@media (min-width: 1600px) {
  :root { --container: 1360px; }
  .container { padding-inline: 32px; }
  .nav-inner { min-height: 96px; }
  .hero-tagline { font-size: clamp(2.4rem, 2.7vw, 3.1rem); }
  .hero-sub { font-size: 1.15rem; max-width: 62ch; }
  .reason-list { gap: 56px 72px; }
}

@media (min-width: 2100px) {
  :root { --container: 1560px; }
  .nav-inner { min-height: 104px; }
  .hero-tagline { font-size: 3.4rem; }
  .hero-sub { font-size: 1.22rem; }
  .section-title { font-size: 3.9rem; }
  .btn-lg { padding: 20px 36px; font-size: 1.06rem; }
  .reason h3 { font-size: 1.55rem; }
  .reason blockquote { font-size: 1.02rem; padding: 22px 24px; }
}