/* style.css - Einfaches, responsives Design, A11Y freundlich */

/* Reset basics */
* {box-sizing: border-box;}
html,body{margin:0;padding:0;font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
.container{max-width:1100px;margin:0 auto;padding:1rem;}

.site-header{background:#b33;color:#fff;padding:.75rem 0;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.brand h1{margin:0;font-size:1.25rem;}
.tagline{margin:0;font-size:.9rem;opacity:.95}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;}
.main-nav a{color:#fff;text-decoration:none;padding:.5rem;border-radius:4px}
.main-nav a:focus, .main-nav a:hover{background:rgba(255,255,255,0.1);outline:2px solid rgba(255,255,255,0.15);}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem;background:#000;color:#fff;}

/* Hamburger */
.hamburger{display:none;background:transparent;border:0;padding:0;width:40px;height:40px;cursor:pointer}
.hamburger span{display:block;height:3px;background:#fff;margin:6px 8px;border-radius:2px;transition:all .2s}

/* responsive nav */
@media (max-width:800px){
  .main-nav{position:absolute;left:0;right:0;top:72px;background:#b33;max-height:0;overflow:hidden;transition: max-height .3s ease;}
  .main-nav.open{max-height:400px;padding:1rem 0;}
  .main-nav ul{flex-direction:column;}
  .hamburger{display:block}
}

/* Content */
h2{font-size:1.3rem;margin-top:0;}
.card{background:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:1rem;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}

/* Gallery slideshow */
.gallery { position:relative; }
.gallery .slides { list-style:none;margin:0;padding:0;position:relative;overflow:hidden;height:300px;border-radius:6px;}
.gallery .slides li{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.gallery .slides li.active{opacity:1}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}

/* Menu table */
.menu-table{width:100%;border-collapse:collapse}
.menu-table td, .menu-table th{padding:.5rem;border-bottom:1px solid #eee}
.price{white-space:nowrap;text-align:right;font-weight:600}

/* Forms */
form label{display:block;margin-bottom:.2rem;font-weight:600}
input[type=text], input[type=email], textarea{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:4px}
button{background:#b33;color:#fff;border:0;padding:.6rem .9rem;border-radius:6px;cursor:pointer}

/* Footer */
.site-footer{background:#111;color:#fff;padding:1rem;margin-top:2rem}