@charset "UTF-8";
/* =========================================================
   MANSTEIN — Café · Bistro · Bar
   Classic, clean editorial bistro site · cream + bottle green
   ========================================================= */

:root{
  /* Surfaces */
  --cream:      #f4eee1;   /* page background          */
  --cream-2:    #fbf7ee;   /* raised cards / paper     */
  --paper:      #ece3d1;   /* alt sections             */
  /* Greens */
  --green:      #1e3a2d;   /* primary deep green       */
  --green-2:    #14271e;   /* darkest — hero / footer  */
  --green-3:    #335043;   /* hover / secondary        */
  --sage:       #c6d0c2;   /* muted text on dark       */
  /* Accent */
  --brass:      #b08d57;   /* antique brass            */
  --brass-2:    #c7a673;   /* lighter brass            */
  /* Ink */
  --ink:        #21302a;   /* body text on cream       */
  --ink-soft:   #4d5a52;   /* muted body on cream      */
  /* Lines */
  --line:       rgba(30,58,45,.16);
  --line-2:     rgba(30,58,45,.28);
  --line-dark:  rgba(244,238,225,.16);
  --line-brass: rgba(176,141,87,.45);

  --shadow:     0 24px 60px -28px rgba(20,39,30,.45);
  --shadow-sm:  0 10px 30px -18px rgba(20,39,30,.5);

  --container:  1200px;
  --radius:     4px;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------- Reset ----------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,p,ul,figure,blockquote{ margin:0; }
ul{ list-style:none; padding:0; }
section{ scroll-margin-top:84px; }

/* ----------------------------- Helpers --------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; left:1rem; top:-100%; z-index:200;
  background:var(--green); color:var(--cream); padding:.7rem 1.1rem;
  border-radius:var(--radius); font-size:.9rem; transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

.ic{ width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.18em; }

/* Section rhythm */
.section{ padding-block:clamp(4.5rem,9vw,8.5rem); position:relative; }

/* Eyebrow — classic small-caps label with flanking rule */
.eyebrow{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--font-body); font-size:.76rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--brass);
  margin-bottom:1.2rem;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; opacity:.55; }
.eyebrow-on-dark{ color:var(--brass-2); }
.section-head.center .eyebrow::after{ content:""; width:30px; height:1px; background:currentColor; opacity:.55; }

/* Display headings */
.h-display{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.3rem,5.2vw,4rem); line-height:1.04;
  letter-spacing:-.01em; color:var(--green); margin-bottom:1.2rem;
}
.h-display.light{ color:var(--cream); }

.lead{ font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--ink-soft); line-height:1.7; }
.lead.light{ color:var(--sage); }
.section p{ max-width:60ch; }

