/* =================================================================
   TERPEN.INDEX — Design System v3
   Apothecary Modern × UV-Mikroskopie · Light + Dark
   ================================================================= */

:root {
  /* — Light theme (Apothecary Modern, default) — */
  --bg:              #F4F2EC;
  --bg-soft:         #ECE9DF;
  --bg-dim:          #DDD8CB;
  --bg-card:         #FFFFFF;
  --ink:             #1A2220;
  --ink-soft:        #4D5752;
  --ink-faint:       #828A85;
  --rule-color:      #1A2220;
  --rule-soft:       #B8B5A8;

  --sage:            #5C7A5A;
  --sage-deep:       #3F5640;
  --sage-pale:       #B7C5B5;
  --clay:            #C97B43;
  --clay-deep:       #9B5827;
  --steel:           #2C4A6B;
  --steel-deep:      #1A3454;

  --uv:              #B8FF6E;
  --uv-warm:         #FFE066;
  --supports-glow:   var(--sage);
  --warn-glow:       color-mix(in oklab, var(--clay) 60%, var(--uv-warm) 40%);
  --night:           #0E1611;
  --night-soft:      #19251F;

  --shadow-card:     0 1px 0 0 rgba(26, 34, 32, 0.06), 0 0 0 0.5px rgba(26, 34, 32, 0.08);
  --shadow-glow:     0 0 14px rgba(184, 255, 110, 0.45), 0 0 4px rgba(92, 122, 90, 0.6);
  --shadow-frame:    inset 0 0 0 0.5px var(--rule-color);

  /* — Typography — */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Onest", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  --t-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --t-sm:   clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --t-base: clamp(1rem, 0.95rem + 0.3vw, 1.08rem);
  --t-lg:   clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
  --t-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-2xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --t-3xl:  clamp(2.8rem, 2.2rem + 3vw, 4.5rem);
  --t-4xl:  clamp(4rem, 3rem + 5vw, 7rem);

  /* — Spacing — */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 9rem;
  --pad-page: clamp(1.25rem, 4vw, 3rem);

  /* — Motion — */
  --duration-quick: 140ms;
  --duration-mid:   320ms;
  --duration-slow:  900ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-q:  cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg:              #0E1611;
  --bg-soft:         #19251F;
  --bg-dim:          #243029;
  --bg-card:         #16201B;
  --ink:             #ECEFE8;
  --ink-soft:        #B5BBB3;
  --ink-faint:       #6F7A72;
  --rule-color:      #38453E;
  --rule-soft:       #28332C;

  --sage:            #8FB58C;       /* lighter for dark contrast */
  --sage-deep:       #B7D6B5;
  --sage-pale:       #38493A;
  --clay:            #E5945F;
  --clay-deep:       #F0AC7A;

  --shadow-card:     0 1px 0 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(184, 255, 110, 0.08);
  --shadow-glow:     0 0 18px rgba(184, 255, 110, 0.55), 0 0 6px rgba(143, 181, 140, 0.7);
  --shadow-frame:    inset 0 0 0 0.5px rgba(184, 255, 110, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #0E1611;
    --bg-soft:         #19251F;
    --bg-dim:          #243029;
    --bg-card:         #16201B;
    --ink:             #ECEFE8;
    --ink-soft:        #B5BBB3;
    --ink-faint:       #6F7A72;
    --rule-color:      #38453E;
    --rule-soft:       #28332C;
    --sage:            #8FB58C;
    --sage-deep:       #B7D6B5;
    --sage-pale:       #38493A;
    --clay:            #E5945F;
    --clay-deep:       #F0AC7A;
    --shadow-card:     0 1px 0 0 rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(184, 255, 110, 0.08);
    --shadow-glow:     0 0 18px rgba(184, 255, 110, 0.55), 0 0 6px rgba(143, 181, 140, 0.7);
    --shadow-frame:    inset 0 0 0 0.5px rgba(184, 255, 110, 0.12);
  }
}

/* =================================================================
   Reset + Base
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  transition: background var(--duration-mid) var(--ease-out), color var(--duration-mid) var(--ease-out);
}
a { color: inherit; text-decoration: none; border-bottom: 0.5px solid currentColor; padding-bottom: 1px; transition: color var(--duration-quick) var(--ease-out); }
a:hover { color: var(--sage-deep); }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--uv); color: var(--night); }

/* =================================================================
   Typography
   ================================================================= */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" 95, "opsz" 96;
  margin: 0;
  overflow-wrap: anywhere;
}
.display--xl { font-size: var(--t-4xl); font-weight: 460; letter-spacing: -0.035em; }
.display--lg { font-size: var(--t-3xl); }
.display--md { font-size: var(--t-2xl); }
.display--sm { font-size: var(--t-xl); }
.display em, .serif-italic { font-style: italic; font-variation-settings: "wdth" 90; }

.kicker, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker { color: var(--ink-soft); }
.eyebrow { color: var(--sage-deep); }
.eyebrow .scale { color: var(--ink-faint); margin-left: 0.6em; font-weight: 400; }

.caption { font-family: var(--font-body); font-size: var(--t-sm); font-style: italic; color: var(--ink-soft); line-height: 1.4; }
.numerals { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* =================================================================
   Layout
   ================================================================= */

.page { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-page); }
.page--narrow { max-width: 880px; }
.measure { max-width: 65ch; }

.rule { border: 0; border-top: 1px solid var(--rule-color); margin: var(--s-7) 0; }
.rule--thin { border: 0; border-top: 0.5px solid var(--rule-color); margin: var(--s-5) 0; }

/* =================================================================
   Header (sticky, framed)
   ================================================================= */

.site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--s-3) var(--pad-page);
  border-bottom: 1px solid var(--rule-color);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  gap: var(--s-5);
}

