:root{
  --red:#a70f2d; --red2:#78071d; --cream:#fff8ed; --paper:#fffdf8;
  --ink:#211816; --muted:#7b6963; --line:#ead9c3; --gold:#c49a4a;
  --shadow:0 18px 50px rgba(20,8,4,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    linear-gradient(rgba(24,9,5,.68), rgba(24,9,5,.78)),
    url("../assets/hintergrund.jpg") center top / cover fixed no-repeat;
  color:var(--ink);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,214,143,.22),transparent 38%),
             linear-gradient(90deg,rgba(0,0,0,.36),transparent 20%,transparent 80%,rgba(0,0,0,.36));
  z-index:-1;
}
.wrap{max-width:1120px;margin:auto;padding:18px}
.hero{
  min-height:360px;
  display:flex;
  align-items:center;
  padding:34px 18px 28px;
  color:white;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(50,0,10,.18),rgba(80,0,12,.34));
  pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;display:grid;place-items:center;gap:14px;text-align:center}
.hero-logo{width:min(560px,86vw);height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
.subtitle{letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#ffe8cf;text-shadow:0 3px 10px rgba(0,0,0,.45)}
.meta{color:#ffe8cf;font-size:14px;background:rgba(60,10,10,.34);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 14px;backdrop-filter:blur(8px)}
header{position:sticky;top:12px;z-index:20;background:transparent;backdrop-filter:none;border-bottom:none;box-shadow:none;padding:0 14px}
.topbar{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  max-width:1080px;
  margin:auto;
  padding:16px 28px;
  background:linear-gradient(90deg,rgba(100,4,22,.90),rgba(146,12,35,.90),rgba(100,4,22,.90));
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  box-shadow:0 12px 32px rgba(0,0,0,.24);
  backdrop-filter:blur(12px);
}
.tabs,.subtabs,.langs{display:flex;gap:8px;flex-wrap:wrap}
.tabs{align-items:center;justify-content:center;flex-wrap:wrap}
.langs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
button{
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  color:var(--ink);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(80,35,10,.08);
}
button.active{background:var(--red);border-color:var(--red);color:white}
header button{border-color:rgba(255,255,255,.30)}
.tabs button.active{background:white;color:var(--red)}
.langs button{padding:8px 11px;font-size:13px}
.langs button.active{background:#fff;color:var(--red)}
main{padding:22px 0 55px}
.main-panel{
  background:rgba(255,248,237,.92);
  border:1px solid rgba(255,255,255,.55);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter:blur(12px);
}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:2px 0 14px}
h1,h2,h3{margin:0}
h1{font-size:30px;color:#5d0718}
.hint{color:var(--muted);font-size:14px}
.subtabs{margin:12px 0 22px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px}
.grid{display:grid;gap:14px}
.mini-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;margin:-8px 0 16px}
.mini-tabs button{font-size:12px;padding:8px 11px}
.card{background:rgba(255,253,248,.96);border:1px solid var(--line);border-radius:22px;padding:17px 18px;box-shadow:0 12px 28px rgba(60,20,10,.09)}
.item-head{display:flex;justify-content:space-between;gap:12px;align-items:start}
.name{font-weight:900;font-size:18px}
.price{white-space:nowrap;font-weight:950;color:var(--red)}
.desc{margin-top:7px;color:#5d4c47;line-height:1.45}
.tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;border:1px solid #ead2b2;background:#fff7ea;color:#6a4a19;border-radius:999px;padding:4px 8px}
.note{background:#fff3d9;border:1px solid #eed09a;color:#6b4b16;border-radius:18px;padding:14px;margin:0 0 14px}
.allergen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.allergen{background:white;border:1px solid var(--line);border-radius:16px;padding:12px}
.allergen b{color:var(--red)}
footer{
  width:fit-content;
  max-width:90%;
  margin:22px auto 30px auto;
  padding:12px 22px;
  color:#ffe8cf;
  text-align:center;
  background:rgba(40,5,8,.58);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  backdrop-filter:blur(10px);
  font-size:14px;
}
.footer-links{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.footer-links a{color:#ffe8cf;text-decoration:none;font-weight:800;border-bottom:1px solid rgba(255,232,207,.55)}
.search{width:min(100%,380px);border:1px solid var(--line);border-radius:999px;padding:12px 15px;background:white;box-shadow:0 7px 20px rgba(80,35,10,.10)}
.legal-panel{background:rgba(255,248,237,.94);border:1px solid rgba(255,255,255,.55);border-radius:28px;box-shadow:var(--shadow);padding:26px;backdrop-filter:blur(12px);max-width:980px;margin:auto}
.legal-panel h1{color:#5d0718;margin-bottom:8px;font-size:clamp(28px,4vw,42px)}
.legal-panel p{line-height:1.62;color:#3a2b27;margin:0 0 14px;white-space:pre-line}
.legal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.legal-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid var(--line);background:var(--red);color:#fff;border-radius:999px;padding:10px 16px;font-weight:800;box-shadow:0 4px 14px rgba(80,35,10,.08)}
.legal-link.secondary{background:#fff;color:var(--red)}
@media(max-width:760px){
  .hero{min-height:285px}
  header{position:static;top:auto;padding:12px 14px 0}
  .topbar{display:flex;flex-direction:column;justify-content:center;border-radius:24px;padding:12px 16px}
  .tabs,.langs{justify-content:center}
  .section-title{display:block}
  .search{margin-top:12px;width:100%}
}
@media(max-width:640px){
  .item-head{display:block}
  .price{display:block;margin-top:5px}
  .wrap{padding:14px}
  .main-panel{border-radius:22px;padding:14px}
  button{padding:9px 12px;font-size:13px}
  .meta{border-radius:18px}
}