/* ===== MI AMOR - Stylesheet ===== */
/* Design tokens recreated from original */

:root {
  --background: 40 20% 97%;
  --foreground: 160 25% 12%;
  --card: 0 0% 100%;
  --card-foreground: 160 25% 12%;
  --primary: 160 30% 14%;
  --primary-foreground: 40 20% 97%;
  --muted: 40 10% 94%;
  --muted-foreground: 160 10% 45%;
  --accent: 43 72% 52%;
  --border: 40 15% 88%;
  --input: 40 15% 90%;
  --ring: 43 72% 52%;
  --radius: 0.5rem;

  --gold: 43 72% 52%;
  --gold-light: 43 60% 68%;
  --gold-dark: 43 80% 38%;
  --forest: 160 30% 14%;
  --forest-light: 160 22% 22%;
  --forest-dark: 160 35% 8%;
  --obsidian: 160 20% 6%;
  --cream: 40 20% 97%;
  --cream-dark: 40 15% 92%;
}

/* ============================================================
 * FONTS — komplett lokal gehostet (keine externe Verbindung!)
 * Relative Pfade (../fonts/) → funktioniert in jedem Unterordner.
 * ============================================================ */

/* ---- Inter (Body) ---- */
@font-face { font-family: "Inter"; src: url("../fonts/inter-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---- Playfair Display (Headings) ---- */
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

/* ---- Custom Brand Fonts ---- */
@font-face {
  font-family: "Espano";
  src: url("../fonts/Espano-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope Custom";
  src: url("../fonts/Manrope-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border-color: hsl(var(--border)); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}
@media (min-width: 640px) { .container { padding-right: 1.5rem; padding-left: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-right: 2rem; padding-left: 2rem; } }
@media (min-width: 1400px) { .container { max-width: 1400px; } }

.min-h-screen { min-height: 100vh; min-height: 100dvh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-60 { z-index: 60; }
.z-100 { z-index: 100; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.grid { display: grid; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }
.gap-24 { gap: 6rem; }
.gap-px { gap: 1px; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-serif { font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-tight { line-height: 1.15; }
.leading-relaxed { line-height: 1.625; }
.leading-none { line-height: 1; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.cursor-pointer { cursor: pointer; }

/* ===== SPACING UTILITIES ===== */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-16 { margin-top: 4rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.p-2 { padding: 0.5rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-32 { padding-top: 8rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-12 > * + * { margin-top: 3rem; }

/* Type sizes */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1.05; }
.text-6xl { font-size: 3.75rem; line-height: 1.05; }
.text-7xl { font-size: 4.5rem; line-height: 0.95; }
.text-8xl { font-size: 6rem; line-height: 0.95; }

/* Sizes */
.w-3 { width: 0.75rem; } .h-3 { height: 0.75rem; }
.w-3\.5 { width: 0.875rem; } .h-3\.5 { height: 0.875rem; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }
.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.w-7 { width: 1.75rem; } .h-7 { height: 1.75rem; }
.w-8 { width: 2rem; } .h-8 { height: 2rem; }
.w-9 { width: 2.25rem; } .h-9 { height: 2.25rem; }
.w-10 { width: 2.5rem; } .h-10 { height: 2.5rem; }
.w-12 { width: 3rem; } .h-12 { height: 3rem; }
.w-14 { width: 3.5rem; } .h-14 { height: 3.5rem; }
.w-16 { width: 4rem; } .h-16 { height: 4rem; }
.w-full { width: 100%; } .h-full { height: 100%; }
.w-auto { width: auto; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.aspect-3-4 { aspect-ratio: 3/4; }
.aspect-4-3 { aspect-ratio: 4/3; }
.aspect-4-5 { aspect-ratio: 4/5; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center { object-position: center; }
.object-pos-70 { object-position: center 70%; }

/* Borders */
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.rounded-full { border-radius: 9999px; }

/* ===== COLOR UTILITIES ===== */
.bg-cream { background-color: hsl(var(--cream)); }
.bg-obsidian { background-color: hsl(var(--obsidian)); }
.bg-forest { background-color: hsl(var(--forest)); }
.bg-forest-dark { background-color: hsl(var(--forest-dark)); }
.bg-forest-light { background-color: hsl(var(--forest-light)); }
.bg-gold { background-color: hsl(var(--gold)); }
.bg-background { background-color: hsl(var(--background)); }
.bg-transparent { background-color: transparent; }
.bg-cream-5 { background-color: hsl(var(--cream) / 0.05); }
.bg-cream-60 { background-color: hsl(var(--cream) / 0.6); }
.bg-obsidian-60 { background-color: hsl(var(--obsidian) / 0.6); }
.bg-obsidian-85 { background-color: hsl(var(--obsidian) / 0.85); }
.bg-obsidian-95 { background-color: hsl(var(--obsidian) / 0.95); }
.bg-forest-light-30 { background-color: hsl(var(--forest-light) / 0.3); }

.text-gold { color: hsl(var(--gold)); }
.text-cream { color: hsl(var(--cream)); }
.text-forest { color: hsl(var(--forest)); }
.text-forest-dark { color: hsl(var(--forest-dark)); }
.text-muted { color: hsl(var(--muted-foreground)); }
.text-cream-25 { color: hsl(var(--cream) / 0.25); }
.text-cream-40 { color: hsl(var(--cream) / 0.4); }
.text-cream-50 { color: hsl(var(--cream) / 0.5); }
.text-cream-60 { color: hsl(var(--cream) / 0.6); }
.text-cream-70 { color: hsl(var(--cream) / 0.7); }
.text-cream-80 { color: hsl(var(--cream) / 0.8); }
.text-forest-70 { color: hsl(var(--forest) / 0.7); }
.text-forest-60 { color: hsl(var(--forest) / 0.6); }

.border-cream-5 { border-color: hsl(var(--cream) / 0.05); }
.border-cream-10 { border-color: hsl(var(--cream) / 0.1); }
.border-cream-20 { border-color: hsl(var(--cream) / 0.2); }
.border-forest-10 { border-color: hsl(var(--forest) / 0.1); }
.border-forest-20 { border-color: hsl(var(--forest) / 0.2); }
.border-gold-20 { border-color: hsl(var(--gold) / 0.2); }
.border-gold-30 { border-color: hsl(var(--gold) / 0.3); }
.border-gold-40 { border-color: hsl(var(--gold) / 0.4); }

/* ===== SIGNATURE UTILITIES ===== */
.hero-overlay {
  background: linear-gradient(to bottom,
    hsl(var(--obsidian) / 0.6),
    hsl(var(--forest-dark) / 0.4) 40%,
    hsl(var(--obsidian) / 0.85));
}
.text-shadow-gold {
  text-shadow:
    0 0 40px hsl(var(--gold) / 0.4),
    0 2px 10px hsl(var(--gold) / 0.2);
}
.gold-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    hsl(var(--gold) / 0.6),
    transparent);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.875rem;
  padding: 1.5rem 2rem;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.btn-gold {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
}
.btn-gold:hover {
  background-color: hsl(var(--gold-dark));
  box-shadow: 0 8px 30px hsl(var(--gold) / 0.4);
}
.btn-outline-cream {
  background-color: transparent;
  color: hsl(var(--cream));
  border: 1px solid hsl(var(--cream) / 0.2);
}
.btn-outline-cream:hover {
  background-color: hsl(var(--cream) / 0.05);
  border-color: hsl(var(--gold) / 0.4);
}
.btn-outline-forest {
  background-color: transparent;
  color: hsl(var(--forest));
  border: 1px solid hsl(var(--forest) / 0.2);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}
.btn-outline-forest:hover {
  background-color: hsl(var(--forest));
  color: hsl(var(--cream));
  border-color: hsl(var(--forest));
}
.btn-sm { padding: 0.75rem 1.5rem; font-size: 0.75rem; }

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: all 0.5s ease;
  padding-top: 1rem; padding-bottom: 1rem;
  background-color: transparent;
}
.header.scrolled, .header.subpage {
  background-color: hsl(var(--obsidian) / 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 0.5rem;
}
.header-logo {
  position: relative;       /* Anker für das überlagerte Shrink-Logo */
  display: block;
  line-height: 0;
}
.header-logo img {
  width: auto;
  display: block;
  /* schnell + sanft: Höhe & Opacity animiert */
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.28s ease;
  height: 3rem;
}
/* Beide Logos liegen übereinander → sanfter Cross-Fade statt hartem Umschalten */
.header-logo .logo-scrolled {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
}

/* HOME oben: großes Logo sichtbar, Shrink-Logo unsichtbar (gleiche Endgröße bereit) */
.header.home-top:not(.scrolled) .header-logo .logo-default  { height: 7.5rem; opacity: 1; }
.header.home-top:not(.scrolled) .header-logo .logo-scrolled { height: 3rem;   opacity: 0; }

/* Gescrollt / Unterseite: großes Logo schrumpft + blendet aus, Shrink-Logo blendet ein */
.header.scrolled .header-logo .logo-default,
.header.subpage .header-logo .logo-default  { height: 3rem; opacity: 0; }
.header.scrolled .header-logo .logo-scrolled,
.header.subpage .header-logo .logo-scrolled { height: 3rem; opacity: 1; }

@media (min-width: 768px) {
  .header-logo img { height: 3.25rem; }
  .header.home-top:not(.scrolled) .header-logo .logo-default  { height: 13rem; }
  .header.home-top:not(.scrolled) .header-logo .logo-scrolled { height: 3.25rem; }
  .header.scrolled .header-logo .logo-default,
  .header.subpage .header-logo .logo-default  { height: 3.25rem; }
  .header.scrolled .header-logo .logo-scrolled,
  .header.subpage .header-logo .logo-scrolled { height: 3.25rem; }
}
.header-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 1024px) {
  .header-nav { display: flex; }
}
.header-nav a {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--cream) / 0.6);
  transition: color 0.3s ease;
}
.header-nav a:hover { color: hsl(var(--cream)); }
.header-nav a.active { color: hsl(var(--gold)); }
.header-cta {
  display: none;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 1024px) {
  .header-cta { display: flex; }
}
.header-cta a.phone-link {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: hsl(var(--cream) / 0.4);
  transition: color 0.3s;
}
.header-cta a.phone-link:hover { color: hsl(var(--gold)); }
.menu-toggle {
  display: flex;
  color: hsl(var(--cream));
  padding: 0.5rem;
}
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
}

/* Mobile Nav Drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav-bg {
  position: absolute;
  inset: 0;
  background-color: hsl(var(--obsidian));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mobile-nav-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  color: hsl(var(--cream));
  padding: 0.5rem;
  z-index: 10;
}
.mobile-nav-close:hover { color: hsl(var(--gold)); }
.mobile-nav-list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: 2rem;
  overflow-y: auto;
}
.mobile-nav-list a.nav-item {
  font-size: 1.125rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  color: hsl(var(--cream));
  transition: color 0.3s;
  opacity: 0;
  animation: slide-up 0.6s ease-out forwards;
}
.mobile-nav-list a.nav-item:hover { color: hsl(var(--gold)); }
.mobile-nav-list a.nav-item.active { color: hsl(var(--gold)); }

/* ===== FOOTER ===== */
.footer {
  background-color: hsl(var(--obsidian));
  color: hsl(var(--cream));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer h4 {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(var(--gold));
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.footer-link {
  color: hsl(var(--cream) / 0.4);
  font-size: 0.875rem;
  transition: color 0.3s;
}
.footer-link:hover { color: hsl(var(--gold)); }
.social-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--cream) / 0.1);
  color: hsl(var(--cream) / 0.4);
  transition: all 0.3s ease;
}
.social-icon:hover {
  color: hsl(var(--gold));
  border-color: hsl(var(--gold) / 0.3);
}

/* ===== FLOAT ACTION BUTTONS (Mobile) ===== */
.fab-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1rem;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  z-index: 50;
  pointer-events: none;   /* Container fängt KEINE Klicks ab … */
}
.fab-container .fab { pointer-events: auto; }  /* … nur die runden Buttons selbst */
@media (min-width: 1024px) { .fab-container { display: none; } }
.fab {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: all 0.3s;
}
.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}
.fab-call {
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
}
.fab-whatsapp {
  background-color: #25D366;
  color: white;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 6rem;
}
@media (min-width: 768px) { .hero { padding-bottom: 8rem; } }
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-content { max-width: 48rem; }
.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  line-height: 0.95;
  color: hsl(var(--cream));
  letter-spacing: 0.025em;
  margin-bottom: 2rem;
  font-weight: 500;
}
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 768px) { .hero h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 6rem; } }

/* Subpage Hero */
.subpage-hero {
  position: relative;
  padding-top: 8rem;
  padding-bottom: 5rem;
  background-color: hsl(var(--obsidian));
  overflow: hidden;
}
.subpage-hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
}
.subpage-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.subpage-hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
}
.subpage-hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  color: hsl(var(--cream));
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.025em;
}
@media (min-width: 768px) { .subpage-hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .subpage-hero h1 { font-size: 3.75rem; } }

