
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Arial,sans-serif;
background:#050505;
color:#fff;
line-height:1.6;
}

body::before{
content:'';
position:fixed;
inset:0;
background:
linear-gradient(rgba(0,0,0,.82),rgba(0,0,0,.92)),
url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&w=1920&auto=format&fit=crop') center/cover;
z-index:-1;
}

header{
position:sticky;
top:0;
background:rgba(0,0,0,.88);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(212,175,55,.25);
z-index:999;
}

nav{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 24px;
}

nav img{
height:72px;
}

nav .links{
display:flex;
gap:24px;
}

nav a{
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-size:14px;
letter-spacing:1px;
}

nav a:hover{
color:#d4af37;
}

.hero{
max-width:1200px;
margin:auto;
padding:120px 24px;
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
min-height:80vh;
}

.hero h1{
font-size:76px;
line-height:1;
color:#d4af37;
margin-bottom:24px;
}

.hero p{
font-size:20px;
color:#ddd;
margin-bottom:12px;
}

.btn{
display:inline-block;
margin-top:20px;
padding:14px 28px;
border:1px solid #d4af37;
border-radius:40px;
color:#d4af37;
text-decoration:none;
}

.btn:hover{
background:#d4af37;
color:#000;
}

.container{
max-width:1200px;
margin:auto;
padding:80px 24px;
}

.card{
background:rgba(255,255,255,.04);
border:1px solid rgba(212,175,55,.2);
border-radius:22px;
padding:30px;
backdrop-filter:blur(10px);
margin-bottom:24px;
}

h2{
font-size:42px;
margin-bottom:20px;
color:#d4af37;
}

.accordion-header{
background:#8b0000;
padding:18px;
border-radius:16px;
margin-top:18px;
font-weight:bold;
cursor:pointer;
}

.accordion-content{
display:none;
padding:18px;
background:rgba(255,255,255,.03);
border-radius:0 0 18px 18px;
}

.accordion-content.active{
display:block;
}

.item{
display:flex;
justify-content:space-between;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.08);
gap:20px;
}

.item-text{
max-width:80%;
}

.desc{
display:block;
font-size:14px;
color:#bbb;
margin-top:4px;
}

.menu-image{
width:100%;
border-radius:16px;
margin-bottom:18px;
}

iframe{
width:100%;
height:420px;
border:0;
border-radius:20px;
}

footer{
padding:40px;
text-align:center;
color:#bbb;
border-top:1px solid rgba(212,175,55,.2);
margin-top:40px;
}

.call-sticky{
position:fixed;
bottom:20px;
right:20px;
background:#d4af37;
color:#000;
padding:16px 24px;
border-radius:999px;
font-weight:bold;
text-decoration:none;
}

@media(max-width:900px){
.hero{
grid-template-columns:1fr;
text-align:center;
}
.hero h1{
font-size:52px;
}
nav .links{
display:none;
}
}


/* Verbesserungen Speisekarte */
.container img{
max-width: 420px;
width: 100%;
height: auto;
display:block;
margin: 20px auto;
border-radius: 16px;
}

/* Impressum & Datenschutz besser lesbar */
.legal-wrapper{
max-width: 1000px;
margin: 60px auto;
padding: 40px;
background: rgba(0,0,0,0.72);
border: 1px solid rgba(212,175,55,.25);
border-radius: 24px;
backdrop-filter: blur(12px);
}

.legal-wrapper h1,
.legal-wrapper h2{
color:#f4d06f;
margin-bottom:20px;
}

.legal-wrapper p,
.legal-wrapper li{
color:#f5f5f5;
font-size:18px;
line-height:1.8;
}

/* Logo auf allen Unterseiten */
.page-logo{
text-align:center;
margin:30px 0;
}

.page-logo img{
width:160px;
max-width:80%;
filter: drop-shadow(0 0 12px rgba(212,175,55,.35));
}


/* Speisekartenbilder 40% kleiner */
.container img{
max-width: 250px !important;
width: 60% !important;
height: auto;
}


/* Freundlicheres Design */
body{
background:#111 !important;
color:#f7f3ea !important;
}