.section-head{ max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center p{ margin-inline:auto; }

/* ----------------------------- Buttons --------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:500; font-size:.93rem;
  letter-spacing:.02em; padding:.92em 1.7em; border-radius:var(--radius);
  border:1px solid transparent; transition:all .25s var(--ease);
  cursor:pointer; white-space:nowrap;
}
.btn-sm{ padding:.62em 1.2em; font-size:.85rem; }
.btn-block{ width:100%; }

.btn-primary{ background:var(--green); color:var(--cream); border-color:var(--green); }
.btn-primary:hover{ background:var(--green-3); border-color:var(--green-3); transform:translateY(-2px); }

.btn-outline{ background:transparent; color:var(--green); border-color:var(--line-2); }
.btn-outline:hover{ border-color:var(--brass); color:var(--green); background:rgba(176,141,87,.1); }

.btn-ghost{ background:transparent; color:currentColor; border-color:currentColor; }
.btn-ghost:hover{ background:currentColor; }
.btn-ghost:hover{ color:var(--green); }

.btn-primary-light{ background:var(--cream); color:var(--green); border-color:var(--cream); }
.btn-primary-light:hover{ background:var(--brass-2); border-color:var(--brass-2); color:var(--green-2); transform:translateY(-2px); }

.btn-outline-light{ background:transparent; color:var(--cream); border-color:var(--line-dark); }
.btn-outline-light:hover{ border-color:var(--brass-2); color:var(--brass-2); }

/* ----------------------------- Brand lockup ---------------------- */
/* Real logo artwork as plain <img> (max compatibility). Two pre-coloured
   versions swap per header state: cream over the dark hero, green on the
   cream scrolled bar. */
.brand{ display:inline-flex; align-items:center; line-height:1; }
.brand-logo{ display:block; height:46px; width:auto; }
.brand-logo-dark{ display:none; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header-inner{
  max-width:var(--container); margin-inline:auto;
  padding:.9rem clamp(1.25rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.nav-desktop{ display:flex; gap:2rem; }
.nav-desktop a{
  font-size:.92rem; font-weight:500; letter-spacing:.01em; color:var(--cream);
  position:relative; padding:.3rem 0; transition:color .25s var(--ease);
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--brass-2);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-desktop a:hover::after,.nav-desktop a.active::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:1rem; }

/* Header — top of page (over dark hero): cream logo shown by default */
.site-header[data-state="top"] .nav-desktop a{ color:var(--cream); }
.site-header[data-state="top"] .header-cta{ color:var(--cream); border-color:var(--line-dark); }
.site-header[data-state="top"] .header-cta:hover{ background:var(--cream); color:var(--green); border-color:var(--cream); }
.site-header[data-state="top"] .nav-toggle-bar{ background:var(--cream); }

/* Header — scrolled (cream bar) */
.site-header[data-state="scrolled"]{
  background:rgba(244,238,225,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  border-bottom-color:var(--line);
}
.site-header[data-state="scrolled"] .brand-logo-light{ display:none; }
.site-header[data-state="scrolled"] .brand-logo-dark{ display:block; }
.site-header[data-state="scrolled"] .nav-desktop a{ color:var(--green); }
.site-header[data-state="scrolled"] .header-cta{ color:var(--green); border-color:var(--line-2); }
.site-header[data-state="scrolled"] .header-cta:hover{ background:var(--green); color:var(--cream); border-color:var(--green); }
.site-header[data-state="scrolled"] .nav-toggle-bar{ background:var(--green); }

/* Header — menu open (cohesive cream bar regardless of scroll state) */
.site-header.menu-open{
  background:rgba(244,238,225,.98);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom-color:transparent;
}
.site-header.menu-open .brand-logo-light{ display:none; }
.site-header.menu-open .brand-logo-dark{ display:block; }

/* Toggle */
.nav-toggle{
  display:none; width:42px; height:42px; border:0; background:transparent;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle-bar{ width:24px; height:2px; background:var(--cream); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.site-header.menu-open .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.menu-open .nav-toggle-bar:nth-child(2){ opacity:0; }
.site-header.menu-open .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.site-header.menu-open .nav-toggle-bar{ background:var(--green)!important; }

/* Mobile nav panel */
.nav-mobile[hidden]{ display:none; }
.nav-mobile{
  display:flex; flex-direction:column; gap:.25rem;
  padding:1rem clamp(1.25rem,4vw,2.5rem) 1.75rem;
  background:rgba(244,238,225,.98);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-mobile a:not(.btn){ font-size:1.05rem; color:var(--green); padding:.75rem .25rem; border-bottom:1px solid var(--line); font-weight:500; }
.nav-mobile a:not(.btn):last-of-type{ border:0; }
.nav-mobile .btn{ margin-top:1rem; color:var(--cream); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:7rem 1.25rem 5rem; overflow:hidden;
  background:var(--green-2);
}
.hero-bg{
  position:absolute; inset:0;
  background:url("2026_manstein03.webp") center/cover no-repeat;
  transform:scale(1.06); opacity:.5;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(20,39,30,.35), transparent 55%),
    linear-gradient(180deg, rgba(20,39,30,.78) 0%, rgba(20,39,30,.6) 42%, rgba(20,39,30,.9) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:1100px; width:100%; display:flex; flex-direction:column; align-items:center; }

.hero-eyebrow{
  font-family:var(--font-body); font-size:.78rem; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase; color:var(--brass-2);
  margin-bottom:1.6rem; padding-left:.42em;
}

/* Hero brand lockup — full logo artwork (cream, on dark hero) */
.hero-logo{
  display:block; width:min(430px,80vw); height:auto;
  filter:drop-shadow(0 20px 45px rgba(0,0,0,.4));
}

.hero-lead{
  color:var(--sage); font-size:clamp(1rem,1.6vw,1.18rem);
  max-width:46ch; margin:1.8rem auto 0; line-height:1.65;
}

.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.85rem;
  margin-top:2rem; font-family:var(--font-body); font-size:.74rem; font-weight:500;
  letter-spacing:.14em; color:var(--sage); text-transform:uppercase;
}
.hero-meta .ic{ color:var(--brass-2); margin-right:.4em; }
.hero-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--brass); opacity:.7; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2.4rem; }

.hero-scroll{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  font-family:var(--font-body); font-size:.66rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--sage); opacity:.85;
}
.hero-scroll svg{ width:20px; height:20px; fill:none; stroke:var(--brass-2); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; animation:bob 2.2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* =========================================================
   WILLKOMMEN
   ========================================================= */
.section-welcome{ background:var(--cream); }
.welcome-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,6rem); align-items:center; }
.welcome-copy .lead{ margin-bottom:1.4rem; color:var(--green); }
.welcome-copy p{ margin-bottom:1.2rem; }

.welcome-points{
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1.5rem;
  margin:1.8rem 0; padding-top:1.6rem; border-top:1px solid var(--line);
}
.welcome-points li{ display:flex; align-items:center; gap:.7rem; font-size:.96rem; color:var(--green); }
.bullet{ width:7px; height:7px; flex:0 0 auto; background:var(--brass); transform:rotate(45deg); }

.signature{
  font-family:var(--font-display); font-style:italic; font-size:1.55rem;
  color:var(--green); margin-top:.5rem;
}
.signature span{ font-family:var(--font-body); font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-left:.4rem; }

.welcome-figure{ position:relative; }
.welcome-figure .frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); outline:1px solid var(--line);
}
.welcome-figure .frame::after{
  content:""; position:absolute; inset:10px; border:1px solid rgba(244,238,225,.35); pointer-events:none;
}
.welcome-figure img{ width:100%; aspect-ratio:3/3.4; object-fit:cover; }
.welcome-figure figcaption{
  position:absolute; left:-10px; bottom:18px; background:var(--cream);
  padding:.5rem .95rem; box-shadow:var(--shadow-sm); border-left:2px solid var(--brass);
  font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--green);
}

