/* ==========================================================
   Heimservice — Microsite (Marketing-Schaufenster)
   Modern, luftig, pastellig. Akzent pro Partner via :root.
   ========================================================== */

:root {
  --c-bg:        #f6f5f1;
  --c-surface:   #ffffff;
  --c-surface-2: #faf9f5;
  --c-ink:       #1a1f1a;
  --c-ink-soft:  #5a605a;
  --c-line:      #e6e3dc;

  --c-accent:        #9bb487;
  --c-accent-soft:   #c8d8b8;
  --c-accent-glow:   #e3edd5;

  --c-warning: #d4a574;
  --c-danger:  #c47a8a;

  --font-base: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-pill: 999px;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem;

  --shadow-sm: 0 1px 2px rgba(26,31,26,.04), 0 2px 8px rgba(26,31,26,.04);
  --shadow-md: 0 4px 16px rgba(26,31,26,.06), 0 16px 40px rgba(26,31,26,.05);
  --shadow-lg: 0 8px 30px rgba(26,31,26,.08), 0 30px 80px rgba(26,31,26,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-base);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: 0; }

.ms-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-6); }

/* ==========================
   Topbar
   ========================== */
.ms-topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.ms-topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) 0;
}
.ms-brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; }
.ms-brand__logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.ms-brand__mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-soft));
  box-shadow: 0 6px 20px var(--c-accent-glow);
}
.ms-brand__name { font-family: var(--font-display); font-size: 1.15rem; }
.ms-nav { display: flex; align-items: center; gap: var(--sp-6); }
.ms-nav a { color: var(--c-ink-soft); font-size: .95rem; transition: color .2s; }
.ms-nav a:hover { color: var(--c-ink); }
.ms-cta {
  background: var(--c-ink);
  color: #fff !important;
  padding: .65rem 1.1rem;
  border-radius: var(--r-pill);
  font-weight: 500;
  transition: transform .15s ease, box-shadow .25s ease;
}
.ms-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(26,31,26,.18); }

/* ==========================
   Hero
   ========================== */
.ms-hero {
  position: relative; overflow: hidden;
  padding: var(--sp-12) 0 var(--sp-12);
}
.ms-hero__glow {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: glow-float 18s ease-in-out infinite alternate;
}
.ms-hero__glow--a {
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  background: radial-gradient(circle, var(--c-accent) 0%, transparent 70%);
}
.ms-hero__glow--b {
  width: 440px; height: 440px;
  top: 80px; right: -160px;
  background: radial-gradient(circle, var(--c-warning) 0%, transparent 70%);
  opacity: .35;
  animation-delay: -6s;
}
@keyframes glow-float {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px,30px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-hero__glow { animation: none; }
}
.ms-hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 900px) {
  .ms-hero__inner { grid-template-columns: 1.1fr .9fr; }
}
.ms-eyebrow {
  display: inline-block;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-ink-soft);
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  margin-bottom: var(--sp-4);
}
.ms-hero__title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  margin-bottom: var(--sp-4);
}
.ms-hero__lede {
  font-size: 1.15rem;
  color: var(--c-ink-soft);
  max-width: 540px;
  margin: 0 0 var(--sp-6);
}
.ms-hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ms-hero__phone { margin-top: var(--sp-4); color: var(--c-ink-soft); font-size: .95rem; }
.ms-hero__phone a { color: var(--c-ink); border-bottom: 1px dashed var(--c-ink-soft); }
.ms-hero__art {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 5/4;
  background: linear-gradient(135deg, var(--c-accent-glow), var(--c-surface-2));
  box-shadow: var(--shadow-lg);
}
.ms-hero__art img { width: 100%; height: 100%; object-fit: cover; }

.ms-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.4rem;
  border-radius: var(--r-pill);
  font-weight: 500;
  transition: transform .15s, box-shadow .25s, background .2s;
  cursor: pointer;
  border: 1px solid transparent;
}
.ms-btn--primary {
  background: var(--c-ink);
  color: #fff;
}
.ms-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(26,31,26,.22); }
.ms-btn--ghost {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-ink);
}
.ms-btn--ghost:hover { background: var(--c-surface); }

/* ==========================
   Sections
   ========================== */