/* ===== GRID UTILITIES ===== */
.grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .sm-grid-2 { grid-template-columns: 1fr 1fr; }
  .sm-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .md-grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .lg-grid-2 { grid-template-columns: 1fr 1fr; }
  .lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ===== SECTION HELPERS ===== */
.section { padding-top: 6rem; padding-bottom: 6rem; }
@media (min-width: 768px) { .section { padding-top: 9rem; padding-bottom: 9rem; } }
.section-narrow { padding-top: 5rem; padding-bottom: 5rem; }
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: hsl(var(--gold));
  font-weight: 500;
  margin-bottom: 1rem;
}
.eyebrow-sm {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: hsl(var(--gold));
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.section-title {
  font-family: "Playfair Display", serif;
  font-size: 1.875rem;
  line-height: 1.15;
  font-weight: 500;
}
@media (min-width: 768px) { .section-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .section-title { font-size: 3rem; } }

/* ===== CARDS / Tapas-Cocktails ===== */
.cocktail-card {
  padding: 2rem;
  background-color: hsl(var(--obsidian));
  border-left: 1px solid hsl(var(--cream) / 0.05);
  transition: all 0.5s ease;
}
.cocktail-card:first-child { border-left: 0; }
.cocktail-card:hover {
  background-color: hsl(var(--forest-dark) / 0.8);
}
@media (min-width: 768px) { .cocktail-card { padding: 2.5rem; } }
.cocktail-card .icon { width: 1.25rem; height: 1.25rem; color: hsl(var(--gold)); margin-bottom: 1.5rem; }
.cocktail-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.125rem;
  color: hsl(var(--cream));
  letter-spacing: 0.025em;
  margin-bottom: 0.5rem;
}
.cocktail-card .desc {
  color: hsl(var(--cream) / 0.4);
  font-size: 0.875rem;
  line-height: 1.625;
  margin-bottom: 1rem;
}
.cocktail-card .price {
  color: hsl(var(--gold));
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.tapa-card {
  position: relative;
  background-color: hsl(var(--forest-light) / 0.3);
  overflow: hidden;
  transition: all 0.5s ease;
}
.tapa-card:hover { background-color: hsl(var(--forest-light) / 0.5); }
.tapa-card .img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.tapa-card .img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.tapa-card:hover .img-wrap img { transform: scale(1.05); }
.tapa-card .body { padding: 1.5rem; }
@media (min-width: 768px) { .tapa-card .body { padding: 2rem; } }
.tapa-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  color: hsl(var(--cream));
  letter-spacing: 0.025em;
  margin-bottom: 0.75rem;
}
.tapa-card p {
  color: hsl(var(--cream) / 0.5);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* Testimonial Card */
.testimonial-card {
  padding: 2rem;
  border: 1px solid hsl(var(--forest) / 0.08);
  transition: all 0.3s ease;
}
.testimonial-card:hover { border-color: hsl(var(--gold) / 0.2); }
@media (min-width: 768px) { .testimonial-card { padding: 2.5rem; } }
.star { width: 0.875rem; height: 0.875rem; fill: hsl(var(--gold)); color: hsl(var(--gold)); }

/* Decorative offset border (for images with offset) */
.img-frame { position: relative; }
.img-frame .offset-frame {
  position: absolute;
  width: 100%; height: 100%;
  border: 1px solid hsl(var(--gold) / 0.3);
  z-index: -1;
  bottom: -1rem; left: -1rem;
}
.img-frame .offset-frame.right { left: auto; right: -1rem; }
.img-frame .offset-frame.small { bottom: -0.75rem; right: -0.75rem; left: auto; }

/* ===== GALLERY ===== */
.gallery-filter {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem; margin-bottom: 4rem;
}
.gallery-filter button {
  padding: 0.625rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  background-color: transparent;
  color: hsl(var(--forest) / 0.6);
  border: 1px solid hsl(var(--forest) / 0.1);
  transition: all 0.3s;
}
.gallery-filter button:hover {
  color: hsl(var(--forest));
  border-color: hsl(var(--forest) / 0.3);
}
.gallery-filter button.active {
  background-color: hsl(var(--forest));
  color: hsl(var(--cream));
  border-color: hsl(var(--forest));
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.gallery-item:hover img { transform: scale(1.1); }
.gallery-item .overlay {
  position: absolute; inset: 0;
  background-color: hsl(var(--obsidian) / 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s;
}
.gallery-item:hover .overlay { background-color: hsl(var(--obsidian) / 0.5); }
.gallery-item .overlay span {
  color: hsl(var(--cream));
  font-family: "Playfair Display", serif;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s;
}
.gallery-item:hover .overlay span { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox.open { display: flex; }
.lightbox-inner {
  position: relative;
  max-width: 64rem;
  width: 100%;
  background-color: hsl(var(--obsidian));
  max-height: 90vh;
}
.lightbox img { max-height: 85vh; width: 100%; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--cream) / 0.6);
  transition: color 0.3s;
  z-index: 10;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { color: hsl(var(--cream)); }
.lightbox-close { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.lightbox-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, hsl(var(--obsidian) / 0.9), transparent);
  color: hsl(var(--cream) / 0.7);
  text-align: center;
  font-size: 0.875rem;
}

/* ===== FORMS ===== */
.form-fake {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--forest) / 0.1);
  padding: 2rem;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 768px) { .form-fake { padding: 3rem; } }
