/* =========================================================================
   Weinhaus Renker · Überlingen
   One-Pager — handgeschriebene Weinkarte trifft warme, ehrliche Editorial-Wärme
   Farben in OKLCH, committed strategy: Weinrot + Walnuss + Papier + Tulpe
   ========================================================================= */

:root {
  /* ---- Palette (OKLCH) ---- */
  --wine:        oklch(0.40 0.115 18);      /* deep wine red — primary */
  --wine-deep:   oklch(0.30 0.095 20);      /* darker wine */
  --walnut:      oklch(0.26 0.035 45);      /* dark walnut brown */
  --walnut-ink:  oklch(0.205 0.028 45);     /* near-black warm ink */
  --paper:       oklch(0.968 0.010 78);     /* warm off-white — the house's own paper */
  --paper-2:     oklch(0.945 0.014 74);     /* slightly deeper paper for banding */
  --tulip:       oklch(0.70 0.145 22);      /* soft tulip rose — the one accent */
  --tulip-soft:  oklch(0.86 0.055 30);      /* pale tulip wash */
  --chalk-bg:    oklch(0.265 0.018 165);    /* dark slate-green chalkboard */
  --chalk-ink:   oklch(0.94 0.012 150);     /* chalk white */
  --gold:        oklch(0.78 0.095 78);      /* candle-glow highlight */

  /* ---- Semantic ---- */
  --bg:          var(--paper);
  --surface:     var(--paper);
  --ink:         var(--walnut-ink);
  --ink-soft:    oklch(0.36 0.028 42);      /* muted body — still ≥4.5:1 on paper */
  --line:        oklch(0.86 0.018 60);      /* hairline on paper */
  --on-dark:     oklch(0.95 0.012 78);
  --on-dark-soft:oklch(0.83 0.020 72);

  /* ---- Type ---- */
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand:    "Shantell Sans", "Segoe Print", "Bradley Hand", cursive;

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.10rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.30rem + 1vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.55rem + 2vw, 3rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);

  /* ---- Space ---- */
  --gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  --section-y: clamp(4rem, 2.6rem + 6vw, 8rem);
  --wrap: 74rem;
  --wrap-narrow: 62rem;
  --radius: 4px;

  /* Navbar-Höhe (Logo-Höhe + vertikales Padding) — für die Hero-Höhe */
  --nav-h: calc(clamp(2.6rem, 2rem + 1.6vw, 3.3rem) + 1.2rem);

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- z-scale ---- */
  --z-backdrop: 90;   /* unter dem Header, damit nur die Seite dahinter unschärft */
  --z-sticky: 100;
  --z-nav-menu: 110;
}

/* ===================== Reset / base ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word; /* lange dt. Komposita brechen notfalls, statt zu überlaufen */
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--walnut-ink);
}

p { text-wrap: pretty; }

::selection { background: var(--tulip-soft); color: var(--walnut-ink); }

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

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: 50%; translate: -50% -140%;
  z-index: 200; background: var(--wine); color: var(--on-dark);
  padding: 0.6rem 1.1rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: translate 0.2s var(--ease-out-quart);
}
.skip-link:focus-visible { translate: -50% 12px; }

/* ===================== Shared bits ===================== */
.overline {
  font-family: var(--font-hand);
  font-size: var(--step-1);
  color: var(--wine);
  line-height: 1;
  margin-bottom: 0.5rem;
  transform: rotate(-1.5deg);
  transform-origin: left;
}

.section__title { font-size: var(--step-3); }
.section { padding-block: var(--section-y); }

/* Sticky-Header-Höhe beim Ankersprung berücksichtigen */
:where(#ueber-uns, #kueche, #wein-bier, #kultur, #terrasse, #kontakt) { scroll-margin-top: 5rem; }

.section__head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__intro {
  margin-top: 1rem; font-size: var(--step-1);
  color: var(--ink-soft); line-height: 1.55; max-width: 60ch;
}
.section--spaces .section__intro { margin-inline: auto; }

/* ---- Tulip motif ---- */
.tulip { width: 1.6em; height: auto; fill: currentColor; overflow: visible; }
.tulip__stem { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; }

/* ---- Buttons ---- */
.btn {
  --btn-bg: var(--wine); --btn-fg: var(--on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.75rem 1.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--btn-bg); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform 0.18s var(--ease-out-quart),
              box-shadow 0.25s var(--ease-out-quart),
              background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--solid { box-shadow: 0 6px 18px -10px oklch(0.30 0.095 20 / 0.7); }
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px oklch(0.30 0.095 20 / 0.85); }
.btn--ghost { background: transparent; color: var(--wine); border-color: color-mix(in oklch, var(--wine) 45%, transparent); }
.btn--ghost:hover { background: var(--wine); color: var(--on-dark); border-color: var(--wine); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--wine); text-decoration: none;
  width: max-content;
}
.link-arrow span { transition: transform 0.22s var(--ease-out-quart); }
.link-arrow:hover span { transform: translateX(5px); }

