@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Mulish:wght@400;500;600;700&display=swap');

:root{
  --beige: #E8DFCB;
  --beige-light: #F5F1E6;
  --brown-dark: #2E2117;
  --brown-mid: #5B4230;
  --brown-soft: #8A6A4B;
  --brass: #A9895F;
  --brass-light: #C9AD7E;
  --gray: #837C6E;
  --gray-light: #D6D0C1;
  --black: #1A1613;
  --font-head: 'Cormorant Garamond', serif;
  --font-body: 'Mulish', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x: hidden; }
body{
  background: var(--beige);
  color: var(--brown-dark);
  font-family: var(--font-body);
  line-height: 1.65;
}
a{ color: inherit; text-decoration:none; }
.wrap{ max-width: 1100px; margin:0 auto; padding: 0 32px; }

/* ---------- header ---------- */
header{
  background: var(--black);
  position: sticky; top:0; z-index: 50;
  border-bottom: 1px solid rgba(169,137,95,.35);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0;
}
.logo-placeholder{
  width:44px; height:44px; border-radius:50%;
  border: 1px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  color: var(--brass-light); font-family: var(--font-head); font-weight:600; font-size:19px;
  flex-shrink:0;
}
.brand{ display:flex; align-items:center; gap:16px; }
.brand-name{ font-family: var(--font-head); font-weight:600; font-size:1.55rem; color: var(--beige-light); letter-spacing:.02em; }
nav{ display:flex; align-items:center; gap: 32px; }
nav a{ color: var(--gray-light); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
nav a:hover, nav a.active{ color: var(--brass-light); }
nav a.nav-cta{ background: var(--brass); border: 1px solid var(--brass); padding: 9px 18px; color: var(--black); font-weight:700; }
nav a.nav-cta:hover{ background: var(--brass-light); border-color: var(--brass-light); color: var(--black); }

.nav-toggle{
  display:none; background:none; border:none; width:34px; height:34px; padding:0;
  align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
  margin-right: 20px;
}
.nav-toggle .bars{ position:relative; width:24px; height:16px; }
.nav-toggle .bars span{
  display:block; position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background: var(--brass-light); transition: background .2s;
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:7px; }
.nav-toggle .bars span:nth-child(3){ top:14px; }
.nav-toggle:hover .bars span{ background: var(--brass); }

@media (max-width:960px){
  nav{
    display:none; position:absolute; top:100%; left:0; right:0; background: var(--black);
    flex-direction:column; align-items:stretch; gap:0; padding: 6px 0 14px;
    border-top: 1px solid rgba(169,137,95,.35); border-bottom: 1px solid rgba(169,137,95,.35);
  }
  nav.open{ display:flex; }
  nav a{ padding: 14px 32px; font-size:.82rem; }
  nav a.nav-cta{ margin: 10px 32px 0; text-align:center; border-width:1px; }
  .nav-toggle{ display:flex; }
  header{ position: sticky; }
}
/* ---------- info strip ---------- */
.info-strip{ background: var(--brass); }
.info-strip-inner{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 10px;
  padding: 12px 32px; font-size:.82rem; color: var(--black); font-weight:600; letter-spacing:.02em;
}
.info-strip-inner a{ color: var(--black); text-decoration:underline; }
.info-strip .sep{ opacity:.5; }
@media (max-width:700px){ .info-strip .sep{ display:none; } .info-strip-inner{ flex-direction:column; gap:4px; text-align:center; padding:14px 20px; } }

/* ---------- hero ---------- */
.hero{ position:relative; width:100%; }
.hero img{ width:100%; height: min(82vh, 720px); object-fit: cover; display:block; filter: saturate(.92) contrast(1.03); }
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(26,22,19,0) 45%, rgba(26,22,19,.88) 100%);
}
.hero-text{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 40px 32px 60px; text-align:center;
}
.hero-text .kicker{
  color: var(--brass-light); font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:600; margin: 0 0 18px;
}
.hero-text h1{
  font-family: var(--font-head); font-weight:600; color: var(--beige-light);
  font-size: clamp(2.8rem, 6.4vw, 5.2rem); margin:0 0 18px; letter-spacing:.01em;
}
.hero-rule{ width:64px; height:1px; background: var(--brass); margin: 0 auto 18px; border:none; }
.hero-text p{
  color: var(--gray-light); font-size:1.02rem; margin:0; letter-spacing:.05em;
}