.form-fake .label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--forest));
  margin-bottom: 0.5rem;
  display: block;
  font-weight: 500;
}
.form-fake input, .form-fake textarea {
  display: flex;
  width: 100%;
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: 0.625rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: hsl(var(--forest));
}
.form-fake input::placeholder, .form-fake textarea::placeholder {
  color: hsl(var(--muted-foreground));
}
.form-fake .grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .form-fake .grid-2 { grid-template-columns: 1fr 1fr; } }
.form-fake .submit {
  width: 100%;
  background-color: hsl(var(--gold));
  color: hsl(var(--forest-dark));
  font-weight: 500;
  padding: 1.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.form-fake-overlay {
  position: absolute;
  inset: 0;
  background-color: hsl(var(--cream) / 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.form-fake-overlay .card {
  background-color: hsl(var(--obsidian) / 0.95);
  border: 1px solid hsl(var(--gold) / 0.3);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 28rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
@media (min-width: 768px) {
  .form-fake-overlay .card { padding: 3rem; }
}

/* ===== ANIMATIONS ===== */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slide-up 0.6s ease-out forwards; }
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media (min-width: 640px) { .sm-text-base { font-size: 1rem; } .sm-text-lg { font-size: 1.125rem; } }
@media (min-width: 768px) {
  .md-text-lg { font-size: 1.125rem; }
  .md-text-xl { font-size: 1.25rem; }
  .md-text-2xl { font-size: 1.5rem; }
  .md-text-3xl { font-size: 1.875rem; }
  .md-text-4xl { font-size: 2.25rem; }
  .md-text-5xl { font-size: 3rem; }
  .md-text-6xl { font-size: 3.75rem; }
  .md-text-7xl { font-size: 4.5rem; }
}
@media (min-width: 1024px) {
  .lg-text-5xl { font-size: 3rem; }
  .lg-text-6xl { font-size: 3.75rem; }
  .lg-text-8xl { font-size: 6rem; }
}

/* Hide on mobile / show on desktop */
.lg-hidden { display: block; }
.lg-flex { display: none; }
@media (min-width: 1024px) {
  .lg-hidden { display: none; }
  .lg-flex { display: flex; }
  .lg-block { display: block; }
}
.md-hidden { display: block; }
.md-flex { display: none; }
@media (min-width: 768px) {
  .md-hidden { display: none; }
  .md-flex { display: flex; }
}
.sm-hidden { display: block; }
.sm-flex { display: none; }
@media (min-width: 640px) {
  .sm-hidden { display: none; }
  .sm-flex { display: flex; }
  .sm-flex-row { flex-direction: row; }
}

/* Order utilities */
.order-1 { order: 1; }
.order-2 { order: 2; }
@media (min-width: 1024px) {
  .lg-order-1 { order: 1; }
  .lg-order-2 { order: 2; }
}

/* Map iframe */
.map-iframe-wrap {
  overflow: hidden;
  height: 300px;
}
@media (min-width: 1024px) {
  .map-iframe-wrap { height: 400px; }
}
.map-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Misc */
.opacity-15 { opacity: 0.15; }
.opacity-10 { opacity: 0.1; }
.no-scroll { overflow: hidden; }

/* ===== PAGE-SPECIFIC GRIDS ===== */

/* Home intro grid (image + text) */
.home-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .home-intro-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
  }
}

/* Cocktails grid (4 cards) */
.cocktails-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}
@media (min-width: 640px) { .cocktails-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cocktails-grid { grid-template-columns: repeat(4, 1fr); } }