/* =========================================================
   KÜCHE
   ========================================================= */
.section-kitchen{ background:var(--green); color:var(--cream); }
.kitchen-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.kitchen-card{
  background:rgba(244,238,225,.045); border:1px solid var(--line-dark);
  border-radius:var(--radius); padding:2rem 1.6rem 1.8rem;
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.kitchen-card:hover{ transform:translateY(-5px); border-color:var(--line-brass); background:rgba(244,238,225,.07); }
.kc-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line-brass);
  margin-bottom:1.3rem;
}
.kc-icon svg{ width:26px; height:26px; fill:none; stroke:var(--brass-2); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.kitchen-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; margin-bottom:.6rem; color:var(--cream); }
.kitchen-card p{ font-size:.95rem; color:var(--sage); line-height:1.62; }

.kitchen-strip{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:0; margin-top:clamp(3rem,6vw,5rem); height:clamp(180px,26vw,320px); }
.strip-img{ background-size:cover; background-position:center; filter:saturate(.95); position:relative; }
.strip-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(20,39,30,.35)); }
.strip-img + .strip-img{ border-left:2px solid var(--green); }

/* =========================================================
   KARTE
   ========================================================= */
.section-menu{ background:var(--cream); }
.menu-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:start; }

.menu-aside{ position:sticky; top:100px; }
.menu-aside p{ color:var(--ink-soft); margin-bottom:1.6rem; }
.menu-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:1.4rem; outline:1px solid var(--line); }
.menu-photo img{ width:100%; aspect-ratio:4/3.1; object-fit:cover; }

