/* ==========================================================================
   Gasthaus Lichtung — Stylesheet
   Palette: Tannengrün #2B3A2F · Lichtung-Creme #EFE9DC · Rehbraun #8B6F4E
            Waldblau #3D5A73 · Nebelgrau #B8BDB2 · Tinte #1B1B18
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --pine:   #2B3A2F;
  --pine-70:#3E5344;
  --cream:  #EFE9DC;
  --cream-soft:#F7F4EC;
  --fawn:   #8B6F4E;
  --ember:  #3D5A73;
  --fog:    #B8BDB2;
  --ink:    #1B1B18;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --fs-hero: clamp(2.6rem, 6vw, 5.4rem);
  --fs-h2:   clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3:   clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: 1.05rem;
  --fs-small:0.875rem;

  --space-3xs: 0.375rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2.25rem;
  --space-lg:  4rem;
  --space-xl:  6.5rem;

  --max-w: 1180px;
  --radius: 3px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img, svg{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 var(--space-sm);
  letter-spacing:-0.01em;
}

p{ margin:0 0 var(--space-sm); }

.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--space-md);
}

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

/* -------------------- eyebrow / labels -------------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fawn);
  display:inline-flex;
  align-items:center;
  gap:var(--space-3xs);
  margin-bottom:var(--space-xs);
}
.eyebrow::before{
  content:"";
  width:18px; height:1px;
  background:var(--ember);
  display:inline-block;
}

/* -------------------- buttons -------------------- */
.btn{
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.04em;
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.9rem 1.6rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn-primary{
  background:var(--ember);
  color:var(--cream-soft);
}
.btn-primary:hover{ background:#2C4257; transform:translateY(-1px); }

.btn-ghost{
  background:transparent;
  color:var(--pine);
  border-color:var(--pine);
}
.btn-ghost:hover{ background:var(--pine); color:var(--cream-soft); }

.btn-row{ display:flex; gap:var(--space-sm); flex-wrap:wrap; }

/* -------------------- header / nav -------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(239,233,220,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(43,58,47,0.12);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:var(--space-xs);
  padding-bottom:var(--space-xs);
}
.logo{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:600;
  color:var(--pine);
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.logo-mark{ width:26px; height:26px; flex-shrink:0; }

.nav-links{
  display:flex;
  gap:var(--space-md);
  list-style:none;
  margin:0; padding:0;
  font-family:var(--font-mono);
  font-size:0.85rem;
  letter-spacing:0.03em;
}
.nav-links a{
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ember);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--ember); }

.nav-toggle{ display:none; }

/* -------------------- ring divider (signature motif) -------------------- */
.ring-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  margin:var(--space-lg) 0;
  color:var(--fawn);
}
.ring-divider .line{
  flex:1;
  height:1px;
  background:linear-gradient(to right, transparent, currentColor, transparent);
  max-width:220px;
}
.ring-divider svg{ width:34px; height:34px; flex-shrink:0; }

/* -------------------- hero -------------------- */
.hero{
  position:relative;
  min-height:84vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:var(--cream);
}
.hero-bg{
  position:absolute; inset:0;
  background-image:url('images/hero-cafe.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(27,27,24,0.1) 0%,
    rgba(27,27,24,0.18) 40%,
    rgba(27,27,24,0.72) 88%,
    rgba(27,27,24,0.82) 100%);
}
.hero-rings{
  position:absolute;
  right:-100px; top:-90px;
  width:340px; height:340px;
  opacity:0.3;
  pointer-events:none;
  z-index:1;
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:var(--space-lg) 0 var(--space-xl);
}
.hero-content .eyebrow{
  color:var(--cream);
  background:rgba(27,27,24,0.4);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  padding:0.4rem 0.85rem 0.4rem 0.65rem;
  border-radius:var(--radius);
  text-shadow:0 1px 3px rgba(27,27,24,0.5);
}
.hero-content .eyebrow::before{ background:var(--ember); }
.hero-inner{ max-width:640px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-inner .btn-row{ justify-content:center; }
.hero h1{ font-size:var(--fs-hero); color:var(--cream); }
.hero .lede{
  font-size:1.05rem;
  color:rgba(239,233,220,0.88);
  max-width:38ch;
  margin-bottom:var(--space-md);
}
.hero .btn-ghost{
  color:var(--cream);
  border-color:rgba(239,233,220,0.6);
}
.hero .btn-ghost:hover{ background:var(--cream); color:var(--pine); }
.scroll-cue{
  position:absolute;
  bottom:var(--space-sm); left:50%;
  transform:translateX(-50%);
  z-index:2;
  color:rgba(239,233,220,0.7);
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  animation:scrollCue 2.2s ease-in-out infinite;
}
.scroll-cue svg{ width:16px; height:16px; }
@keyframes scrollCue{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.7; }
  50%{ transform:translateX(-50%) translateY(6px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ animation:none; }
}

/* -------------------- sections -------------------- */
section{ padding:var(--space-lg) 0; }
.section-tight{ padding:var(--space-md) 0; }
.section-alt{ background:var(--cream-soft); }
.section-dark{ background:var(--pine); color:var(--cream); }
.section-dark .eyebrow{ color:var(--fog); }
.section-dark .eyebrow::before{ background:var(--cream); }
.section-dark h2{ color:var(--cream); }

.section-head{ max-width:56ch; margin-bottom:var(--space-md); }

/* -------------------- feature photo (signature dish) -------------------- */
.feature-photo{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  transition:transform 0.4s ease;
}
.feature-photo.ratio-4-3{ aspect-ratio:4/3; }
.feature-photo.ratio-3-2{ aspect-ratio:3/2; }
.feature-photo.ratio-16-9{ aspect-ratio:16/9; }
.feature-photo.ratio-1-1{ aspect-ratio:1/1; }
.feature-photo.muted::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(247,244,236,0.14);
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:1;
}
.feature-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.6s ease;
}
.feature-photo:hover img{ transform:scale(1.04); }
.feature-photo::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid rgba(239,233,220,0.4);
  border-radius:var(--radius);
  pointer-events:none;
}
.feature-tag{
  position:absolute;
  left:var(--space-sm); bottom:var(--space-sm);
  background:rgba(27,27,24,0.68);
  backdrop-filter:blur(3px);
  color:var(--cream-soft);
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.05em;
  padding:0.5rem 0.9rem;
  border-radius:var(--radius);
}