/* Skelett-Kette mitten im Header — neonhaft, filigran verbunden */
.header-skel-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--s-2);
}
.header-skel-chain::-webkit-scrollbar { display: none; }
.header-skel-chain__item {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  color: var(--sage);
  filter: drop-shadow(0 0 1.5px var(--uv));
  transition: all var(--duration-quick) var(--ease-out);
}
[data-theme="light"] .header-skel-chain__item,
:root:not([data-theme]) .header-skel-chain__item {
  color: var(--sage-deep);
  filter: drop-shadow(0 0 0.5px var(--sage));
}
/* filigrane Verbindungslinie zwischen den Skeletten */
.header-skel-chain__item::before {
  content: "";
  position: absolute;
  left: calc(100% + 0px);
  top: 50%;
  width: 4px;
  height: 1px;
  background: var(--sage);
  opacity: 0.55;
  box-shadow: 0 0 4px var(--uv);
  transform: translateY(-50%);
  pointer-events: none;
}
.header-skel-chain__item:last-child::before { display: none; }
/* Hover: enger, weicher Glow — Mehrschichtig mit Fade-Out */
.header-skel-chain__item:hover {
  color: var(--uv);
  filter:
    drop-shadow(0 0 1px var(--uv))
    drop-shadow(0 0 3px rgba(184, 255, 110, 0.7))
    drop-shadow(0 0 6px rgba(184, 255, 110, 0.35));
  transform: scale(1.15);
  z-index: 11;
}
[data-theme="light"] .header-skel-chain__item:hover,
:root:not([data-theme]) .header-skel-chain__item:hover {
  color: var(--sage-deep);
  filter:
    drop-shadow(0 0 1px var(--sage))
    drop-shadow(0 0 3px rgba(92, 122, 90, 0.6))
    drop-shadow(0 0 5px rgba(184, 255, 110, 0.3));
}
/* Tooltip: rahmenlos, weich ausgefadet */
.header-skel-chain__item::after {
  content: attr(data-name);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Onest", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.06em;
  background: transparent;
  border: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-mid) var(--ease-out);
  /* Default = light mode: deeper-green text, soft sage glow */
  color: var(--sage-deep);
  text-shadow:
    0 0 2px var(--sage-deep),
    0 0 5px rgba(92, 122, 90, 0.5),
    0 0 8px rgba(184, 255, 110, 0.35);
}
/* Dark mode (explicit + system) — UV neon-glow */
[data-theme="dark"] .header-skel-chain__item::after {
  color: var(--uv);
  text-shadow:
    0 0 3px var(--uv),
    0 0 6px rgba(184, 255, 110, 0.7),
    0 0 10px rgba(184, 255, 110, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header-skel-chain__item::after {
    color: var(--uv);
    text-shadow:
      0 0 3px var(--uv),
      0 0 6px rgba(184, 255, 110, 0.7),
      0 0 10px rgba(184, 255, 110, 0.4);
  }
}
.header-skel-chain__item:hover::after { opacity: 1; }
.header-skel-chain__item svg { width: 100%; height: 100%; }
.header-skel-chain__item svg g[stroke] {
  stroke-width: 5.4;
}
@media (max-width: 980px) {
  .header-skel-chain { display: none; }
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 100, "opsz" 48;
  border: none;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__mark {
  display: inline-flex;
  align-items: center;
  width: 64px;
  height: 40px;
  color: var(--ink);
  transition: filter var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}
.wordmark__mark > svg { width: 100%; height: 100%; }
.wordmark__text {
  color: var(--ink);
  transition: filter var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.wordmark__sep {
  color: var(--uv);
  font-weight: 700;
  font-style: normal;
  font-size: 1.4em;
  line-height: 0.85;
  margin: 0 0.05em;
  transition: filter var(--duration-quick) var(--ease-out);
}
.wordmark:hover .wordmark__mark {
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 10px var(--uv))
    drop-shadow(0 0 22px rgba(184, 255, 110, 0.85))
    drop-shadow(0 0 40px rgba(184, 255, 110, 0.5));
}
.wordmark:hover .wordmark__text {
  color: var(--sage-deep);
  filter: drop-shadow(0 0 4px rgba(184, 255, 110, 0.2));
}
.wordmark:hover .wordmark__sep {
  filter:
    drop-shadow(0 0 3px var(--uv))
    drop-shadow(0 0 10px rgba(184, 255, 110, 0.85))
    drop-shadow(0 0 22px rgba(184, 255, 110, 0.5));
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: auto;
}
.site-nav a { border: none; color: var(--ink-soft); }
.site-nav a:hover { color: var(--sage-deep); }
.site-nav a.active { color: var(--ink); }

.theme-toggle {
  width: 38px; height: 38px;
  border: 1px solid var(--rule-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border-radius: 0;
  transition: all var(--duration-quick) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--bg-soft);
  border-color: var(--sage);
  color: var(--sage-deep);
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }

/* =================================================================
   Container / Frame system (Peter: "klarer, umrahmter")
   ================================================================= */

.frame {
  border: 1px solid var(--rule-color);
  background: var(--bg-card);
  padding: var(--s-6);
  position: relative;
}
.frame--soft { border-color: var(--rule-soft); }
.frame--inset { background: var(--bg-soft); }
.frame--sage { border-color: var(--sage); }

.frame-corner-mark {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.section-frame {
  border: 1px solid var(--rule-color);
  margin: var(--s-6) 0;
  background: var(--bg-card);
}
.section-frame__head {
  padding: var(--s-4) var(--s-6);
  border-bottom: 1px solid var(--rule-color);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  background: var(--bg-soft);
}
.section-frame__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xl);
  letter-spacing: -0.018em;
  font-variation-settings: "wdth" 95, "opsz" 96;
  margin: 0;
}
.section-frame__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section-frame__body {
  padding: var(--s-6);
}

/* =================================================================
   Score Bar (UV glow on fill)
   ================================================================= */

.score-bar { display: flex; flex-direction: column; gap: var(--s-2); }
.score-bar__row {
  display: grid;
  grid-template-columns: minmax(18ch, max-content) minmax(12rem, 1fr) 4.5ch;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
}
.score-bar__label {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 0;
  overflow-wrap: anywhere;
}
.score-bar__track {
  position: relative;
  height: 6px;
  background: var(--bg-dim);
  border-bottom: 0.5px solid var(--ink-faint);
}
.score-bar__fill {
  position: absolute;
  inset: 0;
  background: var(--sage);
  width: var(--score, 50%);
  box-shadow:
    0 0 0 0.5px var(--sage-deep),
    0 0 12px -2px var(--uv),
    0 0 4px -1px var(--sage);
  transition: width var(--duration-slow) var(--ease-out-q);
}
.score-bar__row:hover .score-bar__fill {
  box-shadow:
    0 0 0 0.5px var(--sage-deep),
    0 0 18px 0 var(--uv),
    0 0 6px 0 var(--sage);
}
.score-bar__value {
  font-family: var(--font-mono);
  font-size: var(--t-base);
  font-weight: 500;
  text-align: right;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}
.score-bar__row--null .score-bar__fill { background: var(--ink-faint); box-shadow: none; }
.score-bar__row--null .score-bar__value { color: var(--ink-faint); }

/* Hero score block */
.score-block { display: flex; flex-direction: column; align-items: flex-start; }
.score-block__num {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 460;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--ink);
  font-variation-settings: "wdth" 95, "opsz" 96;
  font-feature-settings: "tnum" 1;
  position: relative;
}
.score-block__num::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--sage);
  box-shadow: 0 0 18px 1px var(--uv), 0 0 6px 0 var(--sage);
}
.score-block__num small {
  font-size: 0.32em;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 0.1em;
  letter-spacing: 0;
}
.score-block__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--s-3);
}