/* Tapas grid */
.tapas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .tapas-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

/* Testimonials grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

/* Menu categories */
.menu-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 640px) { .menu-categories { grid-template-columns: 1fr 1fr; } }

/* Founder grid */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) {
  .founder-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* Values grid */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}
@media (min-width: 640px) { .values-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }

.value-card {
  padding: 2rem;
  background-color: hsl(var(--forest));
  border-left: 1px solid hsl(var(--cream) / 0.05);
  transition: all 0.5s ease;
}
.value-card:first-child { border-left: 0; }
.value-card:hover { background-color: hsl(var(--forest-light) / 0.4); }
@media (min-width: 768px) { .value-card { padding: 2.5rem; } }

/* Find Us grid */
.find-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) { .find-us-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .find-us-grid { grid-template-columns: repeat(4, 1fr); } }

/* Hide scrollbar in mobile drawer when no-scroll set on body */
body.no-scroll { overflow: hidden; }

/* Fix img-frame so frames don't peek out */
.img-frame { z-index: 1; }
.img-frame > div:first-child { position: relative; z-index: 2; }
.img-frame .offset-frame { z-index: 1; }

/* Subpage background color for body when not home */
.bg-page-light { background-color: hsl(var(--cream)); }

/* Better default image rendering */
img { -webkit-user-drag: none; user-select: none; }