.ms-section { padding: var(--sp-12) 0; }
.ms-section--alt { background: var(--c-surface-2); }
.ms-section__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-8); }
.ms-section__head h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: var(--sp-2); }
.ms-section__head p { color: var(--c-ink-soft); margin: 0; }

/* ==========================
   Promotions
   ========================== */
.ms-promos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
}
.ms-promo {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.ms-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ms-promo__img {
  aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  background-color: var(--c-accent-glow);
}
.ms-promo__img--placeholder { background-image: linear-gradient(135deg, var(--c-accent-soft), var(--c-accent-glow)); }
.ms-promo__badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  background: var(--c-ink); color: #fff;
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 500; letter-spacing: .03em;
}
.ms-promo__body { padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.ms-promo__body h3 { font-size: 1.2rem; margin-bottom: var(--sp-2); }
.ms-promo__body p { color: var(--c-ink-soft); margin: 0; font-size: .95rem; }
.ms-promo__product {
  margin-top: var(--sp-3) !important;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}
.ms-promo__product strong { color: var(--c-ink); font-family: var(--font-display); }

/* ==========================
   Speisekarten-Tabs + Grid
   ========================== */
.ms-cat-tabs {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-8);
  position: sticky; top: 64px; z-index: 5;
  padding: var(--sp-3) 0;
  background: rgba(246,245,241,.85);
  backdrop-filter: blur(8px);
}
.ms-cat-tab {
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: .9rem;
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  transition: all .2s;
}
.ms-cat-tab:hover { color: var(--c-ink); border-color: var(--c-ink-soft); }
.ms-cat-tab.is-active {
  background: var(--c-ink); color: #fff; border-color: var(--c-ink);
}
.ms-menu__cat { margin-bottom: var(--sp-12); scroll-margin-top: 140px; }
.ms-menu__cat h3 {
  font-size: 1.5rem; margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
.ms-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-6);
}
.ms-item {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--sp-4);
  background: var(--c-surface); border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.ms-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ms-item__img {
  background-size: cover; background-position: center;
  background-color: var(--c-accent-glow);
  min-height: 110px;
}
.ms-item__img--placeholder {
  background-image: linear-gradient(135deg, var(--c-accent-soft), var(--c-accent-glow));
}
.ms-item__body { padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; display: flex; flex-direction: column; }
.ms-item__body h4 { font-size: 1.05rem; margin-bottom: var(--sp-1); font-family: var(--font-base); font-weight: 600; }
.ms-item__body p { font-size: .88rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-3); flex: 1; }
.ms-item__foot { display: flex; justify-content: space-between; align-items: center; }
.ms-item__foot strong { font-family: var(--font-display); font-size: 1.1rem; }
.ms-item__add {
  font-size: .85rem; color: var(--c-accent);
  font-weight: 500;
  transition: transform .2s;
}
.ms-item__add:hover { transform: translateX(2px); color: var(--c-ink); }

/* ==========================
   Info-Cards (Hours / Zones / Contact)
   ========================== */
.ms-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-6);
}
.ms-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.ms-card h3 { font-size: 1.2rem; margin-bottom: var(--sp-4); }
.ms-card p { margin: 0 0 var(--sp-2); color: var(--c-ink-soft); font-size: .95rem; }
.ms-card a { color: var(--c-ink); border-bottom: 1px dashed var(--c-ink-soft); }
.ms-hours { list-style: none; padding: 0; margin: 0; }
.ms-hours li {
  display: flex; justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: .95rem;
}
.ms-hours li:last-child { border-bottom: none; }
.ms-hours em { color: var(--c-ink-soft); font-style: normal; }
.ms-zone { padding: var(--sp-3) 0; border-bottom: 1px dashed var(--c-line); }
.ms-zone:last-child { border-bottom: none; }
.ms-zone strong { display: block; margin-bottom: var(--sp-1); }

/* ==========================
   Footer
   ========================== */
.ms-footer {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  font-size: .9rem;
  color: var(--c-ink-soft);
}
.ms-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); }

/* ==========================
   Responsive
   ========================== */
@media (max-width: 720px) {
  .ms-nav { gap: var(--sp-3); }
  .ms-nav a:not(.ms-cta) { display: none; }
  .ms-section { padding: var(--sp-8) 0; }
  .ms-hero { padding: var(--sp-8) 0; }
  .ms-cat-tabs { top: 56px; }
}