.menu-cols{ columns:2; column-gap:3rem; }
.menu-block{ break-inside:avoid; margin-bottom:2.2rem; display:inline-block; width:100%; }
.menu-cat{
  font-family:var(--font-body); font-size:.74rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
  padding-bottom:.7rem; margin-bottom:.9rem; border-bottom:1px solid var(--line-brass);
}
.menu-list{ display:flex; flex-direction:column; gap:.7rem; }
.m-row{ display:flex; align-items:baseline; gap:.6rem; }
.m-name{ font-family:var(--font-display); font-size:1.26rem; font-weight:500; color:var(--green); line-height:1.25; }
.m-name em{ display:block; font-family:var(--font-body); font-style:normal; font-size:.76rem; letter-spacing:.02em; color:var(--ink-soft); margin-top:.05rem; }
.m-dots{ flex:1 1 auto; border-bottom:1px dotted var(--line-2); transform:translateY(-.28em); min-width:14px; }
.m-price{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; color:var(--green); white-space:nowrap; font-variant-numeric:tabular-nums; }
.m-price::after{ content:" €"; color:var(--brass); }

.menu-foot{
  margin-top:1rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--font-body); font-size:.78rem; font-weight:500; letter-spacing:.06em;
  color:var(--ink-soft); text-transform:uppercase; max-width:none;
}

/* =========================================================
   GALERIE
   ========================================================= */
.section-gallery{ background:var(--paper); }
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:1rem;
}
.g-item{
  padding:0; border:0; background:none; overflow:hidden; border-radius:var(--radius);
  position:relative; cursor:pointer; outline:1px solid var(--line);
}
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.g-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(20,39,30,.4));
  opacity:0; transition:opacity .4s var(--ease);
}
.g-item:hover img{ transform:scale(1.06); }
.g-item:hover::after{ opacity:1; }
.g-item:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.g-tall{ grid-row:span 2; }
.g-wide{ grid-column:span 2; }

/* =========================================================
   BESUCH
   ========================================================= */
.section-visit{ background:var(--green-2); color:var(--cream); }
.visit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:stretch; }
.visit-copy .lead{ margin-bottom:2.2rem; }

.visit-details{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem 1.5rem; margin-bottom:2rem; }
.vd-item{ display:flex; gap:.95rem; align-items:flex-start; }
.vd-icon{ flex:0 0 auto; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-brass); border-radius:50%; }
.vd-icon svg{ width:20px; height:20px; fill:none; stroke:var(--brass-2); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.vd-label{ font-family:var(--font-body); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-2); margin-bottom:.3rem; }
.vd-value{ color:var(--cream); font-size:1rem; line-height:1.5; }
.vd-value a:hover{ color:var(--brass-2); text-decoration:underline; text-underline-offset:3px; }