/* ---------- sections ---------- */
section{ padding: 96px 0; }
.section-title{
  font-family: var(--font-head); font-weight:600; color: var(--brown-dark);
  font-size: clamp(2rem, 3.5vw, 2.8rem); margin:0 0 8px; letter-spacing:.01em;
}
.section-kicker{
  font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color: var(--brass);
  font-weight:700; margin:0 0 16px;
}
.rule{ width:56px; height:1px; background: var(--brass); margin: 22px 0 36px; border:none; }
.rule.center{ margin-left:auto; margin-right:auto; }

/* ---------- history section ---------- */
.history{ background: var(--beige-light); }
.history-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start; }
@media (max-width:800px){ .history-grid{ grid-template-columns:1fr; } }
.history p{ margin: 0 0 20px; color: var(--brown-dark); font-size: 1.06rem; }
.history p:first-of-type::first-letter{
  font-family: var(--font-head); font-size: 3.8rem; font-weight:600; color: var(--brass);
  float:left; line-height:.78; margin: 8px 12px 0 0;
}
.history-quote{
  border-left: 1px solid var(--brass); padding: 4px 0 4px 24px; margin: 30px 0;
  font-family: var(--font-head); font-style:italic; font-size:1.35rem; color: var(--brown-mid);
}

/* ---------- badges / info ---------- */
.badges{ display:flex; flex-wrap:wrap; gap: 30px; margin-top: 14px; }
.badge{
  display:flex; align-items:center; gap:10px;
  font-size:.85rem; font-weight:600; color: var(--brown-dark);
  letter-spacing:.03em; border-bottom: 1px solid var(--brass); padding-bottom: 6px;
}
.badge .dot{ width:5px; height:5px; border-radius:50%; background: var(--brass); flex-shrink:0; }

/* ---------- about/cuisine ---------- */
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:64px; align-items:center; }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }
.recommend-card{
  background: var(--black); color: var(--beige-light);
  padding: 40px 36px; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass);
}
.recommend-card .section-kicker{ color: var(--brass-light); }
.recommend-card h3{ font-family: var(--font-head); font-weight:600; font-size:1.7rem; margin:0 0 14px; color: var(--beige-light); }
.recommend-card p{ margin:0; color: var(--gray-light); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; background: transparent; color: var(--brass-light);
  font-weight:700; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  padding: 15px 34px; border: 1px solid var(--brass); cursor:pointer; border-radius: 8px;
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color: transparent;
}
.btn:hover{ background: var(--brass); color: var(--black); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(169,137,95,.3); }
.btn:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(169,137,95,.25); }

/* ---------- anfahrt: karte + kontakt ---------- */
.anfahrt-full{ background: var(--brown-dark); padding: 64px 0; }
.anfahrt-full .rule{ background: var(--brass); margin: 22px 0 44px; }
.anfahrt-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items:start; }
@media (max-width:860px){ .anfahrt-grid{ grid-template-columns: 1fr; } }
.map-card{ height: 340px; background: var(--beige-light); overflow:hidden; border-radius: 10px; box-shadow: 0 4px 20px rgba(26,22,19,.12); }
.map-card iframe{ display:block; height: 340px; }
.contact-card{ background: var(--beige-light); padding: 26px 26px; border-radius: 10px; box-shadow: 0 4px 20px rgba(26,22,19,.12); }
.contact-card h3{
  font-family: var(--font-head); font-weight:600; color: var(--brown-dark); font-size:1.5rem; margin:0 0 18px;
}
.contact-line{ font-size:.95rem; color: var(--brown-dark); margin-bottom: 12px; line-height:1.5; }
.contact-line a{ color: var(--brown-mid); border-bottom: 1px solid var(--brass); padding-bottom:1px; }
.contact-form{ margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gray-light); display:flex; flex-direction:column; gap:4px; }
.contact-form label{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gray); font-weight:700; margin-top:8px; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; box-sizing:border-box;
  font-family: var(--font-body); font-size:16px; padding: 9px 12px; border: 1.5px solid var(--gray-light);
  background: var(--beige); color: var(--brown-dark); resize: vertical; border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(46,33,23,.03);
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* WICHTIG: input[type=date]/[type=time] bewusst NICHT hier - Safari macht bei
   -webkit-appearance:none auf Datum-/Uhrzeitfeldern den Wert unsichtbar. */
