/* features.css — neue Bausteine (Gewinnspiel, Social-Teaser, Social Proof, Reservierungs-Recap).
   Bewusst eigener Namespace (lf-*), damit nichts mit Webflows generierten Klassen kollidiert. */

:root {
  --lf-olive: #2e4a25;
  --lf-olive-dark: #203319;
  --lf-gold: #c4a571;
  --lf-caramel: #ba8f6d;
  --lf-wine: #680205;
  --lf-flame: #da592e;
  --lf-cream: #faf8f3;
  --lf-white: #ffffff;
  --lf-text: #2b2b2b;
  --lf-serif: "Times New Roman", TimesNewRoman, Times, Baskerville, Georgia, serif;
  --lf-display: Pirataone, "Palatino Linotype", sans-serif;
}

/* ---------- Social-Media-Teaser (Startseite) ----------
   Bewusst KEIN eigener heller/weisser Hintergrund: das ganze Textsystem der
   Seite (.heading-20, .paragraph-* etc.) ist auf weissen Text auf dunklem/
   farbigem Grund ausgelegt (var(--color-3) = #fff, ueberall). Ein weisser
   Section-Hintergrund macht diesen Text unsichtbar. Stattdessen: dieselbe
   Caramel-Flaeche wie die Galerie-Sektion direkt davor (var(--color)) --
   identischer Farbton wie ueberall sonst im Styleguide, keine neue Farbe. */
.lf-social {
  background: var(--color);
  padding: 70px 24px 40px;
  text-align: center;
  position: relative;
}
.lf-social:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 2px;
  background: var(--color-2);
  opacity: .4;
}
.lf-social .heading-20 {
  color: var(--color-3);
  opacity: 1;
}
.lf-social__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 780px;
  margin: 0 auto 34px;
}
.lf-social__grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 8px 22px rgba(43, 43, 43, .18);
  transition: transform .35s ease;
}
.lf-social__grid a:hover img { transform: translateY(-4px); }
.lf-social__cta-text {
  font-family: var(--lf-serif);
  color: var(--color-3);
  font-size: 1.05rem;
  margin: 0 0 20px;
}
.lf-social__choice {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 58px;
  align-items: center;
}
/* Buttons hier bewusst OHNE eigene Klasse -- die Buttons im Markup nutzen
   die vorhandenen Webflow-Klassen (button w-button / button _3 w-button),
   damit sie 1:1 wie ueberall sonst auf der Seite aussehen. */
.lf-social__platforms {
  display: none;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  animation: lf-fade-up .35s ease both;
}
.lf-social__platforms.is-visible { display: inline-flex; }
@keyframes lf-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Social Proof (Navbar, oben) ----------
   Gleiche Farbe wie .navbar selbst (var(--color-2)), damit die Leiste wie
   ein natuerlicher Teil der Navbar wirkt statt wie ein aufgesetzter Balken. */
.lf-navproof {
  background: var(--color-2);
  text-align: center;
  padding: 9px 16px;
  width: 100%;
}
.lf-navproof__item {
  font-family: var(--lf-serif);
  font-size: .78rem;
  color: rgba(255, 255, 255, .92);
  letter-spacing: .01em;
}
.lf-navproof__label {
  color: var(--lf-gold);
  font-weight: 700;
  margin-right: 4px;
}
.lf-navproof__item a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.lf-navproof__item a:hover { border-bottom-color: #fff; }
@media (max-width: 480px) {
  .lf-navproof__item { font-size: .68rem; }
}

/* ---------- Reservierungs-Recap ----------
   .section-reservation hat im Original eine feste Hoehe (40rem) + overflow:
   hidden -- exakt auf die urspruengliche Formularhoehe OHNE Recap-Karte
   zugeschnitten. Dadurch wuerde die Karte nicht den Container mitwachsen
   lassen, sondern abgeschnitten werden bzw. den nachfolgenden Abschnitt
   ueberlappen. Container muss sich normal (static) verhalten und mitwachsen. */
.section-reservation {
  height: auto !important;
  overflow: visible !important;
}

/* ---------- Vorspeisen/Hauptgänge/Dessert-Teller (Startseite) ----------
   .section-highlights hat eine feste Hoehe + overflow:hidden, die Teller-
   Bilder haengen per grossem negativen margin-top rein ("aus dem dunklen
   Balken auftauchen"). Bei manchen Fensterbreiten ist die feste Hoehe knapp
   zu niedrig fuer das tatsaechlich gerenderte Bild -> Teller werden unten
   abgeschnitten.
   overflow:visible allein reicht NICHT: die Sektion behaelt sonst ihre
   urspruengliche Hoehe, der nachfolgende Abschnitt faengt an derselben
   Stelle an wie vorher -> die ueberlaufenden Teller/Labels ueberlappen dann
   dessen echten Inhalt statt nur auf dessen (gleichfarbigen) Hintergrund zu
   ueberlaufen. Deshalb zusaetzlich die Sektion selbst hoeher machen.
   Gemessen (isolierter Test, echte CSS-Klassen): Ueberhang ist bei
   ~1600-1750px Breite am groessten (~110px bei den Bildern), bei noch
   breiteren Screens bleibt er stabil (Container hat max-width). Unter
   ~992px (Tablet/Mobile) kein nennenswerter Ueberhang, dort unveraendert
   lassen -- nur der breite Desktop-Bereich braucht mehr Hoehe. */
.section-highlights,
.div-block-10 {
  overflow: visible !important;
}
@media (min-width: 992px) {
  .section-highlights {
    height: calc(40rem + 170px) !important;
  }
}
.lf-recap {
  display: none;
  margin-top: 22px;
  background: #fff;
  border: 1px solid rgba(196, 165, 113, .4);
  border-radius: 12px;
  padding: 24px 26px;
  text-align: left;
  font-family: var(--lf-serif);
  color: var(--lf-text);
  box-shadow: 0 10px 30px rgba(43, 43, 43, .12);
}
.lf-recap.is-visible { display: block; }
.lf-recap h4 {
  font-family: var(--lf-display);
  color: var(--lf-olive);
  font-size: 1.3rem;
  margin: 0 0 14px;
  font-weight: 400;
}
.lf-recap dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0 0 20px;
}
.lf-recap dt { color: var(--lf-caramel); font-weight: 700; }
.lf-recap dd { margin: 0; }
.lf-recap__insta {
  margin-top: 20px;
  padding: 20px 18px 22px;
  text-align: center;
  background: #faf5ec;
  border: 1px solid rgba(196, 165, 113, .3);
  border-radius: 10px;
}
.lf-recap__insta p {
  margin: 0 0 16px;
  color: var(--lf-text);
  font-size: .95rem;
}
.lf-recap__insta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.lf-recap__insta-btn img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
.lf-recap__toggle {
  background: none;
  border: none;
  color: var(--lf-caramel);
  font-family: var(--lf-serif);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  font-size: .95rem;
  padding: 0;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .lf-social__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}