/* ---- Image frames / placeholders (bis echte Bilder existieren) ---- */
.frame {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 25% 15%, oklch(0.48 0.10 25 / 0.55), transparent 60%),
    radial-gradient(120% 120% at 85% 90%, oklch(0.24 0.03 45 / 0.65), transparent 55%),
    linear-gradient(150deg, var(--walnut) 0%, var(--wine-deep) 100%);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.06), 0 24px 48px -32px oklch(0.20 0.03 40 / 0.6);
}
/* tulip watermark on every placeholder */
.frame::after {
  content: "";
  position: absolute; inset: 0;
  background: no-repeat center / clamp(60px, 22%, 120px)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32"><g fill="none" stroke="white" stroke-opacity="0.16" stroke-width="1.1"><path d="M12 14.4c-2 0-3.4-2.5-3.4-5.6 0-1.9.6-3.4 1.1-3.4.4 0 .7.8.9 2.1.2-1.8.8-3.2 1.4-3.2s1.2 1.4 1.4 3.2c.2-1.3.5-2.1.9-2.1.5 0 1.1 1.5 1.1 3.4 0 3.1-1.4 5.6-3.4 5.6z"/><path d="M12 14.4V28" stroke-linecap="round"/><path d="M12 22.6c-2.7.3-4.9-1.1-5.7-3.5 2.6-.6 4.9.9 5.7 3.5z"/><path d="M12 20.2c1.9-1.4 4.1-1.4 5.2-.7-1.1 1.7-3.3 1.9-5.2.7z"/></g></svg>');
  opacity: 0.9; pointer-events: none;
}
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  color: transparent; /* verbirgt Alt-Text/Broken-Glyph solange kein Bild existiert */
  position: relative; z-index: 1;
}
.frame__cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 1.4rem 1.1rem 0.9rem;
  font-size: var(--step--1); color: var(--on-dark);
  background: linear-gradient(transparent, oklch(0.20 0.03 40 / 0.8));
}

/* ===================== Header / Nav ===================== */
.site-head {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--paper);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--line) 60%, transparent);
  transition: box-shadow 0.3s ease;
}
.site-head[data-elevated="true"] {
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px oklch(0.20 0.03 40 / 0.6);
}
.nav {
  width: min(100% - 2.4rem, var(--wrap));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  padding-block: 0.6rem;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand__logo { height: clamp(2.6rem, 2rem + 1.6vw, 3.3rem); width: auto; display: block; }

.nav__links { list-style: none; display: flex; gap: 1.4rem; padding: 0; }
.nav__links a {
  text-decoration: none; font-weight: 600; font-size: 0.98rem;
  color: inherit; padding: 0.3rem 0; position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: var(--tulip); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease-out-quart);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }

.nav__menu { display: flex; align-items: center; gap: 1.6rem; }
.nav__cta { min-height: 2.6rem; padding: 0.55rem 1.2rem; font-size: 0.95rem; }

.nav__toggle { display: none; }

/* ===================== Hero ===================== */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100vh - var(--nav-h));   /* Fallback */
  min-height: calc(100svh - var(--nav-h));  /* volle Höhe minus Navbar */
  display: grid; align-items: center;
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
  color: var(--on-dark);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; border-radius: 0; z-index: -2; box-shadow: none; }
