/* =============================================================================
   Damas Ecke — Allergene & Zutaten (allergene.html)
   Baut auf style.css + menu.css auf. Laptop: Tabellen. Mobil (< 900px): Karten.
   ========================================================================== */

.mhero--compact{padding-bottom:clamp(24px,3vw,40px)}
.ameta{display:flex; flex-wrap:wrap; gap:.6em; font-size:.95rem; color:var(--muted-light); margin-bottom:1.2rem}
.ameta span{opacity:.5}
.ameta a{color:var(--cream); border-bottom:1px solid rgba(199,169,120,.5)}

.asub{font-size:clamp(1.5rem,2.6vw,2rem); color:var(--cream); margin-bottom:18px}

/* Legende */
.alegend-wrap{padding:clamp(24px,4vw,48px) 0 clamp(28px,4vw,48px)}
.alegend{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px 18px; margin:0 0 18px}
.alegend__item{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:10px 14px; border:1px solid rgba(var(--gold-rgb),.22); border-radius:8px; background:rgba(22,36,63,.45)}
.alegend__code{min-width:38px; padding:8px 10px; border-radius:var(--r-pill); display:grid; place-items:center; line-height:1; background:var(--gold-soft); color:var(--ink-deep); font-family:var(--font-display); font-weight:600; font-size:1.2rem}
.alegend dd{margin:0; font-size:.95rem; color:var(--cream)}
.anotused{font-size:.92rem; color:var(--muted-light)}
.anotused strong{color:var(--cream); font-weight:500}

.ahead{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:clamp(32px,5vw,56px)}
.ahead .asub{margin-bottom:0}
.ahead__count{font-size:.9rem; color:var(--gold-soft)}

/* Kategorie-Abschnitte */
.acat{padding:clamp(28px,4vw,44px) 0 8px; scroll-margin-top:calc(var(--header-h) + 66px)}
.acat__title{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--cream); padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid rgba(var(--gold-rgb),.28)}
.acat__count{font-family:var(--font-sans); font-size:.86rem; color:var(--gold-soft)}

/* Tabelle (Laptop) */
.atable{width:100%; border-collapse:separate; border-spacing:0; background:linear-gradient(180deg,rgba(22,36,63,.6),rgba(15,26,46,.8)); border:1px solid rgba(var(--gold-rgb),.2); border-radius:var(--r-md); overflow:hidden}
.atable th,.atable td{text-align:left; vertical-align:top; padding:16px 18px; border-bottom:1px solid rgba(var(--gold-rgb),.14)}
.atable tbody tr:last-child th,.atable tbody tr:last-child td{border-bottom:0}
.atable thead th{font-family:var(--font-sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--gold-soft); background:rgba(10,19,32,.5)}
.atable__dish{width:26%; font-family:var(--font-display); font-size:1.25rem; font-weight:500; color:var(--cream); line-height:1.3}
.atable__note{display:block; margin-top:4px; font-family:var(--font-sans); font-size:.82rem; font-weight:300; color:var(--muted-light)}
.atable__ing{width:40%; font-size:.95rem; color:var(--muted-light); line-height:1.55}
.atable__tags{width:34%}
.atable__label{display:none}
.atags{display:flex; flex-wrap:wrap; gap:6px}

/* Allergen-Kürzel */
.atag{display:inline-flex; align-items:center; gap:.4em; padding:4px 10px 4px 6px; border:1px solid rgba(199,169,120,.55); border-radius:var(--r-pill); font-size:.84rem; color:var(--cream); line-height:1.3}
.atag b{display:inline-grid; place-items:center; min-width:22px; padding:4px 7px; line-height:1; border-radius:var(--r-pill); background:var(--gold-soft); color:var(--ink-deep); font-weight:600; font-size:.8rem}
.atag__detail{color:var(--muted-light)}
.atag--pending{border-style:dashed; border-color:rgba(199,169,120,.4)}
.atag--pending b{background:transparent; color:var(--gold-soft); box-shadow:inset 0 0 0 1px var(--gold-soft)}
.atag__hint{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-soft); opacity:.9}
.atag--additive{border-color:rgba(247,241,228,.22)}
.atag--additive b{background:rgba(247,241,228,.14); color:var(--cream); font-weight:500}
.atag--none{display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--r-pill); border:1px solid rgba(139,168,120,.6); color:#A9C99A; font-size:.84rem}

