/* ==========================================================================
   Theme Restaurant · Events · Catering – dunkel, warm, beige/rot (wie das Lokal)
   ========================================================================== */

:root {
  --bg: #18181d;
  --bg-alt: #1f1f25;
  --surface: #26262d;
  --text: #f4f1ea;
  --muted: #c1bbae;
  --accent: #b7b095;
  --accent-hover: #d2cbb0;
  --accent-2: #9d1c10;
  --on-accent: #18181d;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-s: 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* Logo auf hellem Plättchen, damit das rote Wappen auf Dunkel lesbar bleibt */
.brand--plate img {
  background: #fff;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  height: 2.6rem;
}

/* ---------- Hero ---------- */
.hero--restaurant {
  padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 8vw, 6rem);
  min-height: min(88dvh, 52rem);
  display: flex;
  align-items: center;
}
.hero--restaurant .hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(24, 24, 29, 0.55) 0%, rgba(24, 24, 29, 0.78) 55%, var(--bg) 100%),
    radial-gradient(60% 60% at 15% 30%, rgba(157, 28, 16, 0.35), transparent 70%);
}
.hero--restaurant .hero__bg img { filter: saturate(0.9); }
.hero--restaurant h1 {
  font-size: clamp(2.3rem, 1.5rem + 4vw, 4.4rem);
  color: #fff;
}
.hero--restaurant h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero--restaurant .lead { color: #e6e1d5; max-width: 38rem; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(157, 28, 16, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}
.status-badge::before {
  content: '';
  width: 0.65rem; height: 0.65rem;
  border-radius: 50%;
  background: #e2483a;
  box-shadow: 0 0 0 4px rgba(226, 72, 58, 0.25);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-l);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--step--1);
}
.hero__facts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__facts svg { width: 1.1rem; height: 1.1rem; color: var(--accent); }

/* Ornament-Linie unter Überschriften */
.ornament {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-s);
  color: var(--accent);
  font-family: var(--font-head);
  font-style: italic;
  font-size: var(--step-0);
}
.ornament::before,
.ornament::after {
  content: '';
  height: 1px;
  width: 2.5rem;
  background: currentColor;
  opacity: 0.6;
}
.section-head--center .ornament { justify-content: center; }

/* ---------- Angebot-Karten ---------- */
.offer .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--surface);
  border-color: rgba(183, 176, 149, 0.22);
}
.offer .card .icon {
  background: rgba(183, 176, 149, 0.12);
  color: var(--accent);
}
.offer .card h3 { font-size: var(--step-2); }

/* ---------- Räume ---------- */
.room + .room { margin-top: var(--space-xl); }
.room .media__img img {
  border: 1px solid rgba(255, 255, 255, 0.08);
  filter: saturate(0.95);
}
.room .capacity {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-s);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(183, 176, 149, 0.14);
  color: var(--accent);
  font-weight: 600;
  font-size: var(--step--1);
}

/* ---------- Anlässe ---------- */
.occasions {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding: 0; margin: 0;
  list-style: none;
}
.occasions li {
  padding: var(--space-m) var(--space-s);
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-head);
  font-size: var(--step-1);
}
.occasions li span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------- Catering-Band mit Bild ---------- */
.band {
  position: relative;
  isolation: isolate;
  padding-block: var(--section);
  color: #fff;
  overflow: clip;
}
.band__bg {
  position: absolute; inset: 0; z-index: -1;
}
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24, 24, 29, 0.94) 0%, rgba(24, 24, 29, 0.8) 55%, rgba(24, 24, 29, 0.55) 100%);
}
.band .container { max-width: 44rem; margin-inline: auto; }
.band ul { padding-left: 1.2em; color: #e6e1d5; }

/* ---------- Kontakt ---------- */
.contact-card {
  background: var(--accent);
  color: var(--on-accent);
}
.contact-card p { color: #3b3a33; opacity: 1; }
.contact-card .btn--primary { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent); }
.contact-card .btn--primary:hover { background: #000; border-color: #000; color: #fff; }
.contact-card .btn--ghost { color: var(--on-accent); }
.contact-card .btn--ghost:hover { background: rgba(0, 0, 0, 0.1); color: var(--on-accent); }

/* ---------- Footer ---------- */
.site-footer { background: #121216; }

/* Wechsel-Banner in Kita-Farben, damit der Kontext klar ist */
.switch-banner--kita {
  background: #f2f8ee;
  border: 0;
  color: #22301f;
}
.switch-banner--kita strong { color: #2f7a33; font-family: 'Fredoka', 'Fredoka Fallback', Arial, sans-serif; font-weight: 600; }
.switch-banner--kita .btn { background: #2f7a33; border-color: #2f7a33; color: #fff; }
.switch-banner--kita .btn:hover { background: #256229; border-color: #256229; color: #fff; }

/* ---------- Geschichte ---------- */
.hero--geschichte { min-height: auto; padding-block: clamp(3.5rem, 9vw, 7rem); }
.hero--geschichte h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4rem); }
.media__img--portrait img { aspect-ratio: 2 / 3; max-width: 26rem; margin-inline: auto; }
.timeline {
  position: relative;
  list-style: none;
  padding: 0; margin: 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.6rem; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: rgba(183, 176, 149, 0.3);
}
.timeline li {
  position: relative;
  padding: 0 0 var(--space-l) 2.75rem;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45rem;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--bg-alt);
}
.timeline h3 {
  margin-bottom: 0.25em;
  font-size: var(--step-2);
  color: var(--accent);
}
.timeline p { color: var(--muted); }
.timeline p + p { margin-top: 0.6em; }
.hero--geschichte .hero__bg img { object-position: left center; }
.hero--geschichte .hero__bg::after {
  background:
    linear-gradient(90deg, rgba(24, 24, 29, 0.85) 0%, rgba(24, 24, 29, 0.6) 55%, rgba(24, 24, 29, 0.35) 100%),
    linear-gradient(180deg, rgba(24, 24, 29, 0.2) 0%, var(--bg) 100%);
}