/* -------------------- grids / cards -------------------- */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-md);
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-lg);
  align-items:center;
}

.card{
  background:var(--cream-soft);
  border:1px solid rgba(43,58,47,0.12);
  border-radius:var(--radius);
  padding:var(--space-md);
}
.card .icon{ width:40px; height:40px; color:var(--ember); margin-bottom:var(--space-sm); }
.card h3{ font-size:var(--fs-h3); color:var(--pine); }
.card p{ color:var(--pine-70); margin-bottom:0; font-size:0.96rem; }

/* -------------------- ticket strip (hours preview) -------------------- */
.ticket-strip{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  font-family:var(--font-mono);
  border-top:1px dashed var(--fog);
  border-bottom:1px dashed var(--fog);
  padding:var(--space-sm) 0;
}
.ticket-item{ flex:1; min-width:140px; }
.ticket-item .label{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--fawn); }
.ticket-item .value{ font-size:1rem; color:var(--ink); }

/* -------------------- quote -------------------- */
.quote{
  font-family:var(--font-display);
  font-size:clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight:400;
  font-style:italic;
  color:var(--pine);
  max-width:44ch;
  margin:0 auto var(--space-sm);
  text-align:center;
}
.quote-cite{
  display:block;
  text-align:center;
  font-family:var(--font-mono);
  font-style:normal;
  font-size:0.8rem;
  color:var(--fawn);
}

/* -------------------- CTA band -------------------- */
.cta-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  flex-wrap:wrap;
}
.cta-band h2{ margin-bottom:0; }

/* -------------------- footer -------------------- */
.site-footer{
  background:var(--pine);
  color:var(--cream);
  padding:var(--space-lg) 0 var(--space-md);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--space-md);
  padding-bottom:var(--space-md);
  border-bottom:1px solid rgba(239,233,220,0.18);
}
.site-footer h4{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--fog);
  margin-bottom:var(--space-sm);
}
.site-footer a{ opacity:0.9; }
.site-footer a:hover{ opacity:1; text-decoration:underline; }
.footer-logo{
  font-family:var(--font-display);
  font-size:1.3rem;
  margin-bottom:var(--space-xs);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-xs);
  padding-top:var(--space-sm);
  font-family:var(--font-mono);
  font-size:0.78rem;
  opacity:0.75;
}
address{ font-style:normal; line-height:1.7; }

/* -------------------- page hero (inner pages) -------------------- */
.page-hero{
  padding:var(--space-lg) 0 var(--space-md);
  border-bottom:1px solid rgba(43,58,47,0.12);
}
.page-hero h1{ color:var(--pine); font-size:clamp(2.2rem, 4.5vw, 3.4rem); }
.page-hero .lede{ max-width:52ch; color:var(--pine-70); }

/* -------------------- menu (Speisekarte) -------------------- */
.menu-category{ margin-bottom:var(--space-lg); }
.menu-category h2{ color:var(--pine); }
.menu-category .cat-note{ color:var(--fawn); font-family:var(--font-mono); font-size:0.85rem; margin-bottom:var(--space-md); }

.menu-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-md);
  padding:var(--space-sm) 0;
  border-bottom:1px dotted var(--fog);
}
.menu-item.has-thumb{ align-items:center; }
.menu-item-thumb{
  width:64px; height:64px;
  border-radius:var(--radius);
  object-fit:cover;
  flex-shrink:0;
}
.menu-item-text{ flex:1; }
.menu-item:last-child{ border-bottom:none; }
.menu-item-name{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:0.2rem;
}
.menu-item-desc{ font-size:0.9rem; color:var(--pine-70); max-width:46ch; }
.menu-item-price{
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:var(--ember);
  white-space:nowrap;
  align-self:flex-start;
}

