/* ==========================================================================
   Gasthaus Lichtung — Stylesheet
   Palette: Tannengrün #2B3A2F · Lichtung-Creme #EFE9DC · Rehbraun #8B6F4E
            Waldblau #3D5A73 · Nebelgrau #B8BDB2 · Tinte #1B1B18 · Trieb-Grün #4F7358
   (Trieb-Grün: neue Akzentfarbe nur für den Primär-Button; der Header hebt
   sich jetzt außerdem per Sandton vom Creme-Seitenhintergrund ab, statt in
   fast identischer Farbe darüber zu liegen.)
   ========================================================================== */

/* Google-Fonts-Einbindung bewusst NICHT mehr per @import hier drin - das
   blockiert das Rendering zusätzlich, weil der Browser diese Datei erst
   laden/parsen muss, bevor er die Schriftart-Anfrage startet. Läuft
   stattdessen im <head> jeder HTML-Datei per <link rel="preconnect"> +
   <link rel="stylesheet"> parallel zu allem anderen. */

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

  --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(--sprout);
  color:var(--cream-soft);
}
.btn-primary:hover{ background:#3F5C46; 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;
  /* Kräftigerer Sandton statt der vorherigen (fast identischen) Creme-Farbe
     des Seitenhintergrunds - dadurch hebt sich der Header jetzt auch direkt
     sichtbar ab, nicht nur per schwacher Transparenz auf gleicher Farbe. */
  background:rgba(228,213,188,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(139,111,78,0.35);
}
.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.webp');
  background-size:cover;
  background-position:center;
  /* KEIN background-attachment:fixed mehr: iOS/iPadOS skaliert einen fixierten
     Hintergrund auf die gesamte Dokumenthöhe statt auf den sichtbaren Bereich
     und zoomt das Bild dadurch stark hinein (sichtbar unscharf, u. a. auf dem
     iPad im Querformat). Ein Media-Query-Schutz (hover/pointer) hilft nicht
     zuverlässig, weil ein iPad mit Trackpad als Maus-Gerät gilt. Daher bewusst
     normales Scrollen - der Hero wirkt optisch praktisch identisch, nur ohne
     Parallax, dafür überall gestochen scharf. */
}
.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);
}
a.card{ display:block; text-decoration:none; color:inherit; }
.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; }
.card-link-hint{
  display:inline-block;
  margin-top:var(--space-sm);
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--ember);
}

.momente-carousel{ display:contents; }
.momente-dots{ display:none; }

/* -------------------- 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); scroll-margin-top:calc(var(--space-lg) + 48px); }
.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);
}
/* WICHTIG: Grid-/Flex-Elemente haben standardmäßig min-width:auto und schrumpfen
   deshalb nicht unter die Mindestbreite ihres Inhalts. Das iOS-Datumsfeld
   (input type="date") erzwingt eine relativ große Mindestbreite - ohne die
   folgende Regel wird seine Rasterspalte dadurch breiter als 1fr, und das
   Datumsfeld schiebt sich sichtbar über das daneben liegende Uhrzeit-Feld
   (auf dem iPad beobachtet). min-width:0 auf Zelle UND Feld erlaubt das
   Schrumpfen auf die Spaltenbreite - saubere Trennung bei jeder Breite. */
.reserve-card .form-row .form-field{ min-width:0; }
.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%;
  min-width:0;
}
/* iOS rendert input[type=date]/[time] mit einer eigenen, oft zu breiten
   Standarddarstellung. appearance:none normalisiert die Breite, sodass das
   Feld sich brav an width:100% seiner Spalte hält und nicht überläuft. */
.reserve-card input[type="date"],
.reserve-card input[type="time"]{
  -webkit-appearance:none;
  appearance:none;
}
.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-rings{ opacity:0.2; width:280px; height:280px; right:-100px; top:-60px; }

  .momente-carousel{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:var(--space-sm);
    margin:0 calc(-1 * var(--space-md));
    padding:0 var(--space-md);
    scroll-padding:0 var(--space-md);
  }
  .momente-carousel::-webkit-scrollbar{ display:none; }
  .momente-carousel .card{
    flex:0 0 85%;
    scroll-snap-align:start;
  }
  .momente-dots{
    display:flex;
    justify-content:center;
    gap:0.5rem;
    margin-top:var(--space-sm);
  }
  .momente-dots span{
    width:6px; height:6px; border-radius:50%;
    background:rgba(43,58,47,0.2);
    transition:background 0.2s ease;
  }
  .momente-dots span.active{ background:var(--ember); }
}