.contact-form input:not([type=date]):not([type=time]), .contact-form textarea{
  -webkit-appearance:none; appearance:none;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  outline:none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(169,137,95,.18), inset 0 1px 2px rgba(46,33,23,.03);
}
.contact-form select{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23A9895F'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23A9895F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px;
}
.contact-form .btn{ color: var(--brown-dark); border-color: var(--brown-mid); padding: 12px 24px; font-size:.74rem; }
.contact-form .btn:hover{ background: var(--brown-mid); color: var(--beige-light); box-shadow: 0 6px 16px rgba(46,33,23,.25); }

.contact-compact{
  display:flex; flex-direction:column; gap:5px; font-size:.82rem; color: var(--brown-dark);
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--gray-light);
}
.contact-compact a{ color: var(--brown-mid); }
.reserve-note{ font-size:.8rem; color: var(--gray); margin: -4px 0 14px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row > div{ display:flex; flex-direction:column; min-width:0; }
.optional{ text-transform:none; letter-spacing:0; font-weight:400; color: var(--gray); }
.field-hint{ font-size:.72rem; color: var(--brown-mid); margin-top:3px; min-height:1em; }
.field-hint.warn{ color: #A3402E; font-weight:700; }
.form-footnote{ font-size:.74rem; color: var(--gray); margin: 10px 0 0; text-align:center; }
.reserve-success{ text-align:center; padding: 16px 0; }
.reserve-success h3{ font-family: var(--font-head); font-size:1.3rem; color: var(--brown-dark); margin:0 0 10px; }
.reserve-success p{ color: var(--brown-dark); font-size:.92rem; }

/* ---------- Reservierung als Schritt-für-Schritt-Assistent (Zusatzfunktion) ---------- */
.funnel-progress{ display:flex; justify-content:center; gap:8px; margin-bottom:20px; }
.funnel-dot{ width:8px; height:8px; border-radius:50%; background: var(--gray-light); transition: background .2s ease, transform .2s ease; }
.funnel-dot.active{ background: var(--brass); transform: scale(1.3); }
.funnel-dot.done{ background: var(--brass-light); }
.contact-form.funnel-active .reserve-step{ display:none; animation: funnelFade .25s ease; }
.contact-form.funnel-active .reserve-step.active{ display:block; }
@keyframes funnelFade{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:none; } }
.funnel-nav{ display:flex; gap:10px; margin-top:22px; }
.funnel-nav .btn{ flex:1; justify-content:center; }
.funnel-nav .funnel-back{ flex:0 0 auto; padding-left:22px; padding-right:22px; }
@media (max-width:500px){ .form-row{ grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer{ background: var(--black); color: var(--gray-light); padding: 56px 0 30px; border-top: 1px solid rgba(169,137,95,.35); }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 30px; }
footer h4{ font-family: var(--font-head); font-weight:600; color: var(--brass-light); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px; }
footer p, footer a{ font-size:.88rem; color: var(--gray-light); margin:0 0 8px; display:block; }
.footer-bottom{ text-align:center; margin-top: 40px; padding-top: 24px; border-top: 1px solid #33291f; font-size:.76rem; letter-spacing:.06em; color: var(--gray); }

/* ---------- gastfreundschaft ---------- */
.hospitality{ background: var(--beige-light); padding: 96px 0; }
.hospitality-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items:center; }
@media (max-width:800px){ .hospitality-grid{ grid-template-columns:1fr; } }
.hospitality-image img{ width:100%; height:100%; min-height:320px; object-fit:cover; border-radius: 10px; }
.hospitality p{ margin: 0 0 18px; font-size:1.05rem; color: var(--brown-dark); }

/* ---------- testimonials ---------- */
.testimonials{ background: var(--beige); }
.testimonial-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 20px; }
@media (max-width:800px){ .testimonial-grid{ grid-template-columns:1fr; } }
.testimonial{ background: var(--beige-light); padding: 28px 26px; border-top: 2px solid var(--brass); }
.testimonial p{ font-family: var(--font-head); font-style:italic; font-size:1.12rem; color: var(--brown-dark); margin:0 0 16px; }
.testimonial-name{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gray); font-weight:700; }
/* ---------- speisekarte page ---------- */
.page-header{ background: var(--beige-light); text-align:center; padding: 72px 0 50px; }
.category{ margin-bottom: 56px; }
.category:last-child{ margin-bottom:0; }
.category h3{
  font-family: var(--font-head); font-weight:600; font-size:1.7rem; color: var(--brown-dark);
  border-bottom: 1px solid var(--brass); padding-bottom: 12px; margin: 0 0 22px; letter-spacing:.01em;
}
.menu-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.menu-row .name{ font-weight:700; color: var(--brown-dark); font-size:1.08rem; }
.menu-row .leader{ flex:1; border-bottom: 1px dotted var(--gray-light); height:1em; margin:0 2px; }
.menu-row .price{ font-weight:600; color: var(--brass); font-size:1rem; white-space:nowrap; font-family: var(--font-head); }
.menu-desc{ font-size:.9rem; color: var(--gray); margin: -12px 0 18px; font-style:italic; }