.hero__bg::after { opacity: 0.10; background-size: clamp(140px, 30%, 280px); }
.hero__bg img { height: 100%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, oklch(0.20 0.03 30 / 0.55) 0%, transparent 30%),
    linear-gradient(0deg, oklch(0.18 0.04 25 / 0.92) 4%, oklch(0.22 0.05 22 / 0.55) 40%, oklch(0.25 0.05 22 / 0.35) 100%);
}
.hero__inner {
  width: min(100% - 2.4rem, var(--wrap));
  margin-inline: auto;
  max-width: 40rem;
}
.hero__kicker {
  font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.78rem; color: var(--tulip-soft); margin-bottom: 1rem;
}
.hero__title {
  color: var(--on-dark);
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px oklch(0.15 0.03 30 / 0.5);
}
.hero__lead {
  margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.6;
  color: var(--on-dark-soft); max-width: 46ch;
}
.hero__actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.hero .btn--ghost { color: var(--on-dark); border-color: color-mix(in oklch, var(--on-dark) 55%, transparent); }
.hero .btn--ghost:hover { background: var(--on-dark); color: var(--wine); border-color: var(--on-dark); }
.hero__hours {
  margin-top: 1.8rem; display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
  color: var(--on-dark);
  background: oklch(0.20 0.03 30 / 0.45);
  border: 1px solid oklch(1 0 0 / 0.14);
  padding: 0.55rem 1rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hours__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px oklch(0.78 0.095 78 / 0.25); }

/* ---- Hanging door sign ---- */
.hero__sign {
  position: absolute; top: 0; right: clamp(1rem, 8vw, 6rem); z-index: 1;
  width: clamp(150px, 22vw, 230px);
  transform-origin: top center;
  animation: sway 6s ease-in-out infinite;
}
/* Seile laufen oben hinter die (undurchsichtige) Navbar und kommen darunter
   hervor – so wirkt das Schild, als hinge es an der Navbar. */
.sign__ropes { display: flex; justify-content: space-between; padding-inline: 18%; height: clamp(84px, 9vw, 118px); }
.sign__ropes span { width: 2px; background: linear-gradient(oklch(0.55 0.04 60), oklch(0.35 0.04 50)); border-radius: 2px; }
.sign__board {
  position: relative;
  background: linear-gradient(160deg, oklch(0.34 0.04 50), oklch(0.24 0.035 45));
  border: 2px solid oklch(0.62 0.07 70 / 0.7);
  border-radius: 6px;
  padding: clamp(0.7rem, 2vw, 1.1rem) 1rem;
  text-align: center;
  box-shadow: 0 18px 30px -18px oklch(0.15 0.03 30 / 0.9), inset 0 0 20px oklch(0 0 0 / 0.3);
}
.sign__board::before {
  content: ""; position: absolute; top: -9px; left: 50%; translate: -50% 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: oklch(0.55 0.05 60); box-shadow: 0 0 0 3px oklch(0.30 0.03 45);
}
.sign__line {
  display: block; font-family: var(--font-hand);
  font-size: clamp(1.05rem, 3.2vw, 1.5rem); font-weight: 600;
  color: var(--gold); line-height: 1.15;
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.4);
}
@keyframes sway {
  0%, 100% { transform: rotate(-2.6deg); }
  50%      { transform: rotate(2.6deg); }
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; z-index: 1;
  width: 26px; height: 42px; border: 2px solid oklch(1 0 0 / 0.5); border-radius: 999px;
  display: grid; place-items: start center; padding-top: 7px;
}
.hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--on-dark); animation: scrolldot 1.8s var(--ease-out-quart) infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 80%,100% { opacity: 0; transform: translateY(10px); } }

/* ===================== Über uns ===================== */
.section--about { background: var(--paper); }
.about__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about__copy > p { margin-top: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.about__copy .section__title { margin-top: 0.2rem; }

.quote {
  margin-top: 2rem; position: relative; padding-left: 2.9rem;
}
.quote::before {
  content: ""; position: absolute; left: 0; top: 0.05em;
  width: 1.8rem; height: 2.3rem;
  background: left top / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32"><g fill="%238a1f2e"><path d="M12 14.4c-2 0-3.4-2.5-3.4-5.6 0-1.9.6-3.4 1.1-3.4.4 0 .7.8.9 2.1.2-1.8.8-3.2 1.4-3.2s1.2 1.4 1.4 3.2c.2-1.3.5-2.1.9-2.1.5 0 1.1 1.5 1.1 3.4 0 3.1-1.4 5.6-3.4 5.6z"/><path d="M12 22.6c-2.7.3-4.9-1.1-5.7-3.5 2.6-.6 4.9.9 5.7 3.5z"/><path d="M12 20.2c1.9-1.4 4.1-1.4 5.2-.7-1.1 1.7-3.3 1.9-5.2.7z"/></g><path d="M12 14.4V29" stroke="%238a1f2e" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>');
}
.quote__text { font-family: var(--font-hand); font-size: var(--step-2); color: var(--wine); line-height: 1.2; }
.quote__by { margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-soft); }

.about__portrait { aspect-ratio: 3 / 2; }
.about__portrait img { object-position: 40% 30%; }
.about__portrait .frame__cap { font-family: var(--font-hand); font-size: var(--step-1); }

@media (min-width: 60rem) {
  .about__grid { grid-template-columns: 1.15fr 0.85fr; }
}

/* ===================== Küche ===================== */
.section--kitchen { background: var(--paper-2); }
.dishes {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.dish {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  position: relative;
  transition: transform 0.25s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart), border-color 0.3s ease;
}
.dish:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -30px oklch(0.30 0.05 40 / 0.7); border-color: color-mix(in oklch, var(--tulip) 40%, var(--line)); }
.dish__motif {
  display: block; width: 1.9rem; height: 1.9rem; margin-bottom: 1rem;
  background: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32"><g fill="%238a1f2e"><path d="M12 14.4c-2 0-3.4-2.5-3.4-5.6 0-1.9.6-3.4 1.1-3.4.4 0 .7.8.9 2.1.2-1.8.8-3.2 1.4-3.2s1.2 1.4 1.4 3.2c.2-1.3.5-2.1.9-2.1.5 0 1.1 1.5 1.1 3.4 0 3.1-1.4 5.6-3.4 5.6z"/><path d="M12 22.6c-2.7.3-4.9-1.1-5.7-3.5 2.6-.6 4.9.9 5.7 3.5z"/><path d="M12 20.2c1.9-1.4 4.1-1.4 5.2-.7-1.1 1.7-3.3 1.9-5.2.7z"/></g><path d="M12 14.4V27" stroke="%238a1f2e" stroke-width="1.4" fill="none" stroke-linecap="round"/></svg>');
}
.dish__name { font-size: var(--step-1); margin-bottom: 0.5rem; }
.dish__text { color: var(--ink-soft); }

/* ---- Chalkboard Sonderkarte ---- */
.chalk { margin-top: clamp(2rem, 5vw, 3.5rem); }
.chalk__frame {
  background:
    radial-gradient(140% 120% at 20% 0%, oklch(0.32 0.02 165 / 0.8), transparent 60%),
    var(--chalk-bg);
  color: var(--chalk-ink);
  border: 10px solid oklch(0.30 0.03 50);
  border-radius: 6px;
  padding: clamp(1.8rem, 5vw, 3rem);
  box-shadow: inset 0 0 60px oklch(0 0 0 / 0.45), 0 26px 50px -34px oklch(0.15 0.02 40 / 0.8);
  position: relative;
}
.chalk__frame::before {
  content: ""; position: absolute; inset: 0; border-radius: 2px; pointer-events: none;
  background: radial-gradient(80% 60% at 70% 30%, oklch(1 0 0 / 0.04), transparent 70%);
}
.chalk__eyebrow { font-family: var(--font-hand); font-size: var(--step-1); color: var(--tulip-soft); transform: rotate(-1deg); }
.chalk__title { font-size: var(--step-3); color: var(--chalk-ink); margin-block: 0.2rem 0.8rem; }
.chalk__text { color: color-mix(in oklch, var(--chalk-ink) 82%, transparent); max-width: 56ch; }
.chalk__list { margin-top: 1.2rem; padding: 0; list-style: none; display: grid; gap: 0.7rem; max-width: 56ch; }
.chalk__list li { position: relative; padding-left: 1.6rem; color: color-mix(in oklch, var(--chalk-ink) 90%, transparent); }
.chalk__list li::before {
  content: ""; position: absolute; left: 0; top: 0.4em;
  width: 0.7rem; height: 0.9rem;
  background: center / contain no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 32"><g fill="none" stroke="%23e7d7a6" stroke-width="1.6"><path d="M12 14.4c-2 0-3.4-2.5-3.4-5.6 0-1.9.6-3.4 1.1-3.4.4 0 .7.8.9 2.1.2-1.8.8-3.2 1.4-3.2s1.2 1.4 1.4 3.2c.2-1.3.5-2.1.9-2.1.5 0 1.1 1.5 1.1 3.4 0 3.1-1.4 5.6-3.4 5.6z"/><path d="M12 14.4V28" stroke-linecap="round"/></g></svg>');
}