/* ===== Reservation Form ===== */
.reservation-form { background: white; padding: 2.5rem; border: 1px solid hsl(var(--border)); border-radius: 4px; }
@media (max-width: 640px) { .reservation-form { padding: 1.5rem; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; }
.form-field.half { grid-column: span 1; }
.form-field label {
  font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: hsl(var(--forest)); margin-bottom: 0.5rem; font-weight: 500;
}
.form-field .req { color: hsl(var(--gold)); }
.form-field input, .form-field textarea {
  width: 100%; padding: 0.75rem 0.9rem; border: 1px solid hsl(var(--input));
  border-radius: 4px; font: inherit; font-size: 0.95rem; color: hsl(var(--forest));
  background: white; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field input:focus, .form-field textarea:focus {
  outline: 0; border-color: hsl(var(--gold));
  box-shadow: 0 0 0 3px hsla(43, 72%, 52%, 0.15);
}
.form-field input.invalid, .form-field textarea.invalid { border-color: hsl(0, 65%, 50%); }
.form-field .err-msg { color: hsl(0, 65%, 50%); font-size: 0.75rem; margin-top: 0.4rem; }
.form-field textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.form-gdpr {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.85rem; color: hsl(var(--muted-foreground)); cursor: pointer;
  padding: 1rem; background: hsl(40, 20%, 95%); border-radius: 4px;
}
.form-gdpr input { margin-top: 0.2rem; accent-color: hsl(var(--gold)); }
.form-gdpr span { line-height: 1.5; }
.form-actions { text-align: center; }
.form-message {
  margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 4px;
  font-size: 0.9rem; line-height: 1.5;
}
.form-message.ok { background: hsl(140, 50%, 95%); color: hsl(140, 50%, 25%); border-left: 3px solid hsl(140, 50%, 40%); }
.form-message.error { background: hsl(0, 65%, 95%); color: hsl(0, 65%, 35%); border-left: 3px solid hsl(0, 65%, 50%); }

/* ===== FAQ Section ===== */
.faq-section { background: hsl(var(--cream)); padding: 5rem 0; }
.faq-list { max-width: 48rem; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid hsl(var(--forest) / 0.1);
  transition: background 0.2s;
}
.faq-item:first-child { border-top: 1px solid hsl(var(--forest) / 0.1); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.5rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  font-family: "Playfair Display", serif; font-size: 1.125rem; color: hsl(var(--forest));
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.5rem; color: hsl(var(--gold));
  transition: transform 0.3s; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding: 0 0 1.5rem 0; color: hsl(var(--muted-foreground));
  line-height: 1.7; font-size: 0.95rem;
}

/* ============================================================
 * RESPONSIVE REFINEMENTS — alle Bildschirmgrößen
 * Mobile-first, gestaffelt für 320px – 1400px+
 * ============================================================ */

/* ---------- Sehr kleine Telefone (≤ 380px, z.B. iPhone SE 1, alte Androids) ---------- */
@media (max-width: 380px) {
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Hero: kleinere H1, weniger vertikale Spannweite */
  .hero h1 { font-size: 2.5rem; }
  .hero { padding-bottom: 4rem; }
  .hero-content .gold-line { margin-bottom: 1.5rem !important; }
  .hero-content p { font-size: 0.9375rem !important; }

  /* Hero CTAs: volle Breite, gestapelt */
  .hero-content .flex.flex-col { gap: 0.75rem !important; }
  .hero-content .btn { width: 100%; justify-content: center; padding: 1.25rem 1.5rem !important; }

  /* Subpage Hero */
  .subpage-hero { padding-top: 6rem; padding-bottom: 3.5rem; }
  .subpage-hero h1 { font-size: 1.875rem; }
  .subpage-hero p { font-size: 0.9375rem; }

  /* Sektionen: weniger Padding */
  .section { padding-top: 4rem; padding-bottom: 4rem; }
  .section-title { font-size: 1.625rem !important; }

  /* Cards: kompakter */
  .cocktail-card { padding: 1.5rem; }
  .tapa-card .body { padding: 1.25rem; }
  .testimonial-card { padding: 1.5rem; }
  .value-card { padding: 1.5rem; }

  /* Eyebrow Text: kleinerer Letter-Spacing damit nicht umbricht */
  .eyebrow { font-size: 0.6875rem; letter-spacing: 0.3em; }

  /* Footer: enger */
  .footer .container { padding-top: 3rem; padding-bottom: 3rem; }
  .footer-grid { gap: 2.5rem; }

  /* Find-Us Grid: 1 Spalte */
  .find-us-grid { grid-template-columns: 1fr !important; gap: 2rem; }

  /* Reservation Form: padding kompakt */
  .reservation-form { padding: 1.25rem; }
  .form-field input, .form-field textarea { padding: 0.65rem 0.75rem; font-size: 0.9rem; }

  /* FAQ: kompakter */
  .faq-item summary { font-size: 1rem; padding: 1.25rem 0; gap: 1rem; }
  .faq-section { padding: 3.5rem 0; }
}

/* ---------- Standard-Telefone (380px – 480px, iPhone SE 2/3, 12 mini) ---------- */
@media (min-width: 381px) and (max-width: 480px) {
  .hero h1 { font-size: 2.875rem; }
  .subpage-hero { padding-top: 7rem; padding-bottom: 4rem; }
  .section { padding-top: 4.5rem; padding-bottom: 4.5rem; }

  /* Hero CTAs noch gestapelt aber etwas Platz */
  .hero-content .btn { width: 100%; justify-content: center; }
}

/* ---------- Telefone Querformat / kleine Tablets (481px – 639px) ---------- */
@media (max-width: 639px) {
  /* Header CTA: Telefonnummer ausblenden, nur "Reservieren"-Button + Burger */
  .header-cta .phone-link { display: none; }

  /* Hero: Subtitle-Max-Width an Bildschirm */
  .hero-content > p { max-width: 100% !important; }

  /* Section title nicht über das Padding hinaus */
  .section-title { line-height: 1.1; }

  /* Find-Us Grid: 2 statt 4 Spalten */
  .find-us-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem; }

  /* Karten-Border-Left auf Mobile entfernen (verursacht doppelte Linien) */
  .cocktail-card { border-left: 0; border-top: 1px solid hsl(var(--cream) / 0.05); }
  .cocktail-card:first-child { border-top: 0; }
  .value-card { border-left: 0; border-top: 1px solid hsl(var(--cream) / 0.05); }
  .value-card:first-child { border-top: 0; }

  /* CTA-Section: weniger Padding */
  section.relative[style*="padding-top:8rem"] { padding-top: 5rem !important; padding-bottom: 5rem !important; }

  /* Map iframe etwas niedriger */
  .map-iframe-wrap { height: 280px; }

  /* Image-Frame Offset reduzieren auf Mobile (sonst sticht es heraus) */
  .img-frame .offset-frame { bottom: -0.5rem; left: -0.5rem; }
  .img-frame .offset-frame.right { left: auto; right: -0.5rem; }
  .img-frame .offset-frame.small { bottom: -0.4rem; right: -0.4rem; }
}

/* ---------- Tablets (640px – 1023px) ---------- */
@media (min-width: 640px) and (max-width: 1023px) {
  /* Header: Phone-link wieder sichtbar, aber kompakter */
  .header-cta .phone-link { font-size: 0.875rem; }

  /* Hero: mittlere Größen schön austarieren */
  .hero { padding-bottom: 6rem; }

  /* Section: weniger Padding als Desktop */
  .section { padding-top: 5.5rem; padding-bottom: 5.5rem; }

  /* Founder grid: 1 Spalte auf Tablet (sieht zentriert besser aus) */
  .founder-grid { grid-template-columns: 1fr !important; max-width: 32rem; }

  /* Home Intro Grid: 1 Spalte hochkant auf Tablet */
  .home-intro-grid { grid-template-columns: 1fr !important; gap: 3rem; }

  /* Image Frames mit Offset auf Tablet kleiner */
  .img-frame .offset-frame { bottom: -0.75rem; left: -0.75rem; }
}

/* ---------- iPad-Quer / kleine Laptops (1024px – 1279px) ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .container { max-width: 1100px; }
  .hero h1 { font-size: 5rem; }
}

/* ---------- Großer Desktop (≥ 1400px) ---------- */
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

/* ---------- Landscape-Mode für kurze Screens (z.B. Telefon quer) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 600px; padding-top: 5rem; padding-bottom: 3rem; }
  .hero h1 { font-size: 2.25rem; margin-bottom: 1rem; }
  .hero-content .gold-line { margin-bottom: 1rem !important; }
  .hero-content p { margin-bottom: 1.5rem !important; }
  .subpage-hero { padding-top: 5rem; padding-bottom: 3rem; }
}

/* ---------- iOS Safari Notch / Safe Area ---------- */
@supports (padding: max(0px)) {
  .fab-container {
    right: max(1rem, env(safe-area-inset-right, 1rem));
    left: auto;
    bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
  }
  .header .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .mobile-nav .mobile-nav-close {
    top: max(1.5rem, env(safe-area-inset-top, 1.5rem));
  }
}

/* ---------- Body-Scroll-Lock wenn Drawer offen ---------- */
body.no-scroll { overflow: hidden; touch-action: none; }

/* ---------- Touch-friendly: alle Tap-Targets ≥ 44×44 px ---------- */
@media (max-width: 1023px) {
  .header-nav a, .gallery-filter button, .faq-item summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-link, .social-icon {
    min-height: 36px;
  }
}

/* ---------- Form auf Mobile: Felder größer / nicht zu fummelig ---------- */
@media (max-width: 639px) {
  .form-grid { gap: 1rem; }
  .form-field input,
  .form-field textarea,
  .form-field select {
    font-size: 16px;  /* verhindert Zoom auf iOS bei Fokus */
  }
}

/* ---------- Lightbox auf Mobile: bessere Bedienung ---------- */
@media (max-width: 639px) {
  .lightbox-prev, .lightbox-next {
    width: 48px; height: 48px;
  }
  .lightbox-close {
    top: 0.75rem; right: 0.75rem;
    width: 40px; height: 40px;
  }
  .lightbox-caption {
    font-size: 0.8125rem;
    padding: 0.75rem;
  }
}

/* ---------- Galerie auf Tablets (640-1023): 2 Spalten, etwas mehr Gap ---------- */
@media (min-width: 640px) and (max-width: 1023px) {
  .gallery-grid { gap: 6px; }
}

/* ---------- Sehr breiter Bildschirm: Bilder nicht überdimensioniert ---------- */
.hero-bg img, .subpage-hero-bg img { max-width: 100%; }

/* ---------- Logo nicht zu klein wenn Header gescrollt + Mobile ---------- */
@media (max-width: 639px) {
  .header.scrolled .header-logo .logo-scrolled,
  .header.subpage .header-logo .logo-scrolled { height: 2.5rem; }
  .header.scrolled .header-logo .logo-default,
  .header.subpage .header-logo .logo-default  { height: 2.5rem; }
}

/* ---------- Footer Social-Icons immer mind. 40x40 ---------- */
.social-icon { min-width: 40px; min-height: 40px; }

/* ============= Footer Bottom Bar ============= */
.footer-bottom {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    text-align: left;
  }
}
.footer-copyright {
  color: hsl(40, 20%, 97%, 0.3);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: lowercase;
}
.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.75rem;
}
.footer-bottom-link {
  color: hsl(40, 20%, 97%, 0.3);
  transition: color 0.3s;
  text-decoration: none;
}
.footer-bottom-link:hover { color: hsl(40, 20%, 97%, 0.6); }
.footer-bottom-sep {
  color: hsl(40, 20%, 97%, 0.15);
}
.footer-credit {
  letter-spacing: 0.05em;
}
.footer-credit span {
  color: hsl(43, 72%, 52%, 0.65);
  font-weight: 500;
  transition: color 0.3s;
}
.footer-credit:hover span {
  color: hsl(43, 72%, 52%, 1);
}