/* ---------- scroll reveal animations ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; }
  .reveal-up{ transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal-left{ transform: translateX(-40px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal-right{ transform: translateX(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal-scale{ transform: scale(.92); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal-down{ transform: translateY(-24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
  .reveal.in-view{ opacity:1; transform:none; }
  .reveal-stagger > *{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
  .reveal-stagger.in-view > *{ opacity:1; transform:none; }
  .reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
  .reveal-stagger.in-view > *:nth-child(2){ transition-delay:.18s; }
  .reveal-stagger.in-view > *:nth-child(3){ transition-delay:.31s; }
  .reveal-stagger.in-view > *:nth-child(4){ transition-delay:.44s; }

  .badge{ transition: transform .2s ease, border-color .2s ease; }
  .badge:hover{ transform: translateY(-2px); border-color: var(--brown-mid); }

  .testimonial{ transition: transform .3s ease, box-shadow .3s ease; }
  .testimonial:hover{ transform: translateY(-6px); }

  .logo-placeholder{ transition: transform .3s ease; }
  .logo-placeholder:hover{ transform: rotate(-8deg) scale(1.08); }

  nav a:not(.nav-cta){ position:relative; }
  nav a:not(.nav-cta)::after{
    content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
    background: var(--brass-light); transition: right .25s ease;
  }
  nav a:not(.nav-cta):hover::after{ right:0; }

  .hero-text h1{ animation: heroPop .8s cubic-bezier(.2,.8,.2,1) both .1s; }
  .hero-text .kicker{ animation: fadeSimple .6s ease both; }
  .hero-rule{ animation: growLine .7s ease both .35s; }
  .hero-text p{ animation: fadeSimple .6s ease both .5s; }
  @keyframes heroPop{ from{ opacity:0; transform: translateY(24px) scale(.97); } to{ opacity:1; transform:none; } }
  @keyframes fadeSimple{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes growLine{ from{ width:0; opacity:0; } to{ width:64px; opacity:1; } }

  .map-card, .contact-card{ transition: transform .3s ease; }
}
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }