@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --charcoal:#1d2023;
  --graphite:#2d3135;
  --steel:#666d72;
  --silver:#c9ced0;
  --line:#d9dcdd;
  --mist:#eef0ef;
  --paper:#f7f6f3;
  --white:#ffffff;
  --ink:#222528;
  --muted:#73787b;
  --accent:#c66d4c;
  --accent-dark:#9d5137;
  --accent-soft:#eadcd5;
  --sage:#8fa08d;
  --sage-dark:#61705f;
  --sand:#d3b77c;
  --dark-line:rgba(255,255,255,.16);
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --sans:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--charcoal)}
body{
  min-height:100vh;
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.58;
}
a{color:inherit}
img{display:block;width:100%;height:auto}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{
  font-family:var(--display);
  line-height:.93;
  letter-spacing:.015em;
  text-transform:uppercase;
}
h1{font-size:clamp(4rem,9vw,8.5rem)}
h2{font-size:clamp(2.5rem,5vw,5.2rem)}
h3{font-size:clamp(1.45rem,2.5vw,2.1rem)}

.kicker{
  margin-bottom:12px;
  color:var(--accent-dark);
  font-family:var(--display);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
}
.kicker-light{color:#e6c1b2}
.lead{font-size:1.08rem}
.muted{color:var(--muted)}

/* Header / Wortmarke */
.site-header{
  position:absolute;
  inset:0 0 auto;
  z-index:20;
  color:#fff;
}
.site-header.solid{
  position:sticky;
  background:rgba(29,32,35,.96);
  border-bottom:1px solid rgba(198,109,76,.24);
  backdrop-filter:blur(12px);
}
.nav-wrap{
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand{
  min-width:210px;
  display:inline-block;
  color:#fff;
  text-decoration:none;
}
.brand strong{
  display:block;
  font-family:var(--display);
  font-size:1.55rem;
  line-height:.88;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.brand small{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.67);
  font-family:var(--display);
  font-size:.67rem;
  line-height:1;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.brand-rule{
  display:grid;
  grid-template-columns:1.2fr .75fr .45fr;
  gap:3px;
  width:84px;
  height:4px;
  margin-top:10px;
}
.brand-rule i:nth-child(1){background:var(--accent)}
.brand-rule i:nth-child(2){background:var(--sage)}
.brand-rule i:nth-child(3){background:var(--sand)}

.nav{display:flex;align-items:center;gap:27px;flex-wrap:wrap}
.nav a{
  position:relative;
  padding:8px 0;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-family:var(--display);
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .2s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:2px;
  height:2px;
  background:var(--accent);
  transition:right .2s ease;
}
.nav a:hover,.nav a.active{color:#fff}
.nav a:hover::after,.nav a.active::after{right:0}
.nav .contact-link{
  padding:11px 16px;
  border:1px solid rgba(198,109,76,.58);
  border-radius:999px;
  background:rgba(198,109,76,.12);
  color:#fff;
}
.nav .contact-link::after{display:none}
.nav .contact-link:hover{background:var(--accent);color:#fff}

/* Buttons */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}
.btn{
  min-height:47px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 21px;
  border-radius:999px;
  text-decoration:none;
  font-family:var(--display);
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#d77a57}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.08)}
.btn-ghost:hover{border-color:var(--sage);background:rgba(143,160,141,.18)}
.btn-dark{background:var(--charcoal);color:#fff}
.btn-outline{border:1px solid var(--line);background:transparent}

/* Startseite */
.hero{
  min-height:800px;
  position:relative;
  display:grid;
  place-items:center;
  color:#fff;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--charcoal);
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:-2%;
  background:url("assets/galerie.jpg") center 58%/cover no-repeat;
  filter:grayscale(.42) saturate(.82) contrast(1.03);
  transform:scale(1.02);
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    radial-gradient(circle at 22% 62%,rgba(198,109,76,.22),transparent 34%),
    radial-gradient(circle at 80% 28%,rgba(143,160,141,.18),transparent 30%),
    radial-gradient(circle at 50% 48%,rgba(20,22,24,.06),rgba(20,22,24,.45) 58%,rgba(20,22,24,.84) 100%),
    linear-gradient(180deg,rgba(21,23,25,.48),rgba(21,23,25,.74));
  border-bottom:5px solid var(--accent);
}
.hero-inner{position:relative;z-index:2;padding-top:92px}
.hero-tag{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  margin-bottom:24px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  background:rgba(20,22,24,.25);
  font-family:var(--display);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.hero-tag i{width:7px;height:7px;border-radius:50%;background:var(--sage)}
.hero h1{
  max-width:1100px;
  margin:0 auto;
  font-size:clamp(4.8rem,11vw,10rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.hero h1 span,.hero h1 em{display:block;font-style:normal}
.hero h1 span{text-shadow:0 8px 36px rgba(0,0,0,.28)}
.hero h1 em{
  margin-top:.16em;
  color:#f1ded6;
  font-size:.38em;
  line-height:1.05;
  font-weight:600;
  letter-spacing:.22em;
}
.hero .lead{max-width:650px;margin:23px auto 0;color:rgba(255,255,255,.88)}
.hero .btn-row{justify-content:center}

.section{padding:92px 0}
.section-white{background:var(--paper)}
.section-light{background:var(--mist)}
.section-dark{position:relative;overflow:hidden;background:var(--charcoal);color:#fff}
.section-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(198,109,76,.08),transparent 40%),linear-gradient(300deg,rgba(143,160,141,.08),transparent 36%);
}
.section-mid{background:var(--graphite);color:#fff}

.history-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:78px;align-items:start;margin-bottom:54px}
.history-intro h2{margin-bottom:0}
.history-copy p{max-width:610px;color:var(--muted);font-size:1.03rem}
.history-copy p:last-child{margin-bottom:0}

.feature-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:18px}
.feature-card{
  position:relative;
  min-height:430px;
  overflow:hidden;
  border-radius:8px;
  text-decoration:none;
  color:#fff;
  background:var(--graphite);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 44px rgba(22,24,26,.08);
}
.feature-card:first-child{min-height:500px;background:linear-gradient(145deg,#3b3e40 0%,#292c2f 56%,#4b3229 140%)}
.feature-card.with-image img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.42) saturate(.78) brightness(.82) contrast(1.04);
  transition:transform .45s ease,filter .45s ease;
}
.feature-card.with-image:hover img{transform:scale(1.035);filter:grayscale(.12) saturate(.95) brightness(.86) contrast(1.03)}
.feature-card:nth-child(2)::after{background:linear-gradient(0deg,rgba(24,26,28,.94),rgba(198,109,76,.08) 70%)}
.feature-card:nth-child(3)::after{background:linear-gradient(0deg,rgba(24,26,28,.94),rgba(97,112,95,.12) 70%)}
.feature-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,21,23,.92),rgba(19,21,23,.10) 64%)}
.feature-card.text-card::before{
  content:"";
  position:absolute;
  width:240px;height:240px;
  right:-72px;top:-62px;
  border:1px solid rgba(198,109,76,.35);
  border-radius:50%;
  box-shadow:0 0 0 32px rgba(198,109,76,.06),0 0 0 64px rgba(143,160,141,.04);
}
.feature-card-copy{position:absolute;left:26px;right:26px;bottom:25px;z-index:2}
.feature-card-copy h3{margin-top:0}
.feature-no{display:none}
.feature-card h3{margin:0 0 8px;font-size:3rem;font-weight:800;letter-spacing:.035em}
.feature-card p{margin:0;color:rgba(255,255,255,.74);font-size:.84rem;font-weight:600}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:78px;align-items:start}
.hours{border-top:1px solid var(--dark-line)}
.hours-row{display:grid;grid-template-columns:1fr auto;gap:22px;padding:16px 0;border-bottom:1px solid var(--dark-line)}
.hours-row span{color:#bec3c5}
.hours-row strong{font-family:var(--display);font-size:1.05rem;font-weight:700;letter-spacing:.05em}

.cult-mark{
  position:absolute;
  right:5%;bottom:-48px;
  width:250px;height:250px;
  display:grid;place-items:center;
  border:1px solid rgba(198,109,76,.24);
  border-radius:50%;
  color:rgba(234,220,213,.10);
  font-family:var(--display);
  font-size:2.5rem;
  line-height:.82;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  transform:rotate(-8deg);
}

.reserve-strip{background:linear-gradient(100deg,var(--accent-soft),#d9dfd8 72%,#d1c3a5);color:var(--charcoal)}
.reserve-strip .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.reserve-strip h2{margin-bottom:0;font-size:clamp(2.5rem,5vw,4.7rem);font-weight:800}
.reserve-strip .btn{background:var(--charcoal);color:#fff}
.reserve-strip .btn:hover{background:var(--accent-dark)}

/* Unterseiten */
.page-hero{
  min-height:430px;
  display:flex;
  align-items:flex-end;
  position:relative;
  isolation:isolate;
  color:#fff;
  overflow:hidden;
  background:var(--charcoal);
  border-bottom:4px solid var(--accent);
}
.page-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:
    linear-gradient(115deg,transparent 0 68%,rgba(255,255,255,.035) 68% 69%,transparent 69% 100%),
    linear-gradient(25deg,transparent 0 54%,rgba(255,255,255,.025) 54% 55%,transparent 55% 100%),
    var(--graphite);
}
.page-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,rgba(21,23,25,.97),rgba(21,23,25,.50)),radial-gradient(circle at 82% 35%,rgba(143,160,141,.18),transparent 30%);
}
.page-hero-getraenke::before{background:url("assets/getraenke.jpg") center 56%/cover no-repeat;filter:grayscale(.38) saturate(.82) contrast(1.04)}
.page-hero-galerie::before,.page-hero-kontakt::before{background:url("assets/galerie.jpg") center 55%/cover no-repeat;filter:grayscale(.38) saturate(.82) contrast(1.02)}
.page-hero .container{position:relative;z-index:2;padding:145px 0 59px}
.page-hero h1{margin-bottom:10px;font-size:clamp(4rem,7.5vw,7rem);font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.page-hero p{max-width:540px;color:#e2e4e4;margin-bottom:0}

.menu-section{padding:82px 0 96px;background:var(--paper)}
.menu-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;margin-bottom:60px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.menu-intro h2{margin-bottom:0;font-size:clamp(2.4rem,4.4vw,4.4rem);font-weight:800}
.menu-intro p{max-width:640px;margin-bottom:0;color:var(--muted)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 36px}
.menu-showcase{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;margin:0 0 52px;padding:18px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,rgba(234,220,213,.55),rgba(255,255,255,.88))}
.menu-showcase-media img{height:100%;min-height:320px;object-fit:cover;border-radius:8px;box-shadow:0 16px 40px rgba(22,24,26,.12)}
.menu-showcase-copy{padding:10px 8px}
.menu-showcase-copy h2{margin-bottom:14px;font-size:clamp(2.4rem,4vw,4rem)}
.menu-showcase-copy p:last-child{margin-bottom:0;color:var(--muted)}
.menu-card{background:transparent;border:0;border-top:3px solid var(--accent);border-radius:0;padding:20px 0 0}
.menu-card:nth-child(even){border-top-color:var(--sage)}
.menu-card h3{display:flex;align-items:baseline;gap:13px;margin:0 0 24px;color:var(--charcoal);font-size:2.15rem;font-weight:800;letter-spacing:.035em}
.menu-card h3 small{font-family:var(--display);font-size:.72rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.menu-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:15px 0 16px;border-top:1px solid var(--line)}
.menu-item:first-of-type{border-top:0}
.menu-item strong{display:block;font-size:.98rem;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.menu-item small{display:block;margin-top:5px;color:var(--muted);font-size:.77rem;line-height:1.4}
.menu-item b{align-self:start;color:var(--accent-dark);white-space:nowrap;font-family:var(--display);font-size:1rem;font-weight:800;letter-spacing:.03em}
.notice{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);color:#73777a;font-size:.78rem}

/* Galerie */
.gallery-grid{display:grid;grid-template-columns:1.35fr .85fr .85fr;grid-auto-rows:250px;gap:14px}
.gallery-item{position:relative;overflow:hidden;border-radius:8px;background:var(--graphite);color:#fff}
.gallery-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) saturate(.82) contrast(1.02);transition:transform .4s ease,filter .4s ease}
.gallery-item:hover img{transform:scale(1.025);filter:grayscale(.06) saturate(1)}
.gallery-item:first-child{grid-row:span 2}
.gallery-item:nth-child(4){grid-column:span 2}
.gallery-link{display:block;cursor:zoom-in;box-shadow:0 16px 34px rgba(22,24,26,.08)}
.gallery-link::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(19,21,23,.14),rgba(19,21,23,.02) 58%);opacity:.45;transition:opacity .25s ease}
.gallery-link:hover::before{opacity:.15}
.gallery-link::after{content:"+";position:absolute;right:18px;top:18px;z-index:2;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--charcoal);font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1;box-shadow:0 10px 24px rgba(0,0,0,.16)}
.gallery-quote{display:flex;align-items:flex-end;padding:24px;background:linear-gradient(145deg,var(--charcoal),#3b2923)}
.gallery-quote::before{display:none}
.gallery-quote blockquote{position:relative;z-index:2;margin:0;font-family:var(--display);font-size:clamp(1.8rem,2.8vw,2.7rem);font-weight:700;line-height:.98;letter-spacing:.025em;text-transform:uppercase}
.gallery-quote blockquote span{display:block;margin-top:18px;color:#e7b29d;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase}

.lightbox{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:28px;background:rgba(12,13,15,.88);backdrop-filter:blur(6px)}
.lightbox.is-open{display:grid}
.lightbox-image{max-width:min(1100px,calc(100vw - 48px));max-height:calc(100vh - 72px);width:auto;height:auto;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.38)}
.lightbox-close{position:absolute;top:20px;right:20px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--charcoal);font-size:2rem;line-height:1;cursor:pointer}
body.lightbox-open{overflow:hidden}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px}
.contact-card{background:transparent;border:0;border-top:3px solid var(--sage);border-radius:0;padding:22px 0 0}
.contact-card h3{margin-bottom:20px}
.contact-card a{text-decoration:none;font-weight:800;color:var(--charcoal)}
.contact-card a:hover{color:var(--accent-dark)}
.contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.contact-meta p{margin:0;color:var(--muted)}
.contact-meta strong{display:block;margin-bottom:4px;color:var(--ink)}

/* Footer */
.footer{background:#141719;color:#bcc1c3;padding:29px 0;border-top:3px solid var(--accent)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.76rem}
.footer-left{display:flex;gap:18px;flex-wrap:wrap}
.footer a{text-decoration:none;color:inherit}
.footer a:hover{color:#fff}

@media(max-width:980px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .menu-showcase{grid-template-columns:1fr}
  .feature-card:first-child{grid-column:span 2}
  .menu-grid{grid-template-columns:1fr 1fr}
  .menu-card:last-child{grid-column:span 2}
}

@media(max-width:780px){
  .split,.contact-grid,.history-intro,.menu-intro{grid-template-columns:1fr;gap:34px}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-item:first-child{grid-row:auto}
  .gallery-item:nth-child(4){grid-column:auto}
  .contact-meta{grid-template-columns:1fr}
}

@media(max-width:680px){
  .container{width:min(100% - 28px,1180px)}
  .site-header.solid{position:static}
  .nav-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0 13px}
  .brand{min-width:0}
  .brand strong{font-size:1.4rem;letter-spacing:.15em}
  .brand small{margin-top:5px;font-size:.6rem;letter-spacing:.14em}
  .brand-rule{width:66px;height:3px;margin-top:8px}
  .nav{width:100%;display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:0;margin-top:0}
  .nav a,.nav .contact-link{padding:7px 0;background:transparent;border:0;border-radius:0;font-size:.68rem;letter-spacing:.07em}
  .nav .contact-link::after{display:block}
  .hero{min-height:690px;place-items:center}
  .hero::before{inset:0;background-position:55% 50%;background-size:cover}
  .hero-inner{width:100%;padding:176px 0 58px}
  .hero-tag{margin-bottom:18px;padding:6px 10px;font-size:.62rem;letter-spacing:.10em}
  .hero h1{font-size:1rem;line-height:1}
  .hero h1 span{display:block;font-size:clamp(4rem,21vw,5.35rem);line-height:.86;white-space:nowrap;letter-spacing:.03em}
  .hero h1 em{display:block;margin-top:.9rem;font-size:clamp(1.45rem,7.2vw,1.9rem);letter-spacing:.16em;white-space:nowrap}
  .hero .lead{max-width:316px;margin-top:22px;font-size:.94rem;line-height:1.55}
  .hero .btn-row{gap:9px;margin-top:24px}
  .hero .btn{min-height:43px;padding:0 15px;font-size:.75rem;letter-spacing:.08em}
  .section{padding:68px 0}
  .feature-grid{grid-template-columns:1fr}
  .feature-card,.feature-card:first-child{grid-column:auto;min-height:390px}
  .reserve-strip .container{display:flex;flex-direction:column;align-items:center;text-align:center}
  .reserve-strip .btn{margin-top:0}
  .menu-section{padding:64px 0 76px}
  .menu-grid{grid-template-columns:1fr;gap:46px}
  .menu-showcase-media img{min-height:260px}
  .menu-card:last-child{grid-column:auto}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:290px}
  .cult-mark{display:none}
}

@media(max-width:390px){
  .container{width:calc(100% - 24px)}
  .nav a,.nav .contact-link{font-size:.64rem;letter-spacing:.05em}
  .hero-inner{padding-top:170px}
  .hero h1 span{font-size:clamp(3.65rem,20vw,4.8rem)}
  .hero h1 em{font-size:clamp(1.3rem,7vw,1.65rem);letter-spacing:.13em}
  .hero .lead{max-width:292px;font-size:.9rem}
  .hero .btn{padding:0 13px;font-size:.72rem}
}

/* Sanfte Seitenwechsel */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:360ms;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
::view-transition-old(root){animation:page-leave 180ms ease-in both}
::view-transition-new(root){animation:page-enter 360ms cubic-bezier(.22,.8,.25,1) both}
@keyframes page-leave{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.992)}}
@keyframes page-enter{from{opacity:0;transform:translateY(10px) scale(1.004)}to{opacity:1;transform:translateY(0) scale(1)}}
.page-hero .container,.hero-inner{animation:content-arrive 520ms cubic-bezier(.22,.8,.25,1) 40ms both}
@keyframes content-arrive{from{opacity:.78;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation-duration:1ms!important}
  .page-hero .container,.hero-inner{animation:none}
}