.visit-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.2rem; padding-top:1.8rem; border-top:1px solid var(--line-dark); }
.visit-tags li{
  font-family:var(--font-body); font-size:.74rem; font-weight:500; letter-spacing:.06em;
  padding:.45rem .9rem; border:1px solid var(--line-dark); border-radius:999px; color:var(--sage);
}
.visit-actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.visit-map{ border-radius:var(--radius); overflow:hidden; min-height:420px; box-shadow:var(--shadow); border:1px solid var(--line-dark); }
.visit-map iframe{ width:100%; height:100%; min-height:420px; border:0; filter:grayscale(.3) contrast(1.05); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--green); color:var(--sage); padding-top:clamp(3.5rem,6vw,5rem); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--line-dark); }
.footer-logo{
  display:block; width:188px; height:auto;
  margin:-.5rem 0 1.2rem -.4rem;
}
.footer-note{ font-size:.92rem; color:var(--sage); max-width:34ch; line-height:1.6; }
.footer-h{ font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); margin-bottom:1.1rem; }
.footer-col p{ font-size:.95rem; margin-bottom:.5rem; color:var(--sage); }
.footer-col a:hover{ color:var(--brass-2); }
.footer-nav{ display:flex; flex-direction:column; gap:.5rem; }
.footer-nav a{ font-size:.95rem; transition:color .2s var(--ease); }
.footer-nav a:hover{ color:var(--brass-2); }

.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding-block:1.6rem; }
.footer-bottom p{ font-family:var(--font-body); font-size:.74rem; letter-spacing:.04em; color:var(--sage); opacity:.85; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); }
.lightbox[hidden]{ display:none; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(20,39,30,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fade .3s var(--ease); }
.lightbox-figure{ position:relative; z-index:2; max-width:min(1100px,94vw); max-height:90vh; display:flex; flex-direction:column; align-items:center; animation:pop .35s var(--ease); }
.lightbox-figure img{ max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.5); }
#lightbox-caption{ margin-top:1rem; font-family:var(--font-body); font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--sage); text-align:center; }
.lightbox-close{
  position:absolute; top:-3rem; right:-.25rem; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-dark); background:rgba(244,238,225,.06); color:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; transition:all .25s var(--ease);
}
.lightbox-close:hover{ background:var(--cream); color:var(--green); }
.lightbox-close svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
@keyframes fade{ from{opacity:0;} }
@keyframes pop{ from{opacity:0; transform:scale(.97);} }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .kitchen-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .nav-desktop, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .welcome-grid, .menu-grid, .visit-grid{ grid-template-columns:1fr; }
  .welcome-figure{ order:-1; max-width:520px; }
  .menu-aside{ position:static; }
  .visit-map{ min-height:340px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .section{ padding-block:clamp(3.5rem,12vw,5rem); }
  .hero-logo{ width:min(240px,58vw); }
  .menu-cols{ columns:1; }
  .welcome-points{ grid-template-columns:1fr; }
  .visit-details{ grid-template-columns:1fr; }
  .kitchen-grid{ grid-template-columns:1fr; }
  .kitchen-card{ padding:1.7rem 1.4rem 1.6rem; }
  .kitchen-strip{ grid-template-columns:1fr; height:auto; margin-top:2.5rem; }
  .strip-img{ height:190px; }
  .strip-img + .strip-img{ border-left:0; border-top:2px solid var(--green); }
  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:unset; gap:.85rem; }
  .g-item{ aspect-ratio:4/3.1; }
  .g-tall, .g-wide{ grid-column:auto; grid-row:auto; }
  .hero-meta{ flex-direction:column; gap:.5rem; }
  .hero-meta .dot{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .hero-actions .btn, .visit-actions .btn{ flex:1 1 auto; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-bg{ transform:none; }
}

/* =========================================================
   COOKIE BANNER
   ========================================================= */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:9000;
  background:var(--green-2);
  border-top:1px solid rgba(244,238,225,.12);
  padding:1.1rem 1.5rem;
  transform:translateY(100%);
  transition:transform .45s var(--ease);
}
.cookie-banner.visible{ transform:translateY(0); }
.cookie-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; gap:1.5rem 2.5rem; flex-wrap:wrap;
}
.cookie-text{
  flex:1; font-size:.82rem; line-height:1.6;
  color:var(--sage); min-width:260px;
}
.cookie-text strong{ color:var(--cream); font-weight:500; }
.cookie-text a{ color:var(--brass-2); text-decoration:underline; text-underline-offset:3px; }
.cookie-text a:hover{ color:var(--cream); }
.cookie-actions{ display:flex; gap:.75rem; flex-shrink:0; }