/* ===================== Wein & Bier ===================== */
.section--cellar { background: var(--walnut); color: var(--on-dark); }
.section--cellar .section__title,
.section--cellar .cellar__row dt { color: var(--on-dark); }
.section--cellar .overline { color: var(--tulip-soft); }
.section--cellar .section__intro { color: var(--on-dark-soft); }
.cellar__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cellar__img { aspect-ratio: 5 / 6; }
.cellar__list { margin-top: 1.8rem; display: grid; gap: 0; }
.cellar__row { padding-block: 1.15rem; border-top: 1px solid oklch(1 0 0 / 0.14); }
.cellar__row:last-child { border-bottom: 1px solid oklch(1 0 0 / 0.14); }
.cellar__row dt { font-family: var(--font-display); font-size: var(--step-1); margin-bottom: 0.3rem; }
.cellar__row dd { color: var(--on-dark-soft); max-width: 54ch; }
.cellar__note { margin-top: 1.4rem; font-family: var(--font-hand); font-size: var(--step-1); color: var(--gold); }

@media (min-width: 60rem) {
  .cellar__grid { grid-template-columns: 0.8fr 1.2fr; }
}

/* ===================== Kultur ===================== */
.section--culture { background: var(--paper); }
.culture__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.events { list-style: none; padding: 0; display: grid; gap: 0; }
.event {
  display: grid; gap: 0.2rem;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  grid-template-areas: "type title" "type meta";
  column-gap: 1.4rem;
  padding-block: 1.3rem;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.event:last-child { border-bottom: 1px solid var(--line); }
.event__type {
  grid-area: type; align-self: start;
  font-family: var(--font-hand); font-size: var(--step-1); color: var(--wine); line-height: 1.1;
}
.event__title { grid-area: title; font-family: var(--font-display); font-size: var(--step-1); color: var(--walnut-ink); }
.event__meta { grid-area: meta; color: var(--ink-soft); font-size: var(--step--1); }

.teaser {
  background: var(--tulip-soft);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--walnut-ink);
}
.teaser__title { font-size: var(--step-2); margin-bottom: 0.7rem; }
.teaser__text { color: color-mix(in oklch, var(--walnut-ink) 85%, transparent); margin-bottom: 1.2rem; }

@media (min-width: 54rem) {
  .culture__grid { grid-template-columns: 1.4fr 0.6fr; }
}

/* ===================== Terrasse & Räume ===================== */
.section--spaces { background: var(--paper-2); }
.spaces__grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.space { aspect-ratio: 4 / 3; }
.space__cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 2rem 1.3rem 1.1rem; color: var(--on-dark);
  background: linear-gradient(transparent, oklch(0.18 0.03 40 / 0.85));
  display: grid; gap: 0.1rem;
}
.space__seats { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; }
.space__place { font-size: var(--step--1); color: var(--on-dark-soft); }
.spaces__note { margin-top: 1.8rem; text-align: center; font-size: var(--step-1); color: var(--ink-soft); }
.spaces__note a { color: var(--wine); font-weight: 700; text-underline-offset: 3px; }

@media (min-width: 48rem) {
  .spaces__grid { grid-template-columns: 1fr 1fr; }
}

/* ===================== Kontakt ===================== */
.section--contact { background: var(--wine-deep); color: var(--on-dark); }
.section--contact .section__title { color: var(--on-dark); }
.section--contact .overline { color: var(--tulip-soft); }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.contact__details {
  font-style: normal; margin-top: 1.8rem;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.contact__block { color: var(--on-dark); line-height: 1.7; }
.contact__label {
  display: block; font-family: var(--font-hand); font-size: var(--step-1);
  color: var(--tulip-soft); margin-bottom: 0.3rem;
}
.contact__block a { color: var(--on-dark); text-decoration: none; text-underline-offset: 3px; }
.contact__block a:hover { text-decoration: underline; }
.contact__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }
.section--contact .btn--solid { --btn-bg: var(--gold); --btn-fg: var(--walnut-ink); box-shadow: 0 8px 22px -12px oklch(0 0 0 / 0.7); }
.section--contact .btn--ghost { color: var(--on-dark); border-color: oklch(1 0 0 / 0.4); }
.section--contact .btn--ghost:hover { background: var(--on-dark); color: var(--wine-deep); border-color: var(--on-dark); }
.contact__map { aspect-ratio: 4 / 3; }

