/* ===========================================================
   foodie | it UP – Sauces, Dips & Toppings (Multi-Accent)
   Version: 1.0.1
   =========================================================== */

.foodie-sauce {
  --accent: #3f8d2b;   /* Standard: grün (it UP neutral) */
  --accent-2: #c9a046; /* senf (gold) */
  --accent-3: #fe6e3d; /* orange/boost */
  --bg: #fff;
  --text: #222;
  --muted: #6b6b6b;
  --radius: 18px;
  --shadow: 0 6px 22px rgba(0,0,0,.06);
  --maxw: 980px;
  --gap: 18px;

  color: var(--text);
  line-height: 1.6;
}

/* == Boxen ================================================== */
.foodie-sauce .fs-block,
.foodie-sauce .fs-brand {
  max-width: var(--maxw);
  margin: 24px auto;
  padding: 24px;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* == Brand Slot ============================================ */
.foodie-sauce .fs-brand h3 {
  margin: 0 0 10px;
  font-size: clamp(18px,2.6vw,22px);
  text-wrap: balance;
}
.foodie-sauce .fs-brand p {
  margin: 0;
  font-size: clamp(15px,2.2vw,17px);
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.foodie-sauce .fs-brand img {
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 0 14px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.05));
}

/* == Head + Intro ========================================== */
.foodie-sauce .fs-head{ padding:0; box-shadow:none; background:transparent; }
.foodie-sauce .fs-title {
  margin: 0 0 6px;
  font-size: clamp(26px,3.6vw,34px);
  line-height: 1.15;
  letter-spacing: .2px;
}
.foodie-sauce .fs-teaser {
  margin: 10px 0 0;
  font-size: clamp(16px,2.2vw,18px);
  line-height: 1.55;
  text-align: justify;
}
.foodie-sauce .fs-meta {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.foodie-sauce .fs-block p {
  text-align: justify;
}
.fs-strong {
  font-weight: 600;
}
/* == Badges (nebeneinander, robust) ======================== */
.foodie-sauce .fs-badges {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 10px 0 6px;
}
.foodie-sauce .fs-badges > h3 {
  flex: 0 0 100%;
  margin: 0 0 6px 0;
}
.foodie-sauce .fs-badges > p,
.foodie-sauce .fs-badges > figure,
.foodie-sauce .fs-badges > div {
  display: contents !important;
}
.foodie-sauce .fs-badges img {
  width: 110px !important;
  height: 110px !important;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.07));
}
@media (max-width: 480px){
  .foodie-sauce .fs-badges img{ width: 96px !important; height: 96px !important; }
}

/* == Listen / Bullets ====================================== */
.foodie-sauce .fs-list{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  line-height: 1.6;
  font-size: 16px;
}
.foodie-sauce .fs-list li{
  position: relative;
  margin: .32rem 0;
  padding-left: 36px;
}
.foodie-sauce .fs-list li::marker{ content:'' !important;
}
.foodie-sauce .fs-list--checks li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:4px;
  width:22px;
  height:22px;
  line-height:22px;
  text-align:center;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:14px;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Zwei Spalten (Ideal fuer) */
.foodie-sauce .fs-grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:680px){ .foodie-sauce .fs-grid-2{ grid-template-columns:1fr; } }

/* EMPFOHLENE MENGE (Definition List) */
.foodie-sauce .fs-amounts{
  display:grid; grid-template-columns:200px 1fr; column-gap:14px; row-gap:8px;
  margin:8px 0 0; font-variant-numeric:tabular-nums;
}
.foodie-sauce .fs-amounts dt{ font-weight:600; }
.foodie-sauce .fs-amounts dd{ margin:0; text-align:left; white-space:nowrap; }
@media (max-width:560px){ .foodie-sauce .fs-amounts{ grid-template-columns:1fr auto; } }

/* Optional: Mengenliste als UL (falls verwendet) */
.foodie-sauce .fs-list.fs-metrics{
  display:grid; grid-template-columns:200px 1fr; gap:6px 10px;
}
.foodie-sauce .fs-list.fs-metrics li{ display:contents; }
.foodie-sauce .fs-list.fs-metrics li::before{ content:none !important; }
.foodie-sauce .fs-list.fs-metrics strong{ grid-column:1; font-weight:600; }
.foodie-sauce .fs-list.fs-metrics .val{ grid-column:2; white-space:nowrap; }
@supports not (display:contents){
  .foodie-sauce .fs-list.fs-metrics{ display:block; }
  .foodie-sauce .fs-list.fs-metrics li{ display:block; }
}

/* == Meal-Idee Block ======================================= */
.foodie-sauce .fs-meal{
  background:rgba(201,160,70,.06);
  border:1px solid rgba(201,160,70,.18);
}
.foodie-sauce .fs-meal h3{
  margin: 0 0 10px;
  font-size: clamp(18px,2.6vw,22px);
  color: var(--accent-2);
}
.foodie-sauce .fs-meal p{
  margin: 0 0 6px;
  font-size: clamp(15px,2.2vw,17px);
  line-height: 1.6;
  text-align: justify;
}
.foodie-sauce .fs-meal a{
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 600;
}
.foodie-sauce .fs-meal a:hover{
  text-decoration: underline;
}

/* == Pills (Submarkenfarben) =============================== */
.foodie-sauce .fs-pill{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.3px;
}
.foodie-sauce .fs-pill.dip{ background:#e84a27; }
.foodie-sauce .fs-pill.sauce{ background:#c0392b; }
.foodie-sauce .fs-pill.boost{ background:#fe6e3d; }
.foodie-sauce .fs-pill.sweet{ background:#eba3b3; color:#222; }

/* == Responsive Tweaks ==================================== */
@media (max-width: 920px){
  .foodie-sauce .fs-block,
  .foodie-sauce .fs-brand{ padding: 18px; }
}