/* Zusatzstoffe + Hinweis */
.aadd-wrap{padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,120px); margin-top:clamp(24px,4vw,48px); border-top:1px solid rgba(var(--gold-rgb),.18)}
.aadd__intro{max-width:62ch; color:var(--muted-light); margin-bottom:18px}
.aadd{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px 18px; margin:0 0 28px}
.aadd li{display:flex; align-items:center; gap:12px; font-size:.95rem; color:var(--cream)}
.aadd__nr{flex:none; min-width:30px; padding:7px 9px; line-height:1; border-radius:var(--r-pill); display:grid; place-items:center; background:rgba(247,241,228,.12); font-weight:500; font-size:.86rem}
.anote{position:relative; max-width:72ch; padding:18px 20px 18px 40px; border:1px solid rgba(var(--gold-rgb),.35); background:rgba(22,36,63,.45); border-radius:8px; font-size:.95rem; color:var(--muted-light); margin-bottom:28px}
.anote__star{position:absolute; left:16px; top:14px; color:var(--gold-soft); font-size:1.4rem}
.anote strong{color:var(--cream); font-weight:500}
.anote em{color:var(--cream)}
.acta{display:flex; gap:14px; flex-wrap:wrap}

/* ---------- Mobil & Tablet: Tabelle → Karten ---------------------------- */
@media (max-width:900px){
  .atable,.atable tbody,.atable tr,.atable th,.atable td{display:block; width:auto}
  .atable{background:none; border:0; border-radius:0; overflow:visible}
  .atable thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0)}
  .atable tr{margin-bottom:12px; padding:18px 18px 16px; border:1px solid rgba(var(--gold-rgb),.22); border-radius:var(--r-md); background:linear-gradient(180deg,rgba(22,36,63,.7),rgba(15,26,46,.9))}
  .atable th,.atable td{padding:0; border:0}
  .atable__dish{font-size:1.3rem; padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid rgba(var(--gold-rgb),.2)}
  .atable__ing{margin-bottom:12px}
  .atable__label{display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--gold-soft); margin-bottom:5px}
  .alegend{grid-template-columns:1fr}
  .acta .btn{width:100%}
}
@media (min-width:901px) and (max-width:1100px){
  .atable__dish{width:28%}
  .atable__ing{width:36%}
  .atable__tags{width:36%}
}

/* Rechtstexte (impressum.html, datenschutz.html) */
.legal{padding:clamp(28px,4vw,48px) 0 clamp(56px,7vw,96px)}
.legal__body{max-width:72ch; color:var(--muted-light); font-size:1rem; line-height:1.7}
.legal__body h2{font-size:clamp(1.35rem,2.2vw,1.7rem); color:var(--cream); margin:2.2em 0 .6em; padding-bottom:.4em; border-bottom:1px solid rgba(var(--gold-rgb),.28)}
.legal__body h2:first-child{margin-top:0}
.legal__body p, .legal__body ul{margin:0 0 1em}
.legal__body ul{padding-left:1.2em}
.legal__body li{margin-bottom:.5em}
.legal__body li::marker{color:var(--gold-soft)}
.legal__body strong{color:var(--cream); font-weight:500}
.legal__body a{color:var(--cream); border-bottom:1px solid rgba(199,169,120,.5); overflow-wrap:anywhere}
.legal__body a:hover{color:var(--gold-soft)}
.legal__todo{color:var(--gold-soft); font-style:italic}