/* =================================================================
   Terpene Glyph (skeleton + name)
   ================================================================= */

.terp-glyph {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  transition: all var(--duration-quick) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
}
/* Kleine Variante für Card-Pills (Top-Treffer, kompakte Listen) */
.terp-glyph--sm {
  font-size: var(--t-xs);
  padding: 2px 10px;
}
.terp-glyph__svg {
  width: 22px; height: 22px;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: filter var(--duration-mid) var(--ease-out), color var(--duration-quick);
}
.terp-glyph:hover {
  background: var(--sage-pale);
  border-color: var(--sage);
  color: var(--sage-deep);
}
.terp-glyph:hover .terp-glyph__svg {
  color: var(--sage-deep);
  filter: drop-shadow(0 0 6px var(--uv));
}
.terp-glyph--strong {
  background: var(--sage-pale);
  color: var(--sage-deep);
  border-color: var(--sage);
}
[data-theme="dark"] .terp-glyph {
  background: var(--bg-soft);
  border-color: var(--rule-color);
}

/* Score-Tag rechts neben dem Namen — Punkt-Separator statt Border-Left
   (clip-path schneidet vertikale Linien an den Hexagon-Apex unsauber) */
.terp-glyph__score {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  margin-left: 0.4em;
  padding-left: 0.4em;
  border-left: 0.5px solid var(--rule-soft);
  color: var(--sage-deep);
  letter-spacing: 0.02em;
}
.terp-glyph__score--neg { color: var(--clay-deep); }
.terp-glyph__score--zero { color: var(--ink-faint); }
.terp-glyph:hover .terp-glyph__score { border-left-color: var(--sage); }

/* =================================================================
   City Combobox — Custom Dropdown (replaces native <datalist>)
   ================================================================= */

.city-search { position: relative; }

.city-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
  display: none;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.city-dropdown.is-open { display: block; }

.city-dropdown li {
  padding: 0.4em 0.8em;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8em;
  border-bottom: 1px solid var(--rule-soft);
  user-select: none;
  transition: background-color var(--duration-quick) var(--ease-out);
}
.city-dropdown li:last-child { border-bottom: 0; }
.city-dropdown li:hover,
.city-dropdown li.is-active {
  background: color-mix(in oklab, var(--bg-card) 70%, var(--uv) 30%);
}

.city-dropdown__name { color: var(--ink); }
.city-dropdown__count {
  color: var(--ink-soft);
  font-size: 0.85em;
  font-feature-settings: "tnum" 1;
}

.city-dropdown__empty {
  padding: 0.6em 0.8em;
  color: var(--ink-faint);
  cursor: default;
  font-style: italic;
}
.city-dropdown__empty:hover { background: transparent; }

/* Filter-Pick Highlight auf Strain-Cards:
   die im Filter manuell aktivierten Terpene leuchten UV als visuelles Feedback */
.terp-glyph.is-filter-pick {
  border-color: var(--uv);
  filter: drop-shadow(0 0 5px var(--uv));
}
.terp-glyph.is-filter-pick:hover {
  filter: drop-shadow(0 0 9px var(--uv));
}

/* =================================================================
   Terpene Glyph — Filter Variant (Multi-Select Pills)
   ================================================================= */

.terp-glyph--filter {
  appearance: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  font-family: var(--font-body);
}
.terp-glyph--filter:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px var(--uv));
}

/* Goal-Cross: positiv beitragend (Sage-Soft-Glow) */
.terp-glyph--filter.is-supports {
  filter: drop-shadow(0 0 4px var(--supports-glow));
  border-color: var(--sage);
}
.terp-glyph--filter.is-supports:hover {
  filter: drop-shadow(0 0 8px var(--supports-glow));
}

/* Goal-Cross: antagonistisch (Bernstein-Glow) */
.terp-glyph--filter.is-antagonist {
  filter: drop-shadow(0 0 4px var(--warn-glow));
  border-color: var(--clay);
}
.terp-glyph--filter.is-antagonist:hover {
  filter: drop-shadow(0 0 8px var(--warn-glow));
}

/* Aktiv (User-Markierung) */
.terp-glyph--filter.is-active {
  background: color-mix(in oklab, var(--bg-card) 70%, var(--uv) 30%);
  border-color: var(--uv);
  color: var(--ink);
  transform: scale(1.02);
  filter: drop-shadow(0 0 8px var(--uv));
}
.terp-glyph--filter.is-active.is-antagonist {
  /* Konflikt-State: Bernstein dominiert (Warnung sichtbar), aber leichter UV-Background-Tint signalisiert "aktiv" */
  background: color-mix(in oklab, var(--bg-card) 75%, var(--uv) 25%);
  border-color: var(--clay);
  filter: drop-shadow(0 0 8px var(--warn-glow));
}

/* Exclude-Modus: aktive Pill durchgestrichen + bernstein-getönt
   (signalisiert "diese Pill schließt aus" — semantisch invers zur normalen Aktivierung) */
.terp-glyph--filter.is-excluding {
  background: color-mix(in oklab, var(--bg-card) 70%, var(--warn-glow) 30%);
  border-color: var(--clay);
  filter: drop-shadow(0 0 6px var(--warn-glow));
}
.terp-glyph--filter.is-excluding > :not(.terp-glyph__count) {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--clay);
}
.terp-glyph--filter.is-excluding .terp-glyph__count {
  color: var(--warn-glow);
}

/* Counter (hochgestellt, nur bei aktiv sichtbar) */
.terp-glyph--filter .terp-glyph__count {
  display: none;
  position: absolute;
  top: -4px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  color: var(--uv);
  pointer-events: none;
  letter-spacing: 0.01em;
  line-height: 1;
}
.terp-glyph--filter.is-active .terp-glyph__count {
  display: inline;
}
.terp-glyph--filter.is-active.is-antagonist .terp-glyph__count {
  color: var(--warn-glow);
}

/* =================================================================
   Strain List (framed cards, score+offers right column)
   ================================================================= */