@media (max-width: 640px){
  .hero-bg{ background-image:url('images/Bg-handy.webp'); }
  .nav-links{
    position:fixed; top:64px; left:0; right:0;
    /* Bewusst KEIN inset-bottom und KEINE explizite Höhe (kein 100vh) mehr:
       das Menü soll nur so hoch sein wie sein Inhalt (die Nav-Punkte) und
       direkt darunter enden, statt den ganzen restlichen Bildschirm bis
       nach unten mit der Hintergrundfarbe abzudecken. */
    background:var(--cream);
    flex-direction:column;
    padding:var(--space-md);
    gap:var(--space-md);
    font-size:1.1rem;
    box-shadow:0 16px 24px -18px rgba(0,0,0,0.25);
    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; }
}

/* ==========================================================================
   Gutscheine (Startseiten-Teaser + eigene Seite gutscheine.html)
   ========================================================================== */

/* -------- Startseiten-Teaser: Mini-Gutschein im grid-2 statt Foto -------- */
.voucher-mini{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--cream-soft);
  display:grid;
  grid-template-columns:1fr 34%;
  box-shadow:0 26px 46px -26px rgba(27,27,24,0.35);
}
.voucher-mini::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid rgba(27,27,24,0.08);
  border-radius:var(--radius);
  pointer-events:none;
}
.voucher-mini .vm-main{
  padding:var(--space-md);
  display:flex; flex-direction:column; justify-content:space-between;
}
.voucher-mini .vm-kicker{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--fawn);
}
.voucher-mini h3{
  font-family:var(--font-display); font-weight:600; color:var(--pine); margin:0.4rem 0 0; font-size:1.4rem;
}
.voucher-mini .vm-lines{ display:flex; flex-direction:column; gap:0.5rem; }
.voucher-mini .vm-lines span{
  display:block; height:1px; background:var(--fog); position:relative;
}
.voucher-mini .vm-lines span:first-child{ width:70%; }
.voucher-mini .vm-lines span:last-child{ width:45%; }
.voucher-mini .vm-stub{
  background:var(--pine); color:var(--cream-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem;
  border-left:2px dashed rgba(239,233,220,0.35);
}
.voucher-mini .vm-stub svg{ width:34px; height:34px; opacity:0.85; }
.voucher-mini .vm-stub .vm-amount{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; }

/* -------- gutscheine.html: Intro -------- */
.voucher-intro{ max-width:60ch; }

/* -------- Konfigurator-Layout -------- */
.voucher-configurator{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-lg);
  align-items:start;
}
.voucher-configurator > *{ min-width:0; }
.amount-custom input{ min-width:0; }
.voucher-form .form-field{ margin-bottom:var(--space-sm); display:flex; flex-direction:column; gap:0.4rem; }
.voucher-form label{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--pine-70);
}
.voucher-form input, .voucher-form textarea{
  font-family:var(--font-body); font-size:1rem; padding:0.8rem 0.9rem;
  border:1px solid var(--fog); border-radius:var(--radius); background:var(--cream-soft); color:var(--ink);
}
.voucher-form input:focus, .voucher-form textarea:focus{ outline:none; border-color:var(--fawn); }
.amount-picker{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:var(--space-sm); }
.amount-btn{
  font-family:var(--font-mono); font-size:0.9rem;
  padding:0.65rem 1.2rem; border-radius:var(--radius);
  border:1px solid var(--pine); background:transparent; color:var(--pine); cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.amount-btn.active, .amount-btn:hover{ background:var(--pine); color:var(--cream-soft); }
.amount-custom{ display:flex; align-items:center; gap:0.5rem; }
.amount-custom input{ width:100px; }
.voucher-note{ font-size:0.85rem; color:var(--pine-70); margin-top:var(--space-sm); line-height:1.6; }

/* -------- Gutschein-Vorschau (Ticket-Stil, Variante A) -------- */
.voucher-preview-wrap{ position:sticky; top:calc(var(--space-md) + 70px); }
.voucher-card{
  background:var(--cream-soft); color:var(--ink);
  display:grid; grid-template-columns:1fr 30%;
  border-radius:6px; overflow:hidden;
  box-shadow:0 40px 70px -34px rgba(27,27,24,0.45);
  aspect-ratio:16/8;
}
.voucher-card .vc-main{ padding:var(--space-md); display:flex; flex-direction:column; justify-content:space-between; }
.voucher-card .vc-kicker{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--fawn);
}
.voucher-card h2{
  font-family:var(--font-display); font-weight:600; color:var(--pine); margin:0.35rem 0 0.5rem; font-size:1.9rem;
}
.voucher-card .vc-sub{ font-size:0.85rem; color:var(--pine-70); max-width:34ch; }
.voucher-card .vc-fields{ display:flex; gap:2rem; font-size:0.85rem; }
.voucher-card .vc-fields div{ border-bottom:1px solid var(--fog); padding-bottom:0.3rem; min-width:140px; color:var(--pine-70); }
.voucher-card .vc-fields b{
  display:block; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--fawn); margin-bottom:0.25rem;
}
.voucher-card .vc-stub{
  background:var(--pine); color:var(--cream-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.7rem;
  padding:var(--space-sm);
  border-left:2px dashed rgba(239,233,220,0.35);
  position:relative;
}
.voucher-card .vc-stub svg{ width:46px; height:46px; }
.voucher-card .vc-stub .vc-amount{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; }
.voucher-card .vc-stub .vc-code{ font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.06em; opacity:0.75; text-align:center; }

.voucher-actions{ margin-top:var(--space-md); display:flex; gap:var(--space-sm); align-items:center; flex-wrap:wrap; }

/* -------- Steps ("So funktioniert's") -------- */
.voucher-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md);
  margin-top:var(--space-lg);
}
.voucher-step .num{
  font-family:var(--font-mono); font-size:0.75rem; color:var(--fawn); display:block; margin-bottom:0.5rem;
}
.voucher-step h3{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 0.4rem; color:var(--pine); }
.voucher-step p{ font-size:0.92rem; color:var(--pine-70); margin:0; }