/* Mobile: Links vertikal stapeln wenn's eng wird */
@media (max-width: 380px) {
  .footer-bottom-right {
    flex-direction: column;
    gap: 0.5rem;
  }
  .footer-bottom-sep { display: none; }
}

/* ============= Legal Pages (Impressum, Datenschutz) ============= */
.legal-section { margin-bottom: 3rem; }
.legal-section:last-child { margin-bottom: 0; }
.legal-section-title {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: hsl(var(--forest));
  margin-bottom: 1rem;
  font-weight: 500;
}
.legal-section-body {
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  font-size: 0.9375rem;
  white-space: pre-line;     /* macht \n in JSON zu sichtbaren Umbrüchen */
}
.legal-section-body p { margin-bottom: 1rem; }
.legal-section-body p:last-child { margin-bottom: 0; }
.legal-section-body a {
  color: hsl(var(--gold));
  text-decoration: none;
  border-bottom: 1px solid hsl(var(--gold) / 0.3);
}
.legal-section-body a:hover { border-color: hsl(var(--gold)); }
.legal-section-body strong { color: hsl(var(--forest)); font-weight: 600; }

/* ============================================================
 * COOKIE CONSENT
 * ============================================================ */

/* (Fonts sind lokal gehostet — kein System-Fallback nötig) */