.strain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.strain-card {
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr) minmax(150px, 180px) auto;
  column-gap: var(--s-5);
  row-gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--rule-color);
  border-top-width: 1px;
  background: var(--bg-card);
  align-items: start;
  transition: background var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out);
}
.strain-card__prices {
  border-left: 1px solid var(--rule-soft);
  padding-left: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.strain-card__score-col {
  border-left: 1px solid var(--rule-soft);
  padding-left: var(--s-5);
  text-align: left;
  min-width: 6rem;
}
.strain-card__top-price {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  background: transparent;
  border: 0;
  border-top: 0.5px dashed var(--rule-soft);
  position: relative;
}
.strain-card__top-price::before {
  content: "Top-Preis";
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-1);
}
/* Top-Preis: color + glow scale with --price-intensity (0..1, 1 = günstig) */
.strain-card__top-price .strain-card__price-headline {
  font-size: var(--t-2xl);
  font-weight: 460;
  letter-spacing: -0.02em;
  color: color-mix(in oklab,
    var(--ink) calc((1 - var(--price-intensity, 0.5)) * 100%),
    var(--sage-deep) calc(var(--price-intensity, 0.5) * 100%));
  text-shadow: 0 0 calc(6px * var(--price-intensity, 0.5)) rgba(184, 255, 110, calc(0.5 * var(--price-intensity, 0.5)));
}
[data-theme="dark"] .strain-card__top-price .strain-card__price-headline {
  color: color-mix(in oklab,
    var(--ink) calc((1 - var(--price-intensity, 0.5)) * 100%),
    var(--uv) calc(var(--price-intensity, 0.5) * 100%));
}
.strain-card__top-price .strain-card__price-headline small {
  font-size: 0.4em;
  color: var(--ink-faint);
  font-weight: 400;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: none;
}
.strain-card + .strain-card { border-top: 0; }
.strain-card:hover {
  background: var(--bg-soft);
  box-shadow: inset 3px 0 0 0 var(--sage);
}
.strain-card__rank {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.05em;
  padding-top: 0.4em;
}
.strain-card__right {
  border-left: 1px solid var(--rule-soft);
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.strain-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-lg);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-2) 0;
  font-variation-settings: "wdth" 95, "opsz" 60;
}
.strain-card__title a { border: none; color: var(--ink); }
.strain-card__title a:hover { color: var(--sage-deep); }
.strain-card__meta {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.strain-card__meta strong { color: var(--ink); font-weight: 600; }
.strain-card__terps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: 0;
  list-style: none;
}
.strain-card__score {
  text-align: right;
  font-family: var(--font-display);
  align-self: start;
  position: relative;
}
/* Match-score color + glow scale with --match-intensity (0..1) */
.strain-card__score-num {
  font-size: var(--t-2xl);
  font-weight: 460;
  font-variation-settings: "wdth" 95, "opsz" 96;
  letter-spacing: -0.03em;
  line-height: 1;
  color: color-mix(in oklab,
    var(--ink-faint) calc((1 - var(--match-intensity, 0.5)) * 100%),
    var(--sage-deep) calc(var(--match-intensity, 0.5) * 100%));
  font-feature-settings: "tnum" 1;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 calc(8px * var(--match-intensity, 0.5)) rgba(184, 255, 110, calc(0.55 * var(--match-intensity, 0.5)));
}
[data-theme="dark"] .strain-card__score-num {
  color: color-mix(in oklab,
    var(--ink-faint) calc((1 - var(--match-intensity, 0.5)) * 100%),
    var(--uv) calc(var(--match-intensity, 0.5) * 100%));
}
.strain-card__score-num::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--sage);
  box-shadow: 0 0 calc(14px * var(--match-intensity, 0.5)) var(--uv);
  opacity: calc(0.4 + 0.5 * var(--match-intensity, 0.5));
}
.strain-card__score-num small { font-size: 0.4em; color: var(--ink-faint); font-weight: 400; letter-spacing: 0; margin-left: 0.05em; }
.strain-card__score-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: var(--s-2);
}
.strain-card__price-headline {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  font-variation-settings: "wdth" 95, "opsz" 60;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
}
.strain-card__price-headline small {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  font-weight: 400;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.strain-card__offers-list {
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  font-feature-settings: "tnum" 1;
}
.strain-card__offer-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: baseline;
  gap: var(--s-2);
  padding: 3px 0;
  border-bottom: 0.5px solid var(--rule-soft);
  text-decoration: none;
  border-top: 0;
  color: inherit;
}
.strain-card__offer-row:last-child { border-bottom: 0; }
.strain-card__offer-row:hover { color: var(--sage-deep); }
.strain-card__offer-row .src {
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
.strain-card__offer-row .price {
  font-feature-settings: "tnum" 1;
  color: var(--ink);
  font-weight: 500;
}
.strain-card__offer-row.cheapest .price { color: var(--sage-deep); font-weight: 600; }
.strain-card__availability {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 6px var(--uv);
  margin-right: 0.35em;
  position: relative; top: -1px;
}
.dot--out { background: var(--ink-faint); box-shadow: none; }

/* =================================================================
   Goal selector — clear, framed
   ================================================================= */

.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  border: 1px solid var(--rule-color);
}
.goal-tile {
  position: relative;
  border-right: 1px solid var(--rule-color);
  border-bottom: 1px solid var(--rule-color);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-out);
  text-decoration: none;
  color: var(--ink);
  border-left: 0;
  border-top: 0;
}

/* Hover-Hint zur Bedienung — sitzt oberhalb der Tile, erscheint nur beim Hover. */
.goal-tile__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  background: var(--bg-card);
  border: 0.5px solid var(--rule-color);
  border-radius: 2px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.74rem;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  z-index: 5;
  box-shadow: var(--shadow-card);
  letter-spacing: 0;
}
.goal-tile:hover .goal-tile__tooltip,
.goal-tile:focus-visible .goal-tile__tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.goal-tile:hover {
  background: var(--bg-soft);
  color: var(--sage-deep);
}
.goal-tile.primary {
  background: var(--sage);
  color: var(--bg);
  position: relative;
}
.goal-tile.primary::before {
  content: "× 0.7";
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  opacity: 0.65;
}
.goal-tile.primary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--uv);
  box-shadow: 0 0 18px var(--uv);
}
[data-theme="dark"] .goal-tile.primary { background: var(--sage-pale); color: var(--ink); }
[data-theme="dark"] .goal-tile.primary::after { background: var(--uv); }

.goal-tile.secondary {
  background: var(--sage-pale);
  color: var(--sage-deep);
  position: relative;
}
.goal-tile.secondary::before {
  content: "× 0.3";
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--sage-deep);
  opacity: 0.65;
}
.goal-tile.secondary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--uv);
  box-shadow: 0 0 14px var(--uv);
  opacity: 0.85;
}
[data-theme="dark"] .goal-tile.secondary { color: var(--ink); }
[data-theme="dark"] .goal-tile.secondary::after { background: var(--uv); opacity: 0.85; }

