:root{
  --bg:#f1ece0; --bg2:#f6f1e6; --panel:#fbf7ee;
  --green:#3f5e4a; --green-d:#33503e; --gold:#b08948; --gold-d:#8a6a26;
  --text:#2f2a23; --muted:#6b6052; --line:#ddd2bd;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text);}
img{max-width:100%; display:block;}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px;}
.label{color:var(--green); font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700;}
h2.sec{font-weight:700; font-size:27px; line-height:1.4; margin:6px 0 4px;}
.rule{width:54px; height:3px; background:var(--gold); margin:14px 0;}
.center{text-align:center;} .center .rule{margin:14px auto;}
p{color:var(--muted); font-size:15px; line-height:1.7;}

header{position:sticky; top:0; z-index:50; background:rgba(241,236,224,.96); border-bottom:1px solid var(--line);}
.nav{position:relative; display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1000px; margin:0 auto;}
.brand{font-weight:700; letter-spacing:3px; font-size:17px; color:var(--green); text-decoration:none; display:flex; align-items:center;}
.brand .logo{height:44px; width:auto; display:block;}
.menu a{color:var(--text); text-decoration:none; font-size:12px; letter-spacing:1px; text-transform:uppercase; margin-left:18px; font-weight:600;}
.menu a:hover{color:var(--gold-d);}
.menu-toggle{display:none; background:none; border:none; font-size:26px; line-height:1; color:var(--green); cursor:pointer; padding:4px 8px;}

.hero{position:relative; height:470px; overflow:hidden;}
.hero img{width:100%; height:100%; object-fit:cover;}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,38,30,.20),rgba(30,38,30,.60)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fbf7ee; padding:0 20px;}
.hero .label{color:#e7c98c;}
.hero h1{font-weight:700; font-size:42px; line-height:1.4; letter-spacing:.5px; margin:10px 0;}
.hero .rule{background:var(--gold);}
.hero p{color:#f3ead7; max-width:500px;}

.aktuelles{background:var(--green-d); color:#eadfc6; padding:30px 0;}
.akt-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:14px;}
.akt{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:16px 18px; border-radius:6px;}
.akt .d{font-size:11px; letter-spacing:1px; color:#e7c98c; font-weight:700;}
.akt h4{margin:5px 0 6px; font-weight:700; line-height:1.4;}
.akt p{color:#e4d8bf; font-size:14px; margin:0; line-height:1.6;}
.akt img{margin-top:10px; border-radius:4px; max-height:160px; object-fit:cover; width:100%;}
/* Aktuelles-Bild: nicht zuschneiden, Höhe richtet sich nach dem Bild */
#aktuelles .pic img{height:auto; object-fit:initial;}

section{padding:60px 0;}

/* Tischreservierung: Abschnitt erst nach Klick auf den Button sichtbar (CSS :target, kein JS noetig).
   scroll-margin-top haelt den Abschnitt frei vom sticky Header. */
#tischreservierung{display:none; scroll-margin-top:92px;}
#tischreservierung:target{display:block;}
.alt{background:var(--bg2);}
.split{display:flex; gap:36px; align-items:center;}
.split .txt{flex:1;}
.split .pic{flex:0 0 46%;}
.split .pic img{height:270px; width:100%; object-fit:cover; border:6px solid #fff; box-shadow:0 6px 20px rgba(0,0,0,.15);}
.hours{margin-top:16px; font-size:15px; line-height:1.7;}
.hours b{color:var(--green);}
.lead{font-size:19px; font-style:italic; color:var(--green); margin-bottom:14px; line-height:1.5;}

/* Gaststätte: Text oben, Bilderwechsel darunter – volle Breite wie die anderen Blöcke */
#gaststaette .txt{max-width:1000px;}
.slideshow{position:relative; width:100%; max-width:1000px; margin:28px 0 0; aspect-ratio:16/9;
  border:6px solid #fff; box-shadow:0 6px 20px rgba(0,0,0,.15); overflow:hidden; background:var(--bg2);}
.slideshow img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease-in-out;}
.slideshow img.active{opacity:1;}
@supports not (aspect-ratio:16/9){ .slideshow{height:420px;} }

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;}
.card{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:.2s;}
.card:hover{box-shadow:0 8px 22px rgba(0,0,0,.12); transform:translateY(-3px);}
.card img{height:155px; width:100%; object-fit:cover;}
.card .b{padding:15px 16px;}
.card h4{margin:0; font-weight:700; font-size:17px; line-height:1.4;}
.card h4 a{color:var(--text); text-decoration:none;}
.card h4 a:hover{color:var(--gold-d);}
.card .price{color:var(--gold-d); font-size:14px; margin:6px 0 12px; font-weight:700;}
.btn{display:inline-block; background:var(--green); color:#fff; text-decoration:none; font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:10px 16px; border-radius:4px; font-weight:700; border:none; cursor:pointer;}
.btn:hover{background:var(--green-d);}
.gast-actions{max-width:1000px; margin-top:18px;}
.karten-bar{display:flex; gap:8px; margin-bottom:10px;}
.karten-bar .karten-btn{flex:1 1 0; min-width:0; text-align:center; padding:10px 8px;}
.btn-block{display:block; width:100%; box-sizing:border-box; text-align:center;}
.note{text-align:center; color:var(--muted); font-size:13px; margin-top:18px; line-height:1.6;}

.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px;}
.review{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:20px;}
.stars{color:var(--gold); letter-spacing:2px; font-size:15px;}
.review p{font-size:14px; margin:10px 0; line-height:1.7; color:var(--text);}
.review .who{font-size:12px; color:var(--muted); letter-spacing:1px; font-weight:700;}
.review-cta{text-align:center; margin-top:24px;}

.map{height:250px; background:#dcd2bb; border:1px solid var(--line); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; text-align:center; padding:0 16px; cursor:pointer;}
.map iframe{width:100%; height:100%; border:0;}
.addr{margin-top:16px; font-size:15px; line-height:1.7;}

.form-row{display:flex; gap:12px; margin-bottom:12px;}
.form-row input{flex:1;}
form.kontakt input, form.kontakt textarea, form.bewertung input, form.bewertung textarea, form.bewertung select{
  width:100%; padding:11px; border:1px solid var(--line); border-radius:4px; margin-bottom:12px;}
.hp{position:absolute; left:-5000px;}
.flash{max-width:600px; margin:0 auto 18px; padding:12px 16px; border-radius:6px; font-size:14px;}
.flash.ok{background:#e3efe3; color:#2f5e3f; border:1px solid #bcd9bf;}
.flash.err{background:#f3e2e2; color:#7a2e2e; border:1px solid #e0b9b9;}

footer{background:var(--green-d); color:#d9cdae; padding:42px 0 28px; text-align:center;}
footer .brand{letter-spacing:4px; color:#eadfc6; font-size:19px;}
footer .links{margin:16px 0; font-size:14px;}
footer a{color:#d9cdae; text-decoration:none; margin:0 10px;}
footer .small{font-size:13px; color:#b6a884; margin-top:10px; line-height:1.6;}

@media(max-width:760px){
  .menu-toggle{display:block;}
  .menu{display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; padding:8px 24px 14px; box-shadow:0 8px 16px rgba(0,0,0,.08);}
  .menu.open{display:flex;}
  .menu a{margin:8px 0;}
  .split{flex-direction:column;} .split .pic{flex:auto; width:100%;}
  .cards,.reviews,.akt-grid{grid-template-columns:1fr;}
  .hero h1{font-size:31px;}
  .form-row{flex-direction:column;}
}