/* ---- Banner ---- */
.mi-consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 100000;
  background: hsl(160, 25%, 8%);
  color: hsl(40, 20%, 97%);
  border: 1px solid hsla(43, 72%, 52%, 0.2);
  border-radius: 6px;
  box-shadow: 0 25px 60px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 1100px;
  margin-inline: auto;
}
.mi-consent-banner.open {
  opacity: 1;
  transform: translateY(0);
}
.mi-consent-inner {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.mi-consent-text h3 {
  font-size: 1.05rem;
  margin: 0 0 0.4rem 0;
  color: hsl(43, 72%, 52%);
  letter-spacing: 0.02em;
  font-family: Georgia, "Playfair Display", serif;
  font-weight: 500;
}
.mi-consent-text p {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  color: hsla(40, 20%, 97%, 0.75);
}
.mi-consent-text a {
  color: hsl(43, 72%, 60%);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.mi-consent-text a:hover { color: hsl(43, 72%, 75%); }
.mi-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}
.mi-consent-btn {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mi-consent-btn-ghost {
  background: transparent;
  color: hsla(40, 20%, 97%, 0.7);
  border-color: hsla(40, 20%, 97%, 0.2);
}
.mi-consent-btn-ghost:hover {
  color: hsl(40, 20%, 97%);
  border-color: hsla(40, 20%, 97%, 0.5);
}
.mi-consent-btn-primary {
  background: hsl(43, 72%, 52%);
  color: hsl(160, 35%, 8%);
  font-weight: 600;
}
.mi-consent-btn-primary:hover {
  background: hsl(43, 80%, 60%);
}

@media (min-width: 768px) {
  .mi-consent-inner {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
  .mi-consent-text { flex: 1; }
  .mi-consent-actions {
    width: auto;
    flex-shrink: 0;
    justify-content: flex-end;
  }
}

/* ---- Settings Modal ---- */
body.mi-consent-modal-open { overflow: hidden; }

.mi-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: mi-consent-fade 0.2s ease-out;
}
@keyframes mi-consent-fade { from { opacity: 0 } to { opacity: 1 } }

.mi-consent-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mi-consent-modal-box {
  position: relative;
  background: hsl(160, 25%, 8%);
  color: hsl(40, 20%, 97%);
  border: 1px solid hsla(43, 72%, 52%, 0.2);
  border-radius: 8px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 1.75rem;
}
.mi-consent-modal-close {
  position: absolute;
  top: 0.75rem; right: 0.875rem;
  background: transparent;
  border: 0;
  font-size: 1.75rem;
  color: hsla(40, 20%, 97%, 0.5);
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}
.mi-consent-modal-close:hover { color: hsl(40, 20%, 97%); }
.mi-consent-modal h2 {
  font-size: 1.25rem;
  font-family: Georgia, "Playfair Display", serif;
  color: hsl(43, 72%, 52%);
  font-weight: 500;
  margin: 0 0 1rem 0;
  letter-spacing: 0.02em;
}
.mi-consent-modal-intro {
  font-size: 0.875rem;
  line-height: 1.55;
  color: hsla(40, 20%, 97%, 0.65);
  margin: 0 0 1.5rem 0;
}
.mi-consent-cat {
  border-top: 1px solid hsla(40, 20%, 97%, 0.08);
  padding: 1rem 0;
}
.mi-consent-cat:last-of-type { border-bottom: 1px solid hsla(40, 20%, 97%, 0.08); margin-bottom: 1.5rem; }
.mi-consent-cat-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}
.mi-consent-cat h4 {
  font-size: 0.9375rem;
  margin: 0 0 0.4rem 0;
  color: hsl(40, 20%, 97%);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mi-consent-cat p {
  font-size: 0.8125rem;
  color: hsla(40, 20%, 97%, 0.55);
  line-height: 1.5;
  margin: 0;
}

/* Toggle Switch */
.mi-consent-toggle {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  background: hsla(40, 20%, 97%, 0.1);
  border: 1px solid hsla(40, 20%, 97%, 0.15);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
  margin-top: 4px;
}
.mi-consent-toggle:hover:not(.disabled) {
  border-color: hsla(40, 20%, 97%, 0.3);
}
.mi-consent-toggle[aria-pressed="true"] {
  background: hsl(43, 72%, 52%);
  border-color: hsl(43, 72%, 52%);
}
.mi-consent-toggle.disabled {
  background: hsla(43, 72%, 52%, 0.5);
  border-color: hsla(43, 72%, 52%, 0.4);
  cursor: not-allowed;
}
.mi-consent-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: hsl(40, 20%, 97%);
  border-radius: 50%;
  transition: transform 0.2s;
}
.mi-consent-toggle-knob.on,
.mi-consent-toggle[aria-pressed="true"] .mi-consent-toggle-knob {
  transform: translateX(20px);
}

.mi-consent-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: stretch;
}
@media (min-width: 480px) {
  .mi-consent-modal-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.mi-consent-modal-link {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsla(40, 20%, 97%, 0.5);
  text-decoration: none;
}
.mi-consent-modal-link:hover { color: hsl(43, 72%, 60%); }

/* ---- Google Maps Placeholder ---- */
.consent-map-placeholder {
  width: 100%;
  height: 100%;
  min-height: 280px;
  background:
    linear-gradient(135deg, hsl(160, 25%, 12%) 0%, hsl(160, 30%, 8%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: hsl(40, 20%, 97%);
}
.consent-map-placeholder-inner {
  max-width: 26rem;
}
.consent-map-placeholder-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  color: hsl(43, 72%, 52%);
  opacity: 0.6;
}
.consent-map-placeholder h3 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  color: hsl(40, 20%, 97%);
  font-weight: 500;
}
.consent-map-placeholder p {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: hsla(40, 20%, 97%, 0.6);
  margin: 0 0 1.25rem;
}
.consent-map-placeholder button {
  background: hsl(43, 72%, 52%);
  color: hsl(160, 35%, 8%);
  border: 0;
  padding: 0.7rem 1.25rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
}
.consent-map-placeholder button:hover { background: hsl(43, 80%, 60%); }

/* ============================================================
 * RESPONSIVE FIXES v2 — gemessen mit Headless-Chrome
 * Behebt: Footer-Overflow, Button-Overflow, Logo/Hero-Überlappung
 * ============================================================ */

/* (Kein globales overflow-x — würde body zum Scroll-Container machen und
   das Scrollen/Klicken brechen. Überlauf wird an der Quelle verhindert:
   Footer-Umbruch, Honeypot sr-only, Button max-width, img max-width.) */

/* --- FIX 1: Footer-Bottom-Links umbrechen lassen statt überlaufen --- */
.footer-bottom-right {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 0.5rem;
}
@media (max-width: 480px) {
  /* Auf schmalen Phones: Separatoren ausblenden, Links zentriert umbrechen */
  .footer-bottom-sep { display: none; }
  .footer-bottom-right { gap: 0.5rem 1rem; }
}

/* --- FIX 2: Buttons nie breiter als Container --- */
.btn { max-width: 100%; }
@media (max-width: 400px) {
  .form-actions .btn { width: 100%; justify-content: center; }
}

/* --- FIX 3: Hero — Inhalt klärt immer den fixierten Header (keine Überlappung) --- */
.hero {
  align-items: center;            /* statt flex-end → zentriert, robuster */
  padding-top: 10rem;             /* klärt den großen Home-Logo-Header */
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .hero { padding-top: 15rem; padding-bottom: 6rem; align-items: flex-end; }
}

/* --- FIX 4: Sehr kleine Screens (≤360px) — Hero kompakter, Logo kleiner --- */
@media (max-width: 360px) {
  .header.home-top:not(.scrolled) .header-logo .logo-default { height: 5.5rem; }
  .hero { padding-top: 8.5rem; }
  .hero h1 { font-size: 2.25rem; }
  .hero-content .eyebrow { font-size: 0.625rem; }
  .hero-content > p { font-size: 0.875rem !important; margin-bottom: 1.5rem !important; }
  .hero-content .gold-line { margin-bottom: 1rem !important; }
}

/* --- Sicherheits-Netz: Bilder & Iframes nie breiter als Container --- */
img, iframe, video, svg { max-width: 100%; }
.map-iframe-wrap, .map-iframe-wrap iframe { max-width: 100%; }

/* --- Lange Wörter/URLs im Legal-Text umbrechen (Impressum/Datenschutz) --- */
.legal-section-body { overflow-wrap: anywhere; word-break: break-word; }

/* FAB-Buttons: auf Mobile genug Abstand unten, damit sie keine Footer-Links verdecken */
@media (max-width: 1023px) {
  .footer-bottom { padding-bottom: 5.5rem; }
}

/* Legal-Hero-Titel (Impressum/Datenschutz): lange Wörter umbrechen, responsiv */
.legal-hero-title {
  font-size: 2.25rem;
  letter-spacing: 0.025em;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: 100%;
}
@media (max-width: 420px) {
  .legal-hero-title { font-size: 1.75rem; }
}
@media (max-width: 340px) {
  .legal-hero-title { font-size: 1.5rem; }
}