/* -------- Falt-Gutschein: eigenes Druck-Layout (A4 quer, 4 Felder) --------
   Auf dem Bildschirm unsichtbar, existiert nur fürs Drucken. Prinzip: nach dem
   Ausdruck einmal senkrecht und einmal waagerecht gefaltet ergibt sich eine
   kleine Klappkarte. Das Feld oben rechts (Cover/Logo) steht deshalb auf dem
   Kopf, damit es nach dem Falten richtig herum lesbar ist — gleiches Prinzip
   wie bei vielen "zu Hause ausdrucken"-Gutscheinen. */
.voucher-print{ display:none; }

@media print{
  @page{ size: A4 landscape; margin: 0; }
  body{ background:var(--cream-soft); }
  body *{ visibility:hidden; }
  .voucher-print, .voucher-print *{ visibility:visible; }
  .voucher-print{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    position:fixed; inset:0;
    width:297mm; height:210mm;
  }
  .voucher-print::before, .voucher-print::after{
    content:""; position:absolute; z-index:2;
    border-color:rgba(27,27,24,0.3);
  }
  .voucher-print::before{ /* senkrechte Falzlinie */
    left:50%; top:0; bottom:0; border-left:1px dashed rgba(27,27,24,0.3);
  }
  .voucher-print::after{ /* waagerechte Falzlinie */
    top:50%; left:0; right:0; border-top:1px dashed rgba(27,27,24,0.3);
  }
  .vp-quad{ padding:12mm 14mm; position:relative; overflow:hidden; }
  .vp-tl{ display:flex; flex-direction:column; justify-content:center; gap:4mm; background:var(--cream-soft); }
  .vp-amount{ font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:var(--pine); }
  .vp-tagline{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--fawn); margin:0; }
  .vp-desc{ font-size:0.82rem; color:var(--pine-70); max-width:42ch; margin:0; }

  .vp-tr{
    transform:rotate(180deg);
    background:var(--pine); color:var(--cream-soft);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3mm; text-align:center;
  }
  .vp-tr .vp-ring{ width:34px; height:34px; opacity:0.9; }
  .vp-tr .vp-kicker{ font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:#c9b28a; margin:0; }
  .vp-tr h2{ font-family:var(--font-display); font-weight:600; font-size:1.6rem; margin:0; color:var(--cream-soft); }

  .vp-bl{ display:flex; flex-direction:column; justify-content:center; gap:5mm; background:var(--cream-soft); }
  .vp-field{ border-bottom:1px solid var(--fog); padding-bottom:2mm; font-size:0.88rem; color:var(--pine-70); }
  .vp-field b{ display:block; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--fawn); margin-bottom:1mm; }
  .vp-field span{ color:var(--ink); }

  .vp-br{ display:flex; flex-direction:column; justify-content:center; gap:3mm; background:var(--cream-soft); }
  .vp-br h2{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin:0; color:var(--pine); }
  .vp-terms{ font-size:0.72rem; color:var(--pine-70); max-width:44ch; margin:0; line-height:1.5; }
  .vp-contact{ font-size:0.72rem; color:var(--fawn); margin:0; line-height:1.5; }
}

@media (max-width:900px){
  .voucher-configurator{ grid-template-columns:1fr; }
  .voucher-preview-wrap{ position:static; }
  .voucher-steps{ grid-template-columns:1fr; }
  .voucher-mini{ grid-template-columns:1fr; aspect-ratio:auto; }
  .voucher-mini .vm-stub{ border-left:none; border-top:2px dashed rgba(239,233,220,0.35); padding:var(--space-sm); }
  .voucher-card{ grid-template-columns:1fr; aspect-ratio:auto; }
  .voucher-card .vc-stub{ border-left:none; border-top:2px dashed rgba(239,233,220,0.35); }
  .voucher-card .vc-fields{ flex-direction:column; gap:0.7rem; }
  .voucher-card .vc-fields div{ min-width:0; }
}