.goal-tile__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.goal-tile.active .goal-tile__num { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .goal-tile.active .goal-tile__num { color: rgba(14,22,17,0.6); }

.goal-tile__icon {
  width: 28px;
  height: 28px;
  display: block;
  color: var(--ink-soft);
  margin-bottom: var(--s-1);
  transition: color var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out);
}
.goal-tile:hover .goal-tile__icon { color: var(--ink); transform: translateY(-1px); }
.goal-tile.primary .goal-tile__icon,
.goal-tile.secondary .goal-tile__icon { color: var(--ink); }
[data-theme="dark"] .goal-tile.primary .goal-tile__icon,
[data-theme="dark"] .goal-tile.secondary .goal-tile__icon { color: var(--ink); }
.goal-tile__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-lg);
  letter-spacing: -0.012em;
  font-variation-settings: "wdth" 95, "opsz" 60;
}
.goal-tile__count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  font-feature-settings: "tnum" 1;
}
.goal-tile.active .goal-tile__count { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .goal-tile.active .goal-tile__count { color: rgba(14,22,17,0.7); }

/* =================================================================
   Filter bar
   ================================================================= */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--rule-color);
  border-top: 0;
  background: var(--bg-soft);
  font-size: var(--t-sm);
}
.filter-group { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.filter-group__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.filter-group input, .filter-group select {
  font-family: var(--font-body);
  font-size: var(--t-base);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule-color);
  padding: var(--s-1) 0;
  color: var(--ink);
}
.filter-group input:focus, .filter-group select:focus {
  outline: 0;
  border-bottom: 1.5px solid var(--sage);
  box-shadow: 0 6px 14px -8px var(--uv);
}

/* =================================================================
   Data tables for generated detail pages
   ================================================================= */

.price-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid var(--rule-color);
  background: var(--bg-card);
  font-size: var(--t-sm);
}
.price-table caption {
  text-align: left;
  padding: 0 0 var(--s-3) 0;
}
.price-table th,
.price-table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 0.5px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
  min-width: 0;
  overflow-wrap: anywhere;
}
.price-table th {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-soft);
}
.price-table__price,
.price-table__status {
  white-space: nowrap;
}
.price-table__seen { white-space: normal; }
.price-table a {
  border-bottom-color: var(--rule-soft);
}

/* =================================================================
   Pull-Quote
   ================================================================= */

.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: 1.18;
  color: var(--ink);
  border-left: 2px solid var(--clay);
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  margin: var(--s-7) 0;
  max-width: 50ch;
  font-variation-settings: "wdth" 90, "opsz" 96;
}
.pullquote::before { content: "❝"; color: var(--clay); margin-right: 0.1em; opacity: 0.8; }

/* =================================================================
   UV-Microscope Stage (terpene hero)
   ================================================================= */

.micro-night {
  background: var(--night);
  color: #ECEFE8;
  position: relative;
  overflow: hidden;
}
.micro-night::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.45) 95%);
  pointer-events: none;
}
.micro-night::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 24%, var(--uv) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 38%, var(--uv) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 71%, var(--uv-warm) 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 78%, var(--uv) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 88%, var(--uv) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, var(--uv-warm) 50%, transparent 51%);
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
}
.micro-night > * { position: relative; z-index: 1; }
.micro-night .kicker { color: var(--uv); }
.micro-night a:hover { color: var(--uv); }

.micro-stage {
  position: relative;
  background: var(--night-soft);
  border: 1px solid rgba(184, 255, 110, 0.18);
  padding: var(--s-7) var(--s-6);
  display: grid;
  place-items: center;
  min-height: 280px;
  box-shadow:
    inset 0 0 60px -20px rgba(184, 255, 110, 0.12),
    0 1px 0 0 rgba(255,255,255,0.04);
}
.micro-stage__skel {
  width: 240px;
  height: 240px;
  color: var(--uv);
  filter:
    drop-shadow(0 0 12px var(--uv))
    drop-shadow(0 0 28px rgba(184, 255, 110, 0.4));
}
.micro-stage__caption {
  position: absolute;
  bottom: var(--s-4);
  left: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--uv);
  opacity: 0.75;
}
.micro-stage__caption .scale { color: rgba(184, 255, 110, 0.5); margin-left: 0.6em; }

/* =================================================================
   Mythos card
   ================================================================= */

.mythos {
  border: 1px solid var(--rule-color);
  background: var(--bg-card);
  padding: var(--s-5) var(--s-6);
  margin-bottom: -1px;
}
.mythos__verdict {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: var(--s-2);
}
.mythos__q {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: var(--t-xl);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
  font-variation-settings: "wdth" 95, "opsz" 96;
}
.mythos__q::before { content: "„"; color: var(--sage); font-weight: 500; margin-right: 0.05em; }
.mythos__q::after { content: "“"; color: var(--sage); font-weight: 500; margin-left: 0.05em; }

/* =================================================================
   Footer
   ================================================================= */

.site-footer {
  border-top: 1px solid var(--rule-color);
  margin-top: var(--s-9);
  padding: var(--s-7) var(--pad-page);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  background: var(--bg-soft);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}
.site-footer__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "logo claim"
    "logo disclaimer";
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-items: start;
  max-width: 56ch;
}
.site-footer__brand .site-footer__wordmark { grid-area: logo; }
.site-footer__brand .site-footer__claim { grid-area: claim; margin: 0; }
.site-footer__brand .site-footer__disclaimer { grid-area: disclaimer; margin: 0; }
.site-footer__wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  font-size: var(--t-base);
  color: var(--ink);
}
.site-footer__wordmark .wordmark__mark {
  width: 4em; height: 2.6em;
  display: inline-block;
}
.site-footer__wordmark .wordmark__mark svg { width: 100%; height: 100%; display: block; }
@media (max-width: 520px) {
  .site-footer__brand {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "claim" "disclaimer";
    row-gap: var(--s-3);
  }
  .site-footer__wordmark { align-items: flex-start; }
}
.site-footer__claim {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin: 0 0 var(--s-3) 0;
  color: var(--ink-soft);
}
.site-footer__disclaimer {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 540px) {
  .site-footer__nav { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}
.site-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.4em 0;
}
.site-footer__col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  align-self: flex-start;
}
.site-footer__col a:hover {
  border-bottom-color: var(--uv);
  color: var(--ink);
}

/* =================================================================
   Misc
   ================================================================= */

.summary-line {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-6);
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--rule-color);
  border-top: 0;
}
.summary-line strong { color: var(--uv); font-weight: 500; }
[data-theme="dark"] .summary-line { background: var(--night-soft); color: var(--ink); }

.empty {
  padding: var(--s-7);
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--rule-soft);
  background: var(--bg-card);
  font-style: italic;
}

/* =================================================================
   Skeleton Strip (header/hero element)
   ================================================================= */

/* ============================================================
   Service strip — gerahmter editorial Service-Hinweis.
   Sitzt im Main-Flow direkt unter der Headline.
   Lead + Body (mit Affiliate-Info im Fließtext) + Disclaimer.
   ============================================================ */
