/*
 * Ingredient detail pages (v1.56.0, 06.09.2026).
 * Loaded on top of inhaltsstoffe.css, which itself sits on wissen.css,
 * so all colour variables (--forest, --sand, --muted, ...) are already
 * defined and are reused here rather than redeclared.
 *
 * Deliberately no colour coding of the assessment: the result is shown
 * as words in a definition list, never as a coloured badge or a score.
 */

.ingredient-detail-main { overflow-x: clip; }

/* Hero -------------------------------------------------------------- */
.ingredient-detail-hero {
  position: relative;
  padding: 62px 0 44px;
  background: radial-gradient(circle at 88% 6%, rgba(199, 161, 106, .2), transparent 30%);
}
.ingredient-detail-hero .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: 13px;
}
.ingredient-detail-hero .breadcrumbs a { color: var(--muted); text-decoration: none; }
.ingredient-detail-hero .breadcrumbs a:hover { color: var(--terracotta); text-decoration: underline; }
.ingredient-detail-hero .breadcrumbs span[aria-current] { color: var(--forest); font-weight: 650; }

.ingredient-detail-title {
  margin: 10px 0 18px;
  max-width: 900px;
  color: var(--forest);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.1;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}
.ingredient-detail-hero .hero-lead { max-width: 760px; }

/* Body -------------------------------------------------------------- */
.ingredient-detail-body { max-width: 830px; padding-bottom: 76px; }

.ingredient-detail-section { margin: 0 0 46px; }
.ingredient-detail-section > h2 {
  margin: 0 0 18px;
  color: var(--forest);
  font-size: clamp(24px, 2.6vw, 32px);
}
.ingredient-detail-section p.block { margin: 0 0 18px; color: var(--ink); line-height: 1.78; }
.ingredient-detail-section p.block:last-child { margin-bottom: 0; }

.ingredient-detail-subhead {
  margin: 34px 0 14px;
  color: var(--forest);
  font-size: 19px;
}

.ingredient-detail-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--terracotta);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Facts + classification -------------------------------------------- */
.ingredient-detail-facts,
.ingredient-detail-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--line);
}
.ingredient-detail-facts > div,
.ingredient-detail-scale > div {
  min-width: 0;
  padding: 18px 20px;
  background: var(--panel);
}
.ingredient-detail-facts dt,
.ingredient-detail-scale dt {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ingredient-detail-facts dd,
.ingredient-detail-scale dd {
  margin: 0;
  color: var(--forest);
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ingredient-detail-classification .ingredient-detail-scale { background: var(--sand); }
.ingredient-detail-classification .ingredient-detail-scale > div { background: var(--ivory); }

/* Lists -------------------------------------------------------------- */
.ingredient-detail-list { margin: 0; padding-left: 20px; }
.ingredient-detail-list li { margin: 0 0 13px; color: var(--ink); line-height: 1.75; }
.ingredient-detail-list li:last-child { margin-bottom: 0; }
.ingredient-detail-list a { color: var(--terracotta); }

.ingredient-detail-reviewed {
  margin: -22px 0 46px;
  color: var(--muted);
  font-size: 13px;
}

/* "Assessment in preparation" ---------------------------------------- */
.ingredient-detail-pending {
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--ivory);
}
.ingredient-detail-pending > h2 { font-size: clamp(21px, 2.2vw, 26px); }
.ingredient-detail-pending p.block { margin-bottom: 0; color: var(--muted); }

/* Occurrence in named products --------------------------------------- */
.ingredient-detail-occurrence {
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.ingredient-detail-disclaimer {
  color: var(--muted) !important;
  font-size: 14px;
  line-height: 1.7 !important;
}
.ingredient-detail-examples li { color: var(--forest); }

.ingredient-detail-sources { margin: 0; padding: 0; list-style: none; }
.ingredient-detail-sources li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.ingredient-detail-sources li:last-child { border-bottom: 0; }
.ingredient-detail-source-kind {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--forest);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ingredient-detail-source-label { color: var(--forest); font-weight: 620; }
.ingredient-detail-sources a { color: var(--terracotta); }
.ingredient-detail-source-note { color: var(--muted); }

/* Standing note + back link ------------------------------------------ */
.ingredient-detail-note {
  margin: 8px 0 34px;
  padding: 34px 36px;
  border-radius: 30px;
  color: white;
  background: linear-gradient(145deg, #102b27, #1a4039);
  box-shadow: 0 26px 60px rgba(16, 43, 39, .18);
}
.ingredient-detail-note .ingredient-detail-kicker { color: #e0b981; }
.ingredient-detail-note h2 { margin: 0 0 14px; color: white; font-size: clamp(24px, 3vw, 34px); }
.ingredient-detail-note p.block { margin: 0; color: #d2dfdb; line-height: 1.75; }
.ingredient-detail-datastatus { margin: 16px 0 0; color: #9fb4ae; font-size: 13px; }

.ingredient-detail-back { margin: 0; }

@media (max-width: 860px) {
  .ingredient-detail-hero { padding: 44px 0 32px; }
  .ingredient-detail-body { padding-bottom: 54px; }
  .ingredient-detail-note { padding: 26px 24px; border-radius: 24px; }
  .ingredient-detail-pending { padding: 22px 22px; }
}