/* Map consent placeholder */
.map-placeholder{
  display:flex; align-items:center; justify-content:center;
  height:100%; min-height:320px;
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  text-align:center; padding:2rem;
}
.map-placeholder p{ font-size:.9rem; color:var(--ink-soft); }
.map-placeholder a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.map-placeholder a:hover{ color:var(--brass); }

/* =========================================================
   LEGAL PAGES  (impressum.html / datenschutz.html)
   ========================================================= */
.legal-hero{
  background:var(--green-2);
  padding:clamp(6rem,14vw,9rem) 0 clamp(3rem,6vw,5rem);
  text-align:center;
}
.legal-hero .eyebrow{ color:var(--brass-2); justify-content:center; margin-bottom:1rem; }
.legal-hero h1{
  font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,3.8rem);
  color:var(--cream); font-weight:500; letter-spacing:-.01em;
}

.legal-body{
  padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,9vw,7rem);
}
.legal-article{
  max-width:740px; margin:0 auto;
  font-size:1rem; line-height:1.8; color:var(--ink);
}
.legal-article h2{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.8vw,1.8rem);
  font-weight:500; color:var(--green-2);
  margin-top:3rem; margin-bottom:.6rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--line-2);
}
.legal-article h3{
  font-family:var(--font-display); font-size:1.15rem;
  font-weight:500; color:var(--green-2);
  margin-top:1.8rem; margin-bottom:.3rem;
}
.legal-article p{ margin-bottom:1rem; color:var(--ink-soft); }
.legal-article p strong{ color:var(--ink); font-weight:500; }
.legal-article a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.legal-article a:hover{ color:var(--brass); }
.legal-article address{ font-style:normal; line-height:1.9; color:var(--ink-soft); }
.legal-article ul{ padding-left:1.4rem; margin-bottom:1rem; }
.legal-article li{ color:var(--ink-soft); margin-bottom:.3rem; }
.legal-back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); text-decoration:none;
  margin-bottom:3rem;
  transition:color .25s;
}
.legal-back:hover{ color:var(--green); }
.legal-back svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.legal-hero .eyebrow::after{ content:""; width:30px; height:1px; background:currentColor; opacity:.55; }

/* Key/value data block (company details) */
.legal-dl{ display:grid; grid-template-columns:max-content 1fr; gap:.5rem 1.6rem; margin:1rem 0 1.5rem; }
.legal-dl dt{ font-weight:600; color:var(--ink); }
.legal-dl dd{ margin:0; color:var(--ink-soft); }
@media (max-width:560px){ .legal-dl{ grid-template-columns:1fr; gap:.15rem 0; } .legal-dl dd{ margin-bottom:.7rem; } }

/* Disclaimer / note box */
.legal-note{
  background:var(--cream-2); border:1px solid var(--line);
  border-left:3px solid var(--brass);
  border-radius:var(--radius); padding:1.1rem 1.3rem; margin:0 0 2.4rem;
  font-size:.92rem; line-height:1.7; color:var(--ink-soft);
}
.legal-note strong{ color:var(--green); }

/* Recognisable placeholder for information still to be supplied */
.gap{
  display:inline; padding:.05em .45em; border-radius:3px;
  background:rgba(176,141,87,.16); border-bottom:1px dashed var(--brass);
  color:#7a5a25; font-style:italic; font-size:.95em;
}
.gap::before{ content:"⚑ "; font-style:normal; }

/* Footer legal links */
.footer-legal{
  display:flex; gap:.75rem; align-items:center;
  font-size:.8rem; color:var(--sage);
  margin-top:.4rem;
}
.footer-legal a{ color:var(--sage); transition:color .2s; }
.footer-legal a:hover{ color:var(--brass-2); }
.footer-legal span{ color:var(--sage); opacity:.5; }