.service-strip {
  max-width: 720px;
  margin: 0 auto var(--s-5);
  padding: var(--s-5) clamp(var(--s-4), 4vw, var(--s-6));
  border: 1px solid var(--rule-color);
  background: var(--bg-soft);
  box-shadow: var(--shadow-frame);
}
[data-theme="dark"] .service-strip,
:root:not([data-theme="light"]) .service-strip {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      rgba(184, 255, 110, 0.05) 5px,
      rgba(184, 255, 110, 0.05) 5.5px
    );
}
.service-strip__lead {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem);
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-align: center;
}
.service-strip__lead em {
  font-style: italic;
  background: linear-gradient(to top,
    rgba(184, 255, 110, 0.32) 0%,
    rgba(184, 255, 110, 0.32) 22%,
    transparent 22%);
  padding: 0 1px;
}
.service-strip__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
}
.service-strip__body a {
  color: var(--ink);
  border-bottom: 0.5px solid var(--ink-soft);
  padding-bottom: 1px;
  transition: border-color var(--duration-quick) var(--ease-out);
}
.service-strip__body a:hover {
  border-bottom-color: var(--uv);
}
.service-strip__claim {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 0.5px dashed var(--rule-soft);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

@media (max-width: 760px) {
  .service-strip {
    padding: var(--s-4) var(--s-4);
    margin-bottom: var(--s-4);
  }
  .service-strip__lead { font-size: 1.05rem; }
  .service-strip__body { font-size: 0.88rem; }
}

/* Sub-header banner — visually attached to site-header */
.skel-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--pad-page);
  border-bottom: 1px solid var(--rule-color);
  background: var(--bg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  position: sticky;
  top: 60px;
  z-index: 9;
}
.skel-strip::-webkit-scrollbar { display: none; }
.skel-strip__item {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--ink-soft);
  border: none;
  border-right: 0.5px solid var(--rule-soft);
  scroll-snap-align: start;
  padding: var(--s-3);
  transition: all var(--duration-quick) var(--ease-out);
  min-width: 130px;
}
.skel-strip__item:last-child { border-right: 0; }
.skel-strip__item:hover {
  color: var(--sage-deep);
  background: var(--bg-card);
}
.skel-strip__item:hover .skel-strip__svg {
  color: var(--sage);
  filter: drop-shadow(0 0 8px var(--uv));
}
.skel-strip__svg {
  width: 32px;
  height: 32px;
  color: var(--ink);
  flex-shrink: 0;
  transition: filter var(--duration-mid) var(--ease-out), color var(--duration-quick);
}
.skel-strip__name {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* =================================================================
   Filter bar — clear, pill-based, larger labels
   ================================================================= */

.filterbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(220px, 1.2fr) auto auto auto auto;
  gap: var(--s-6) var(--s-7);
  align-items: stretch;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--rule-color);
  border-top: 0;
  background: var(--bg-card);
}
.filterbar__field {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-2);
  min-width: 0;
}
.filterbar__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.filterbar__label .scale {
  margin-left: var(--s-2);
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Dual-handle range slider */
.range-row {
  display: grid;
  grid-template-columns: 4ch 1fr 4ch;
  align-items: center;
  gap: var(--s-3);
}
.range-row input[type="number"] {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--rule-color);
  padding: 0 0 2px 0;
  color: var(--ink);
  text-align: center;
  font-feature-settings: "tnum" 1;
  -moz-appearance: textfield;
}
.range-row input[type="number"]::-webkit-outer-spin-button,
.range-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range-row input[type="number"]:focus { outline: 0; border-bottom: 1.5px solid var(--sage); }
.range-track {
  height: 28px;
  position: relative;
  display: flex;
  align-items: center;
}
.range-track__bg {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: var(--bg-dim);
  border-bottom: 0.5px solid var(--ink-faint);
}
.range-track__fill {
  position: absolute;
  top: 12px;
  height: 4px;
  background: var(--sage);
  /* Glow skaliert mit --thc-glow (0.25–1.0), in updateRangeFill() je nach Max-Wert gesetzt */
  box-shadow: 0 0 calc(8px * var(--thc-glow, 0.5)) var(--uv);
  pointer-events: none;
  transition: box-shadow 0.2s ease-out;
}
.range-track input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: 28px;
  background: transparent;
  outline: 0;
  pointer-events: none;
  margin: 0;
}
/* Thumb komplett unsichtbar — nur der Strahl (track__fill) bleibt; Drag funktioniert über transparente Hit-Zone */
.range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: ew-resize;
  pointer-events: auto;
  margin-top: 0;
}
.range-track input[type="range"]::-moz-range-thumb {
  width: 14px; height: 22px;
  background: transparent; border: 0; box-shadow: none;
  cursor: ew-resize; pointer-events: auto;
}
.range-track__fill {
  /* Strahl: strahlender (UV-getintet), Glow kompakter — drop-shadow skaliert mit --thc-glow */
  background: linear-gradient(90deg,
    rgba(143, 181, 140, 0.3) 0%,
    #A8E575 12%, #A8E575 88%,
    rgba(143, 181, 140, 0.3) 100%);
  filter: drop-shadow(0 0 calc(1.5px * var(--thc-glow, 0.5) * 2) var(--uv));
}
[data-theme="light"] .range-track__fill,
:root:not([data-theme]) .range-track__fill {
  background: linear-gradient(90deg,
    rgba(92, 122, 90, 0.3) 0%,
    #6FA068 12%, #6FA068 88%,
    rgba(92, 122, 90, 0.3) 100%);
  filter: drop-shadow(0 0 1.5px rgba(184, 255, 110, 0.85));
}

/* City search */
.city-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: 4px;
  border-bottom: 0.5px solid var(--rule-color);
}
.city-search:focus-within { border-bottom: 1.5px solid var(--sage); }
.city-search input {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  background: transparent;
  border: 0;
  padding: 0;
  flex: 1;
  color: var(--ink);
  min-width: 0;
}
.city-search input:focus { outline: 0; }
.city-search__icon { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }

/* Pill toggle group (status, sort) */
.pill-group {
  display: inline-flex;
  border: 1px solid var(--rule-color);
  background: var(--bg);
}
.pill-group button {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-right: 0.5px solid var(--rule-soft);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-out);
  white-space: nowrap;
}
.pill-group button:last-child { border-right: 0; }
.pill-group button:hover { background: var(--bg-soft); color: var(--ink); }
.pill-group button.active {
  background: var(--ink);
  color: var(--bg);
  position: relative;
}
.pill-group button.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--uv);
  box-shadow: 0 0 6px var(--uv);
}
[data-theme="dark"] .pill-group button.active { background: var(--sage); color: var(--night); }
[data-theme="dark"] .pill-group button.active::after { background: var(--uv); }

