/* ====== Grundlayout ====== */
:root{
  --bg:#0A0A0A;
  --bg-soft:#121212;
  --fg:#EDEDED;
  --muted:#A8A8A8;
  --gold:#C9A227;
  --gold-strong:#e2bf2e;
  --stroke:#1E1E1E;
  --card:#0F0F0F;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  line-height:1.6;
}

/* Container */
.container{
  width:100%;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:24px;
}

/* ====== Header / Nav ====== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* oder 100% */
  z-index: 1000;
  background-color: #000000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header-inner{
  height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.brand{ display:flex; align-items:center; gap:10px; letter-spacing:.5px; font-weight:600 }
.brand.small{ opacity:.85; }
.brand-mark{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(145deg, #1b1b1b, #0c0c0c);
  border:1px solid var(--stroke);
  color:var(--white);
  font-family:"Playfair Display", serif; font-weight:700; font-size:20px;
  box-shadow: inset 0 0 12px rgba(201,162,39,.15);
}
.brand-name{
  font-family:"Playfair Display", serif;
  font-size:22px;
}

/* Desktop Nav */
.nav-desktop{ display:none; gap:24px; align-items:center }
.nav-desktop a{ color:var(--fg); text-decoration:none; opacity:.85; transition:.2s }
.nav-desktop a:hover{ opacity:1; color:#fff }
@media (min-width: 900px){
  .nav-desktop{ display:flex }
}

/* Burger */
.burger{
  --w:24px;
  display:grid; gap:5px;
  width:44px; height:44px; border:1px solid var(--stroke);
  border-radius:10px; background:#000000; cursor:pointer;
  justify-content:center; align-content:center;
}
.burger span{
  width:var(--w); height:2px; background:#ffffff; display:block; transition:.3s;
}
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2){ opacity:0 }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
@media (min-width: 900px){ .burger{ display:none } }

/* Mobile Nav */
.nav-mobile{
  position:fixed; inset:72px 0 auto auto; right:-100%;
  width:min(320px, 86vw); height:calc(100dvh - 72px);
  background:var(--bg-soft); border-left:1px solid var(--stroke);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; padding:18px;
  transition:right .35s ease;
}
.nav-mobile.open{ right:0 }
.nav-mobile a{
  color:#fff; text-decoration:none; padding:14px 10px; border-radius:10px;
  border:1px solid transparent; opacity:.95; transition:.2s; font-weight:500;
}
.nav-mobile a:hover{ background:#151515; border-color:#1e1e1e }

/* Buttons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:600;
  transition:.25s; border:1px solid transparent;
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold), var(--gold-strong));
  color:#121212; box-shadow:0 6px 20px rgba(226,191,46,.25);
}
.btn-gold:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-outline{
  color:#fff; border-color:#2a2a2a; background:transparent;
}
.btn-outline:hover{ border-color:#444; background:#141414 }

/* ====== Hero ====== */
.hero {
  position: relative;
  min-height: 82vh;
  display: grid;
  align-items: end;
  background: #000 url('Bilder/lavm.jpeg') center/cover no-repeat;
  border-bottom: 1px solid var(--stroke);
}

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.85));
}
.hero-content{
  position:relative; padding-block:96px; text-align:left; max-width:900px;
}
.hero h1{
  font-family:"Playfair Display", serif; font-size:64px; line-height:1.05; margin:0 0 12px;
  letter-spacing:.4px; text-shadow:0 10px 30px rgba(0,0,0,.65);
}
.hero p{ font-size:20px; color:#D9D9D9; margin:0 0 24px }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap }
.hero-credit{
  position:absolute; right:12px; bottom:10px; font-size:11px; color:#999; opacity:.7;
}

/* ====== Sections ====== */
.section{ padding:88px 0; background:var(--bg) }
.section-dark{ background:var(--card) }
.section-head{ margin-bottom:32px }
.section h2{
  font-family:"Playfair Display", serif; font-size:36px; margin:0 0 6px; letter-spacing:.3px;
}
.section p{ color:var(--muted); margin:0 }

/* Menü */
.menu-grid{
  display:grid; grid-template-columns:repeat(1, 1fr); gap:20px;
}
@media (min-width: 900px){
  .menu-grid{ grid-template-columns:repeat(2, 1fr) }
}
.menu-card{
  background:linear-gradient(180deg, #101010, #0c0c0c);
  border:1px solid var(--stroke); border-radius:16px; padding:22px;
  box-shadow:var(--shadow);
}
.menu-card h3{
  margin:0 0 14px; font-family:"Playfair Display", serif; letter-spacing:.3px;
}
.menu-list{ margin:0; padding:0; list-style:none }
.menu-list li{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px dashed #232323;
}
.menu-list li:last-child{ border-bottom:0 }
.menu-list .dot{ border-bottom:1px dashed #2b2b2b }
.price{ color:var(--gold); font-weight:600 }

/* Öffnungszeiten */
.hours{
  display:grid; gap:12px; max-width:520px;
  background:#0e0e0e; padding:20px; border:1px solid var(--stroke); border-radius:14px;
}
.hours > div{ display:flex; justify-content:space-between; }
.hours span:first-child{ color:#bbb }
.hours span:last-child{ color:#fff; font-weight:600 }

/* Standort */
.location-wrap{
  display:grid; gap:20px;
}
@media (min-width: 900px){
  .location-wrap{ grid-template-columns: 360px 1fr }
}
.location-card{
  background:#0e0e0e; border:1px solid var(--stroke); border-radius:16px; padding:22px; box-shadow:var(--shadow);
}
.location-card h4{ margin:0 0 8px; font-family:"Playfair Display", serif }
.location-card a{ color:#fff; text-decoration:none; border-bottom:1px solid #333 }
.location-card a:hover{ border-color:#555 }

.map{
  height:360px; overflow:hidden; border-radius:16px; border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05) }

/* Galerie */
.grid{ display:grid; gap: 16px; }
.gallery{ grid-template-columns: repeat(1, 1fr) }
@media (min-width: 900px){
  .gallery{ grid-template-columns: repeat(3, 1fr) }
}
.gallery-item{
  position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--stroke);
  transform:translateY(10px); opacity:0; animation:fadeUp .7s ease forwards; animation-delay:var(--delay,0);
}
.gallery img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;
}
.gallery-item:hover img{ transform:scale(1.06) }
@keyframes fadeUp{ to{ transform:none; opacity:1 } }

/* Reservation */
.reservation-form{
  background:#0e0e0e; border:1px solid var(--stroke); border-radius:16px; padding:22px;
  box-shadow:var(--shadow); max-width:760px;
}
.grid.two{ display:grid; gap:16px }
@media (min-width: 720px){
  .grid.two{ grid-template-columns: 1fr 1fr }
}
.field{ display:grid; gap:8px }
.field label{ color:#cfcfcf; font-size:.95rem }
input, textarea{
  background:#151515; color:#fff; border:1px solid #222; border-radius:12px; padding:12px 14px;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus{
  border-color:#2e2e2e; box-shadow: 0 0 0 4px rgba(201,162,39,.12);
}
textarea{ resize:vertical; min-height:120px }

.actions{ display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap }
.form-note{ color:#aaa; font-size:.95rem }

/* Footer */
.site-footer{
  border-top:1px solid var(--stroke); background:#0a0a0a;
}
.footer-inner{
  height:88px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.legal{ color:#9a9a9a; font-size:.95rem }

/* Kleinigkeiten */
.note{ color:#a9a9a9; margin-top:14px; font-size:.95rem }