body::before{
background:
linear-gradient(rgba(25,20,15,.72), rgba(20,16,12,.82)),
url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&w=1920&auto=format&fit=crop') center/cover !important;
filter: brightness(1.08);
}

header{
background:rgba(35,28,20,.88) !important;
border-bottom:1px solid rgba(255,215,120,.35) !important;
}

.card,
.legal-wrapper{
background:rgba(255,248,235,.08) !important;
border:1px solid rgba(255,215,120,.22) !important;
box-shadow:0 8px 30px rgba(0,0,0,.18);
}

.hero h1,
h2{
color:#ffd36b !important;
}

.hero p,
.card p,
.item,
.legal-wrapper p{
color:#f5ead7 !important;
}

nav a:hover,
.btn{
color:#ffe08a !important;
}

.btn{
border:1px solid #ffd36b !important;
background:rgba(255,211,107,.08);
}

.btn:hover{
background:#ffd36b !important;
color:#2b1c08 !important;
}

.accordion-header{
background:#b86b2d !important;
}

footer{
color:#ddd1be !important;
border-top:1px solid rgba(255,215,120,.22) !important;
}

.call-sticky{
background:#ffd36b !important;
color:#2b1c08 !important;
box-shadow:0 6px 18px rgba(0,0,0,.3);
}


/* Speisekarte kompakter */
.item{
padding: 9px 0 !important;
gap: 10px !important;
}

.card{
padding: 20px !important;
margin-bottom: 16px !important;
}

.menu-image,
.container img{
max-width: 175px !important;
width: 42% !important;
margin: 10px auto !important;
border-radius: 12px !important;
}

.accordion-header{
padding: 12px !important;
margin-top: 10px !important;
}

.accordion-content{
padding: 12px !important;
}

.desc{
font-size: 12px !important;
margin-top: 2px !important;
}

.menu-list{
gap: 14px !important;
}


/* Weniger Scrollen in aufgeklappten Kategorien */
.accordion-content{
padding: 8px 10px !important;
}

.item{
padding: 5px 0 !important;
line-height: 1.2 !important;
align-items:flex-start !important;
}

.item-text{
max-width: 88% !important;
}

.item span{
font-size: 14px !important;
}

.desc{
font-size: 11px !important;
line-height: 1.2 !important;
margin-top: 1px !important;
}

.card{
padding: 14px !important;
}

.container{
padding-top: 40px !important;
padding-bottom: 40px !important;
}


/* Bilder elegant am Rand */
.accordion-content{
display:flex;
flex-direction:column;
gap:10px;
}

.accordion-content img,
.menu-image,
.container img{
float:right;
width:110px !important;
max-width:110px !important;
height:auto;
margin:4px 0 10px 18px !important;
border-radius:10px !important;
object-fit:cover;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* Gerichte kompakter */
.item{
padding:4px 0 !important;
min-height:auto !important;
}

.item-text{
max-width:92% !important;
}

.accordion-content::after{
content:'';
display:block;
clear:both;
}

/* Mobile Optimierung */
@media(max-width:700px){

.accordion-content img,
.menu-image,
.container img{
width:85px !important;
max-width:85px !important;
margin-left:10px !important;
}

.item span{
font-size:13px !important;
}

.desc{
font-size:10px !important;
}
}


/* Einheitliche Schrift in Speisekarte */
.accordion-content,
.item,
.item span,
.item-text,
.desc,
.menu-list,
.card{
font-family: Arial, sans-serif !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
}

.item span{
font-size: 15px !important;
line-height: 1.3 !important;
}

.desc{
font-size: 12px !important;
opacity: .9;
}

/* Startseitenbild komplett sichtbar */
.hero-special-image{
text-align:center;
margin-top:20px;
}

.hero-special-image img{
max-width:420px;
width:100%;
height:auto;
object-fit:contain;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}


.hero-special-image{
margin-top:30px;
display:flex;
justify-content:flex-start;
}

.hero-special-image img{
max-width:360px !important;
width:100%;
height:auto;
background:transparent !important;
box-shadow:none !important;
}

@media(max-width:900px){
.hero-special-image{
justify-content:center;
}

.hero-special-image img{
max-width:260px !important;
}
}