.filterbar__actions {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.filterbar__actions select {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink);
  background: var(--bg-card);
  border: 0;
  border-bottom: 0.5px solid var(--rule-color);
  padding: 2px 0;
  cursor: pointer;
  color-scheme: light dark;
}
.filterbar__actions select:focus { outline: 0; border-bottom: 1.5px solid var(--sage); }
[data-theme="dark"] .filterbar__actions select { color-scheme: dark; }
[data-theme="light"] .filterbar__actions select { color-scheme: light; }

/* Filterbar-Felder: Selects auch sauber stylen */
.filterbar__field select {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  background: var(--bg-card);
  color: var(--ink);
  border: 0;
  border-bottom: 0.5px solid var(--rule-color);
  padding: 4px 0;
  cursor: pointer;
  color-scheme: light dark;
}
.filterbar__field select:focus { outline: 0; border-bottom: 1.5px solid var(--sage); }
[data-theme="dark"] .filterbar__field select { color-scheme: dark; background: var(--bg-soft); }
[data-theme="light"] .filterbar__field select { color-scheme: light; background: var(--bg); }
.filterbar__actions button {
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 0;
}
.filterbar__actions button:hover { color: var(--clay-deep); }

@media (max-width: 980px) {
  .filterbar { grid-template-columns: 1fr 1fr; }
  .filterbar__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Responsive */
@media (max-width: 760px) {
  .strain-card { grid-template-columns: 1fr; }
  .strain-card__rank { font-size: var(--t-xs); }
  .strain-card__right { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-soft); padding-top: var(--s-3); margin-top: var(--s-3); }
  .score-bar__row { grid-template-columns: minmax(0, 1fr) 4.5ch; gap: var(--s-2) var(--s-3); }
  .score-bar__label { grid-column: 1 / -1; }
  .site-nav { gap: var(--s-3); font-size: 10px; }
  .skel-strip__svg { width: 42px; height: 42px; }
}

/* =================================================================
   Hover UV-Strip — universaler Default für verlinkte Kacheln
   Anwendung: zusätzliche Klasse auf jedes <a>/<li>, das wie eine
   Kachel funktioniert (hub-card, terp-cell, related-strain, ...).
   Pattern: 3px UV-Streifen links + Box-Shadow-Glow + translateY(-3px).
   Voraussetzung: Element hat position relative/static, eigene border
   und border-radius (übliche Kachel-Werte).
   ================================================================= */
.hover-uv-strip {
  position: relative;
  transition:
    border-color var(--duration-mid) var(--ease-out),
    transform var(--duration-mid) var(--ease-out),
    background-color var(--duration-mid) var(--ease-out);
}
.hover-uv-strip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--uv);
  box-shadow: 0 0 14px var(--uv), 0 0 4px var(--uv);
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--duration-mid) var(--ease-out);
  pointer-events: none;
}
.hover-uv-strip:hover {
  border-color: var(--uv);
  background: var(--bg-card);
  transform: translateY(-3px);
}
.hover-uv-strip:hover::before { transform: scaleY(1); }

/* =================================================================
   Stat Hexagon — Hero-Stat-Pills, hexagonal mit dezentem UV-Glow-Akzent
   oben (signalisiert Hero-Status, nicht Aroma). Größere Pills als
   .terp-glyph, plus Glow-Marker = klar als Stats lesbar trotz
   gemeinsamer Form.
   ================================================================= */
.stat-hex-row {
  display: flex; flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink-faint);
  align-items: flex-start;
}
.stat-hex {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  padding: 0.5em 1.3em 0.55em;
  background: var(--bg-card);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  text-decoration: none; color: inherit;
  min-width: 5.4em;
}
.stat-hex::before {
  /* dezenter UV-Glow-Strip unten — markiert Hero-Stat-Charakter */
  content: "";
  position: absolute;
  bottom: 4px; left: 30%; right: 30%;
  height: 1px;
  background: var(--uv);
  box-shadow: 0 0 6px var(--uv);
  opacity: 0.45;
  pointer-events: none;
}
.stat-hex__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  color: var(--ink-soft);
  letter-spacing: 0.14em;
  line-height: 1.05;
}
.stat-hex__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-lg);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-feature-settings: "tnum" 1;
}
.stat-hex--accent::before { opacity: 0.85; height: 1.5px; }
.stat-hex--accent .stat-hex__value { color: var(--uv); }
.stat-hex--hero {
  min-width: 6.5em;
  padding: 0.5em 1.4em 0.55em;
}
.stat-hex--hero::before { opacity: 1; height: 2px; left: 25%; right: 25%; box-shadow: 0 0 10px var(--uv); }
.stat-hex--hero .stat-hex__value {
  font-size: var(--t-lg);
  font-weight: 600;
}
[data-theme="dark"] .stat-hex {
  background: var(--bg-soft);
  border-color: var(--rule-color);
}

/* =================================================================
   Aroma Pull-Quote — Sommelier-Note als zentrierte Pull-Quote
   mit großem Bricolage-„«"-Anführungszeichen.
   ================================================================= */
.aroma-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem);
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  max-width: 42ch;
  margin: var(--s-7) auto;
  padding: var(--s-4) var(--s-4) 0;
  position: relative;
}
/* Caption-Eyebrow oben mit dezenten UV-Strichen links + rechts.
   Ersetzt das übergroße «-Mark — diskreter, aber klar markiert. */
.aroma-pull__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3) 0;
  font-weight: 500;
}
.aroma-pull__caption::before,
.aroma-pull__caption::after {
  content: "";
  width: 1.5em;
  height: 1px;
  background: var(--uv);
  box-shadow: 0 0 4px var(--uv);
  opacity: 0.7;
}
.aroma-pull__text { display: block; }
/* Fallback: ehemalige Mark-Klasse ausblenden, falls noch im HTML */
.aroma-pull__mark { display: none; }

/* =================================================================
   Strain-Goals: Top-Treffer pro Wirkungsziel — Card-Grid
   ================================================================= */