/* -------------------- team (Über uns) -------------------- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-md);
}
.team-card{ text-align:left; }
.team-avatar{
  width:100%; aspect-ratio:1/1;
  border-radius:var(--radius);
  margin-bottom:var(--space-sm);
}
.team-card h3{ font-size:1.15rem; margin-bottom:0.15rem; color:var(--pine); }
.team-role{ font-family:var(--font-mono); font-size:0.78rem; color:var(--fawn); text-transform:uppercase; letter-spacing:0.08em; }

/* -------------------- values list -------------------- */
.values-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-md); }
.values-list li{ display:flex; gap:var(--space-sm); }
.values-list .num{
  font-family:var(--font-mono);
  color:var(--ember);
  font-size:0.85rem;
  padding-top:0.3rem;
}

/* -------------------- contact page -------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-xl);
  align-items:start;
}
.form-field{ margin-bottom:var(--space-sm); display:flex; flex-direction:column; gap:0.4rem; }
.form-field label{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--fawn);
}
.form-field input,
.form-field textarea{
  font-family:var(--font-body);
  font-size:1rem;
  padding:0.75rem 0.9rem;
  border:1px solid var(--fog);
  border-radius:var(--radius);
  background:var(--cream-soft);
  color:var(--ink);
}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--ember);
}
.form-note{
  font-size:0.82rem;
  color:var(--pine-70);
  margin-top:var(--space-xs);
}
.hours-table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:0.92rem; }
.hours-table td{ padding:0.55rem 0; border-bottom:1px dotted var(--fog); }
.hours-table td:last-child{ text-align:right; color:var(--ember); }

.map-sketch{ border:1px solid var(--fog); border-radius:var(--radius); background:var(--cream-soft); }

/* -------------------- scroll reveal -------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* -------------------- hover lift -------------------- */
.card, .gallery-item{
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px -18px rgba(27,27,24,0.35);
  border-color:var(--fawn);
}

/* -------------------- image gallery (marquee) -------------------- */
/* -------------------- image gallery -------------------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--space-sm);
}
.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid rgba(43,58,47,0.12);
  background:var(--cream-soft);
  cursor:default;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.gallery-item:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px -18px rgba(27,27,24,0.35);
  border-color:var(--fawn);
}
.gallery-item svg, .gallery-item img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.5s ease;
}
.gallery-item:hover svg, .gallery-item:hover img{ transform:scale(1.08); }
.gallery-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:var(--space-xs) var(--space-sm);
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.04em;
  color:var(--cream-soft);
  background:linear-gradient(to top, rgba(27,27,24,0.72), transparent);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:none; }

/* -------------------- reservation card (dark) -------------------- */
.reserve-card{
  background:var(--pine);
  color:var(--cream);
  border-radius:var(--radius);
  padding:var(--space-lg) var(--space-md);
  max-width:560px;
  margin:0 auto;
  border:1px solid rgba(239,233,220,0.14);
}
.reserve-card .form-field label{ color:var(--fog); }
.reserve-card .form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.reserve-card input,
.reserve-card select,
.reserve-card textarea{
  background:rgba(239,233,220,0.06);
  border:1px solid rgba(239,233,220,0.3);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:1rem;
  padding:0.75rem 0.9rem;
  border-radius:var(--radius);
  width:100%;
}
.reserve-card input::placeholder{ color:rgba(239,233,220,0.45); }
.reserve-card input:focus,
.reserve-card select:focus,
.reserve-card textarea:focus{
  outline:none;
  border-color:var(--ember);
}
.reserve-card select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%23EFE9DC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 0.9rem center;
  padding-right:2.4rem;
}
.reserve-card .btn-primary{
  width:100%;
  justify-content:center;
  padding:1rem;
  font-size:0.9rem;
  margin-top:var(--space-xs);
}
.reserve-card .form-note{ color:rgba(239,233,220,0.6); text-align:center; }

/* -------------------- responsive -------------------- */
@media (max-width: 880px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; gap:var(--space-md); }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .hero{ min-height:70vh; }
  .hero-bg{ background-attachment:scroll; }
  .hero-rings{ opacity:0.2; width:280px; height:280px; right:-100px; top:-60px; }
}

@media (max-width: 640px){
  .nav-links{
    position:fixed; inset:64px 0 0 0;
    background:var(--cream);
    flex-direction:column;
    padding:var(--space-md);
    gap:var(--space-md);
    font-size:1.1rem;
    transform:translateX(100%);
    transition:transform 0.25s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{
    display:flex;
    align-items:center; justify-content:center;
    width:38px; height:38px;
    background:transparent;
    border:1px solid var(--pine);
    border-radius:var(--radius);
    cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; display:block; width:16px; height:1px; background:var(--pine); position:relative;
  }
  .nav-toggle span::before{ top:-5px; }
  .nav-toggle span::after{ top:4px; }
  .team-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .reserve-card .form-row{ grid-template-columns:1fr; }
  .reserve-card{ padding:var(--space-md) var(--space-sm); }
  .hero{ min-height:60vh; align-items:flex-end; }
  .hero .lede{ max-width:none; }
}