@media (min-width: 60rem) {
  .contact__grid { grid-template-columns: 1.1fr 0.9fr; }
}

/* ===================== Footer ===================== */
.site-foot { background: var(--walnut-ink); color: var(--on-dark-soft); padding-block: clamp(2.5rem, 5vw, 4rem); }
.foot__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.foot__brand { display: grid; justify-items: start; gap: 0.3rem; }
.foot__logo { height: clamp(3rem, 2.5rem + 1.5vw, 3.9rem); width: auto; display: block; }
.foot__motto { font-family: var(--font-hand); color: var(--tulip-soft); }

/* Hauslied-Player (neben dem Logo im Footer) */
.foot__lockup { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.hauslied {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  background: transparent; cursor: pointer;
  border: 1.5px solid color-mix(in oklch, var(--gold) 55%, transparent);
  border-radius: 999px; color: var(--gold);
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s var(--ease-out-quart);
}
.hauslied:hover { background: var(--gold); color: var(--walnut-ink); border-color: var(--gold); transform: translateY(-2px); }
.hauslied:active { transform: translateY(0) scale(0.98); }
.hauslied__icon {
  position: relative; width: 14px; height: 14px; flex: none;
  display: inline-grid; place-items: center;
}
/* Play: Dreieck */
.hauslied__icon::before {
  content: ""; position: absolute; left: 3px;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transition: opacity 0.15s ease;
}
/* Pause: zwei Balken (nur wenn abgespielt) */
.hauslied__icon::after {
  content: ""; position: absolute; inset: 1px auto 1px 0; width: 100%;
  background:
    linear-gradient(currentColor, currentColor) 2px 0 / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 10px 0 / 4px 100% no-repeat;
  opacity: 0; transition: opacity 0.15s ease;
}
.hauslied.is-playing .hauslied__icon::before { opacity: 0; }
.hauslied.is-playing .hauslied__icon::after { opacity: 1; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot__nav a { color: var(--on-dark-soft); text-decoration: none; font-weight: 600; }
.foot__nav a:hover { color: var(--on-dark); }
.foot__legal { font-size: var(--step--1); color: color-mix(in oklch, var(--on-dark-soft) 80%, transparent); }
.foot__legal a { color: inherit; text-underline-offset: 2px; }
.foot__egg:hover { color: var(--tulip-soft); }

@media (min-width: 54rem) {
  .foot__grid { grid-template-columns: 1fr auto; grid-template-areas: "brand nav" "brand legal"; }
  .foot__brand { grid-area: brand; }
  .foot__nav { grid-area: nav; justify-content: flex-end; }
  .foot__legal { grid-area: legal; text-align: right; }
}

/* ===================== Reveal on scroll ===================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
.reveal.is-in { opacity: 1; transform: none; }

/* ===================== Mobile nav ===================== */
@media (max-width: 52rem) {
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: 0; cursor: pointer; color: inherit;
    font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
    padding: 0.4rem; margin-left: auto;
  }
  .nav__toggle-box { width: 22px; height: 14px; position: relative; }
  .nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform 0.3s var(--ease-out-quart), opacity 0.2s ease;
  }
  .nav__toggle-bar { top: 6px; }
  .nav__toggle-bar::before { top: -6px; }
  .nav__toggle-bar::after { top: 6px; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar { transform: rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { top: 0; transform: rotate(90deg); opacity: 0; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bar::after { top: 0; transform: rotate(90deg); }

  .nav__menu {
    position: fixed; inset: 0 0 0 auto; z-index: var(--z-nav-menu);
    width: min(84vw, 320px); flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0.5rem;
    background: var(--paper);
    padding: 5rem 1.6rem 2rem;
    box-shadow: -20px 0 50px -30px oklch(0.15 0.03 30 / 0.8);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out-expo);
    overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__links { flex-direction: column; gap: 0.2rem; }
  .nav__links a { color: var(--walnut-ink); font-size: 1.15rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .site-head:not([data-elevated="true"]) .nav__links a { color: var(--walnut-ink); }
  .nav__cta { margin-top: 1rem; align-self: stretch; }

  body.nav-open { overflow: hidden; }
  .nav-backdrop {
    position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: oklch(0.18 0.03 30 / 0.5); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__sign { animation: none; transform: rotate(-1deg); }
  .hero__scroll span { animation: none; opacity: 0.8; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}