.strain-goals--cards {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s-3);
}
.strain-goals__card {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--bg-soft);
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  position: relative;
}
.strain-goals__variant-link {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.strain-goals__variant-link::after {
  /* Klick-Layer über die ganze Card, ohne Terp-Pills zu blockieren */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
}
.strain-goals__card > .strain-goals__terps,
.strain-goals__card > .strain-goals__terps a {
  /* Terp-Pills bleiben eigenständig klickbar */
  position: relative;
  z-index: 1;
}
.strain-goals__card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
}
.strain-goals__goal {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.strain-goals__score {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--uv);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.strain-goals__sub {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0;
}
.strain-goals__variant {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  margin-top: var(--s-1);
  letter-spacing: -0.005em;
}
.strain-goals__terps {
  display: flex; flex-wrap: wrap; gap: 0.3em;
  margin-top: var(--s-1);
}
.strain-goals__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}
.strain-goals__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-base);
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.strain-goals__price-from {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-soft); letter-spacing: 0.08em;
  margin-right: 0.3em; text-transform: uppercase;
}
.strain-goals__price .uv { color: var(--uv); }
.strain-goals__cta {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--uv);
  transition: letter-spacing var(--duration-mid) var(--ease-out);
}
.strain-goals__card:hover .strain-goals__cta { letter-spacing: 0.14em; }
.strain-goals__hint {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: var(--t-sm);
  margin-top: var(--s-3);
}

/* =================================================================
   Offers-Stack: Verfügbarkeitstabelle gruppiert nach Variante.
   Kopfzeile pro Variante (Name, Hersteller, THC, Top-Ziel, ab-Preis),
   Plattform-Subzeilen darunter. Vergriffene in collapsible <details>.
   ================================================================= */
.offers-stack {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.offers-variant {
  border: 1px solid var(--ink-faint);
  border-radius: 6px;
  background: var(--bg-card);
  overflow: hidden;
  scroll-margin-top: var(--s-5);
}
.offers-variant__head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto auto;
  gap: var(--s-3) var(--s-4);
  align-items: baseline;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--ink-faint);
}
.offers-variant__title {
  display: flex; flex-direction: column; gap: 0.15em;
  min-width: 0;
}
.offers-variant__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.offers-variant__manuf {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.offers-variant__thc {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.04em;
  align-self: center;
  white-space: nowrap;
}
.offers-variant__thc-label {
  font-size: var(--t-xs); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-right: 0.3em;
}
.offers-variant__top-goal {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--uv);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: center;
  white-space: nowrap;
  padding: 0.25em 0.6em;
  border: 1px solid var(--uv);
  border-radius: 3px;
}
.offers-variant__top-goal--empty {
  color: var(--ink-faint); border-color: var(--rule-soft);
}
.offers-variant__from {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  text-align: right;
  align-self: center;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}
.offers-variant__from-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.3em;
  font-weight: 400;
}
.offers-variant__from .uv { color: var(--uv); }
.offers-variant__rows { list-style: none; padding: 0; margin: 0; }
.offers-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 0.55em var(--s-4);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-sm);
}
.offers-row:first-child { border-top: 0; }
.offers-row__platform a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-soft); padding-bottom: 1px;
}
.offers-row__platform a:hover { border-color: var(--uv); }
.offers-row__price {
  font-family: var(--font-display);
  font-weight: 500;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.offers-row__price--cheapest { color: var(--uv); font-weight: 600; }
.offers-row__status {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.offers-row__status--ok { color: var(--uv); }

/* Vergriffene Varianten: gemuted, collapsible */
.offers-variant--stale .offers-variant__head { opacity: 0.55; }
.offers-variant--stale .offers-variant__name { font-weight: 400; }

.offers-stale-wrap { margin-top: var(--s-4); }
.offers-stale-wrap > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: var(--s-2) var(--s-4);
  border: 1px dashed var(--ink-faint); border-radius: 6px;
  transition: color var(--duration-quick), border-style var(--duration-quick);
}
.offers-stale-wrap > summary::-webkit-details-marker { display: none; }
.offers-stale-wrap > summary::before {
  content: "+"; font-size: 1.4em; line-height: 0.5;
  transition: transform var(--duration-quick);
  display: inline-block;
}
.offers-stale-wrap[open] > summary::before { content: "−"; }
.offers-stale-wrap > summary:hover { color: var(--ink); border-style: solid; }
.offers-stale-wrap[open] > summary { margin-bottom: var(--s-3); }
.offers-stale-wrap .offers-stack { margin-top: 0; }

@media (max-width: 720px) {
  .offers-variant__head {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
  .offers-variant__from { text-align: left; }
  .offers-variant__top-goal { align-self: flex-start; }
  .offers-row { grid-template-columns: 1fr auto; }
  .offers-row__status { grid-column: 2; }
}

/* =================================================================
   Terpene Filter Section (between filterbar and strain list)
   ================================================================= */

.terp-filter {
  margin: var(--s-3) 0 var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-soft);
  border-radius: 6px;
  border: 1px solid var(--rule-soft);
}
.terp-filter > summary.terp-filter__toggle {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  padding: 0;
  margin: 0;
  user-select: none;
}
.terp-filter > summary.terp-filter__toggle::-webkit-details-marker { display: none; }
.terp-filter > summary.terp-filter__toggle::before { content: "+ "; }
.terp-filter[open] > summary.terp-filter__toggle::before { content: "− "; }
.terp-filter[open] > summary.terp-filter__toggle { margin-bottom: var(--s-3); }
/* Auf Desktop ist der <details> per JS immer offen — Summary-Toggle dort
   verstecken (sonst doppelter Header neben dem Eyebrow). Auf Mobile bleibt
   das Summary sichtbar als Aufklapp-Trigger. */
@media (min-width: 720px) {
  .terp-filter > summary.terp-filter__toggle { display: none; }
}
.terp-filter__active-count {
  margin-left: 0.4em;
  color: var(--uv);
  font-feature-settings: "tnum" 1;
}
.terp-filter__active-count.is-empty { display: none; }

.terp-filter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.terp-filter__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.terp-filter__match {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  overflow: hidden;
}
.terp-filter__match button {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  padding: 0.3em 0.9em;
  cursor: pointer;
  color: var(--ink-soft);
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.terp-filter__match button + button {
  border-left: 1px solid var(--rule-soft);
}
.terp-filter__match button:hover { color: var(--ink); }
.terp-filter__match button.is-active {
  background: color-mix(in oklab, var(--bg-card) 60%, var(--uv) 40%);
  color: var(--ink);
}
/* Exclude-Button hat eigene Active-Tönung (Bernstein) — semantisch invers */
.terp-filter__match button[data-mode="exclude"].is-active {
  background: color-mix(in oklab, var(--bg-card) 60%, var(--warn-glow) 40%);
}

.terp-filter__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.terp-filter__rare {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--rule-soft);
}
.terp-filter__rare summary {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.terp-filter__rare summary::-webkit-details-marker { display: none; }
.terp-filter__rare summary::before { content: "+ "; }
.terp-filter__rare[open] summary::before { content: "− "; }
.terp-filter__rare[open] summary { margin-bottom: var(--s-2); }

.terp-filter__hint {
  margin: var(--s-3) 0 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--warn-glow);
}
.terp-filter__hint.is-hidden { display: none; }
.terp-filter__hint strong { color: var(--ink); font-weight: 600; }