/* rackl-produktfinder.css — Styles zu assets/js/rackl-produktfinder.js */

.rpf {
  --rpf-green: #5FBF49;
  --rpf-green-dark: #4b8b22;
  --rpf-green-soft: rgba(95, 191, 73, .12);
  --rpf-ink: #07071A;
  --rpf-text: #1a1a1a;
  --rpf-muted: #5c6166;
  --rpf-line: #e3e6e8;
  --rpf-icon: #b3b3b3;
  --rpf-bg: #fff;
  --rpf-zebra: #f7f8f8;
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 48px;
  padding: 28px;
  font-family: "IBM Plex Sans", sans-serif;
  color: var(--rpf-text);
  text-align: left;
  background: var(--rpf-bg);
  border: 1px solid var(--rpf-line);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(7, 7, 26, .10);
}
.rpf *, .rpf *::before, .rpf *::after { box-sizing: border-box; }
.rpf [hidden] { display: none !important; }

.rpf__head { margin: 0 0 16px; }
.rpf__title { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--rpf-ink); line-height: 1.2; }
.rpf__sub { margin: 4px 0 0; font-size: .95rem; color: var(--rpf-muted); }

/* ---------- Produkttyp-Kacheln ---------- */
.rpf-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}
.rpf-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  font: inherit;
  color: var(--rpf-ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--rpf-line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.rpf-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 110px;
  color: var(--rpf-icon);
  transition: color .2s, transform .25s;
}
.rpf-tile__icon svg { width: 62%; height: 62%; }
.rpf-tile__label { font-weight: 600; font-size: .98rem; text-align: center; line-height: 1.25; }
.rpf-tile__count { font-size: .8rem; color: var(--rpf-muted); }
.rpf-tile:hover { border-color: var(--rpf-green); box-shadow: 0 8px 22px rgba(7, 7, 26, .08); transform: translateY(-2px); }
.rpf-tile:hover .rpf-tile__icon { color: #9a9a9a; transform: scale(1.04); }
.rpf-tile:focus-visible { outline: 3px solid rgba(95, 191, 73, .45); outline-offset: 2px; }
.rpf-tile.is-active { border: 2px solid var(--rpf-green); background: var(--rpf-green-soft); padding: 13px 9px 11px; }
.rpf-tile.is-active .rpf-tile__icon { color: var(--rpf-green); }
.rpf-tile.is-active .rpf-tile__count { color: var(--rpf-green-dark); font-weight: 600; }
.rpf-tile--ask { border-style: dashed; }
.rpf-tile--ask .rpf-tile__icon { color: var(--rpf-green); }
.rpf-tile--ask .rpf-tile__count { color: var(--rpf-green-dark); font-weight: 600; }

/* ---------- Filter ---------- */
.rpf-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  margin: 0 0 18px;
  background: var(--rpf-zebra);
  border-radius: 10px;
}
.rpf-panel:empty { display: none; }
.rpf-ranges { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.rpf-range { margin: 0; padding: 0; border: 0; min-width: 0; }
.rpf-range__legend { padding: 0; margin: 0 0 8px; font-size: .95rem; font-weight: 600; color: var(--rpf-ink); }
.rpf-range__row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.rpf-range__tag { width: 32px; font-size: .85rem; font-weight: 700; color: var(--rpf-muted); }
.rpf-range__unit { font-size: .85rem; color: var(--rpf-muted); }
.rpf-input {
  height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: .95rem;
  color: var(--rpf-text);
  background: #fff;
  border: 1px solid #cdd2d6;
  border-radius: 8px;
  transition: border-color .2s, box-shadow .2s;
}
.rpf-input:focus, .rpf-select:focus { outline: none; border-color: var(--rpf-green); box-shadow: 0 0 0 3px rgba(95, 191, 73, .25); }
.rpf-range__input { width: 130px; }

.rpf-chipgroups { display: flex; flex-direction: column; gap: 10px; }
.rpf-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rpf-chips__label { min-width: 90px; font-size: .95rem; font-weight: 600; color: var(--rpf-ink); }
.rpf-chip {
  padding: 7px 14px;
  font: inherit;
  font-size: .88rem;
  color: var(--rpf-text);
  background: #fff;
  border: 1px solid #cdd2d6;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}
.rpf-chip:hover { border-color: var(--rpf-green); }
.rpf-chip[aria-pressed="true"] { color: #fff; background: var(--rpf-green); border-color: var(--rpf-green); }
.rpf-specs { margin: 0; font-size: .88rem; color: var(--rpf-muted); }

/* ---------- Werkzeugleiste ---------- */
.rpf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 12px; scroll-margin-top: 110px; }
.rpf-size { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--rpf-muted); }
.rpf-select {
  height: 36px;
  padding: 0 8px;
  font: inherit;
  font-size: .95rem;
  background: #fff;
  border: 1px solid #cdd2d6;
  border-radius: 8px;
}
.rpf-count { font-size: .9rem; font-weight: 600; color: var(--rpf-green-dark); }
.rpf-search { margin-left: auto; width: 260px; max-width: 100%; }
.rpf-reset {
  height: 40px;
  padding: 0 14px;
  font: inherit;
  font-size: .9rem;
  color: var(--rpf-ink);
  background: transparent;
  border: 1px solid #cdd2d6;
  border-radius: 8px;
  cursor: pointer;
}
.rpf-reset:hover { border-color: var(--rpf-green); color: var(--rpf-green-dark); }

/* ---------- Tabelle ---------- */
.rpf-tablewrap { overflow-x: auto; border: 1px solid var(--rpf-line); border-radius: 10px; }
.rpf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.rpf-table th, .rpf-table td { padding: 10px 14px; border-bottom: 1px solid var(--rpf-line); text-align: left; white-space: nowrap; }
.rpf-table thead th { position: sticky; top: 0; z-index: 1; padding: 0; background: #fff; border-bottom: 2px solid var(--rpf-ink); }
.rpf-table tbody tr:nth-child(even) { background: var(--rpf-zebra); }
.rpf-table tbody tr:hover { background: var(--rpf-green-soft); }
.rpf-table tbody tr:last-child td { border-bottom: 0; }
.rpf-num { text-align: right !important; }

.rpf-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--rpf-ink);
  text-align: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.rpf-num .rpf-sort { justify-content: flex-end; }
.rpf-sort small { display: block; font-weight: 400; color: var(--rpf-muted); }
.rpf-sort__label { display: flex; flex-direction: column; line-height: 1.2; }
.rpf-sort__arrows { flex: none; font-size: .75rem; opacity: .35; }
.rpf-sort__arrows::before { content: "\25B4\25BE"; letter-spacing: -1px; }
.rpf-sort:hover .rpf-sort__arrows { opacity: .7; }
th.is-sorted .rpf-sort__arrows { opacity: 1; color: var(--rpf-green); }
th.is-sorted .rpf-sort__arrows::before { content: "\25B4"; }
th.is-sorted.is-desc .rpf-sort__arrows::before { content: "\25BE"; }

.rpf-formcell { display: inline-flex; align-items: center; gap: 8px; }
.rpf-formcell svg { width: 18px; height: 18px; color: var(--rpf-icon); }
.rpf-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: .82rem;
  color: var(--rpf-ink);
  background: #eef1f2;
  border-radius: 999px;
}

.rpf-actcol { width: 1%; text-align: right !important; }
.rpf-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--rpf-green-dark);
  background: #fff;
  border: 1px solid var(--rpf-green);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s;
}
.rpf-add:hover { color: #fff; background: var(--rpf-green); }
.rpf-add.is-on { color: #fff; background: var(--rpf-green); }
.rpf-add.is-on:hover { background: var(--rpf-green-dark); border-color: var(--rpf-green-dark); }

/* ---------- Ansicht-Umschalter, CSV, Info ---------- */
.rpf-views { display: inline-flex; padding: 3px; background: var(--rpf-zebra); border: 1px solid var(--rpf-line); border-radius: 9px; }
.rpf-view {
  padding: 6px 14px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--rpf-muted);
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}
.rpf-view[aria-pressed="true"] { color: #fff; background: var(--rpf-ink); }
.rpf-csv { white-space: nowrap; }
.rpf-info {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: .85rem;
  line-height: 1.5;
  color: #2f4a29;
  background: rgba(95, 191, 73, .09);
  border-left: 3px solid var(--rpf-green);
  border-radius: 0 8px 8px 0;
}

/* ---------- Profilskizze, Gewicht-Heat, vorgemerkte Zeile ---------- */
.rpf-profcol { width: 1%; padding: 4px 6px 4px 14px !important; }
.rpf-thlabel { display: block; padding: 12px 0; font-size: .85rem; font-weight: 700; color: var(--rpf-ink); }
.rpf-prof { display: block; width: 60px; height: 40px; color: #9aa1a6; }
.rpf-table tbody tr:hover .rpf-prof, .rpf-table tbody tr.is-on .rpf-prof { color: var(--rpf-green); }
.rpf-heat__val {
  display: inline-block;
  min-width: 64px;
  padding: 4px 8px;
  text-align: right;
  background: var(--heat, transparent);
  border-radius: 5px;
}
.rpf-heat__val.is-strong { font-weight: 700; color: #1d3d16; }
/* Legierungsspalten: Punkt = Legierung in dieser Abmessung ab Lager */
.rpf-table th.rpf-alloycol, .rpf-table td.rpf-alloycol { text-align: center !important; }
.rpf-alloycol .rpf-sort { justify-content: center; text-align: center; }
.rpf-alloycol .rpf-sort__label { align-items: center; }
.rpf-alloymark { display: inline-block; width: 12px; height: 12px; vertical-align: middle; background: var(--rpf-green); border-radius: 50%; }
.rpf-table tbody tr:hover .rpf-alloymark, .rpf-table tbody tr.is-on .rpf-alloymark { background: var(--rpf-green-dark); }
.rpf-table tbody tr.is-on { background: rgba(95, 191, 73, .08); }
.rpf-table tbody tr.is-on td:first-child { box-shadow: inset 4px 0 0 var(--rpf-green); }

/* ---------- Maßmatrix ---------- */
.rpf-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; font-variant-numeric: tabular-nums; }
.rpf-matrix th, .rpf-matrix td { padding: 4px; text-align: center; border-bottom: 1px solid var(--rpf-line); }
.rpf-matrix thead th { position: sticky; top: 0; z-index: 2; padding: 10px 4px; background: var(--rpf-ink); color: #fff; border-bottom: 0; }
.rpf-matrix__corner { position: sticky; left: 0; z-index: 3 !important; min-width: 120px; text-align: left !important; padding: 8px 12px !important; }
.rpf-matrix__ax { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .75); }
.rpf-matrix__ax--col { text-align: right; }
.rpf-matrix__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  font-weight: 700;
  color: var(--rpf-ink);
  background: #fff;
  border-radius: 999px;
}
.rpf-matrix__row {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 4px 12px !important;
  text-align: left !important;
  font-weight: 700;
  white-space: nowrap;
  color: var(--rpf-ink);
  background: #fff;
  box-shadow: inset -1px 0 0 var(--rpf-line), inset 3px 0 0 var(--rpf-green);
}
.rpf-matrix tbody tr:nth-child(even) td, .rpf-matrix tbody tr:nth-child(even) .rpf-matrix__row { background: var(--rpf-zebra); }
.rpf-matrix tbody tr:hover td, .rpf-matrix tbody tr:hover .rpf-matrix__row { background: #eef6ec; }
.rpf-matrix td { min-width: 58px; }
.rpf-dot {
  width: 100%;
  min-width: 52px;
  height: 32px;
  padding: 0 6px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: #1d3d16;
  background: var(--heat, rgba(95, 191, 73, .2));
  border: 1px solid rgba(95, 191, 73, .45);
  border-radius: 6px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.rpf-dot:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(7, 7, 26, .15); border-color: var(--rpf-green); }
.rpf-dot.is-on { color: #fff; background: var(--rpf-green-dark); border-color: var(--rpf-green-dark); font-size: 1rem; }
.rpf-empty-note { margin: 0; padding: 26px 14px; text-align: center; color: var(--rpf-muted); }

.rpf-empty td { padding: 26px 14px; text-align: center; white-space: normal; color: var(--rpf-muted); }
.rpf-empty a { font-weight: 600; color: var(--rpf-green-dark); }

.rpf-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Seiten ---------- */
.rpf-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 14px 0 0; }
.rpf-page {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font: inherit;
  font-size: .9rem;
  color: var(--rpf-ink);
  background: #fff;
  border: 1px solid #cdd2d6;
  border-radius: 8px;
  cursor: pointer;
}
.rpf-page:hover:not(:disabled) { border-color: var(--rpf-green); }
.rpf-page:disabled { opacity: .4; cursor: default; }
.rpf-page.is-active { opacity: 1; color: #fff; background: var(--rpf-green); border-color: var(--rpf-green); }

/* ---------- Anfrageliste ---------- */
.rpf-dock {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 900;
  width: min(640px, calc(100% - 32px));
  transform: translateX(-50%);
  font-family: "IBM Plex Sans", sans-serif;
  color: #fff;
  background: #07071A;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(7, 7, 26, .35);
}
.rpf-dock[hidden], .rpf-dock [hidden] { display: none !important; }
.rpf-dock *, .rpf-dock *::before, .rpf-dock *::after { box-sizing: border-box; }
.rpf-dock.is-pulse { animation: rpf-pulse .5s ease; }
@keyframes rpf-pulse { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.03); } 100% { transform: translateX(-50%) scale(1); } }
.rpf-dock__bar { display: flex; align-items: center; gap: 10px; padding: 10px; }
.rpf-dock__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.rpf-dock__chev { transition: transform .2s; }
.rpf-dock.is-open .rpf-dock__chev { transform: rotate(180deg); }
.rpf-dock__send {
  padding: 11px 18px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: #5FBF49;
  border-radius: 8px;
  transition: background .2s;
}
.rpf-dock__send:hover { background: #4b8b22; color: #fff; }
.rpf-dock__panel { max-height: 45vh; overflow-y: auto; padding: 14px 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rpf-dock__hint { margin: 0 0 10px; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.rpf-dock__list { margin: 0; padding: 0 0 12px; list-style: none; }
.rpf-dock__item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.rpf-dock__text { flex: 1; font-size: .88rem; line-height: 1.35; }
.rpf-dock__menge { width: 120px; height: 34px; color: #1a1a1a; border: 0; border-radius: 6px; padding: 0 10px; font: inherit; font-size: .88rem; }
.rpf-dock__remove {
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.rpf-dock__remove:hover { background: rgba(255, 255, 255, .22); }
body.rpf-has-dock { padding-bottom: 84px; }

/* ---------- Übersicht: Werkstoffe, Schritte, Programm-Matrix ---------- */
.rpf--loading { padding: 40px 28px; text-align: center; color: var(--rpf-muted, #5c6166); font-family: "IBM Plex Sans", sans-serif; }
.rpf-step { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rpf-green-dark); }

.rpf-prog { margin: 0 0 22px; }
.rpf-prog__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 8px; }
.rpf-prog__title { font-size: 1.05rem; font-weight: 700; color: var(--rpf-ink); }
.rpf-prog__hint { font-size: .82rem; color: var(--rpf-muted); }
.rpf-prog__col { min-width: 84px; padding: 10px 6px !important; }
.rpf-prog__formicon { display: block; width: 26px; height: 26px; margin: 0 auto 4px; color: #fff; opacity: .85; }
.rpf-prog__formicon svg { width: 100%; height: 100%; }
.rpf-prog__formname { display: block; font-size: .8rem; font-weight: 600; }
.rpf-prog__table td { height: 54px; }
.rpf-prog__table tr.is-active .rpf-matrix__row { box-shadow: inset -1px 0 0 var(--rpf-line), inset 5px 0 0 var(--rpf-green); background: #eef6ec; }
.rpf-bubble {
  width: var(--size, 34px);
  height: var(--size, 34px);
  padding: 0;
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  background: var(--heat, var(--rpf-green));
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.rpf-bubble:hover { transform: scale(1.12); box-shadow: 0 6px 16px rgba(7, 7, 26, .2); }
.rpf-bubble.is-on { background: var(--rpf-ink); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rpf-green); }
.rpf-matlink { font-weight: 700; color: var(--rpf-green-dark); text-decoration: none; white-space: nowrap; }
.rpf-matlink:hover { text-decoration: underline; }

/* ---------- Werkstoffe als Periodensystem ---------- */
.rpf-pts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 10px; }
.rpf-pt {
  --pt-bg: #eef1f3;
  --pt-line: #b9c3ca;
  --pt-ink: #1f2a33;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  justify-items: center;
  aspect-ratio: 1 / 1.08;
  padding: 10px 10px 0;
  font: inherit;
  color: var(--pt-ink);
  text-align: center;
  background: var(--pt-bg);
  border: 2px solid var(--pt-line);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.rpf-pt--element { --pt-bg: #e4edf6; --pt-line: #8fa9c2; --pt-ink: #15324d; }
.rpf-pt--legierung { --pt-bg: #f6ead2; --pt-line: #c9a35a; --pt-ink: #4a3410; }
.rpf-pt--alle { --pt-bg: #f3f5f6; --pt-line: #c7cdd2; --pt-ink: #07071A; }
.rpf-pt__no { justify-self: start; font-size: .8rem; font-weight: 700; line-height: 1; }
.rpf-pt__sym { align-self: center; font-size: 2.9rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.rpf-pt__name { font-size: .92rem; font-weight: 600; line-height: 1.2; }
.rpf-pt__foot { margin: 2px 0 8px; font-size: .74rem; opacity: .75; font-variant-numeric: tabular-nums; }
.rpf-pt__count {
  justify-self: stretch;
  margin: 0 -10px;
  padding: 5px 4px;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  background: var(--pt-line);
}
.rpf-pt:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(7, 7, 26, .12); }
.rpf-pt:focus-visible { outline: 3px solid rgba(95, 191, 73, .5); outline-offset: 2px; }
.rpf-pt.is-active { border-color: var(--rpf-green); box-shadow: 0 0 0 3px rgba(95, 191, 73, .35); }
.rpf-pt.is-active .rpf-pt__count { background: var(--rpf-green); }
.rpf-pt.is-active::after {
  content: "\2713";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--rpf-green-dark);
}
.rpf-pt.is-empty { opacity: .45; filter: grayscale(.5); }
.rpf-pt.is-empty:hover { opacity: .8; filter: none; }
.rpf-pt.is-empty .rpf-pt__count { font-weight: 600; }
.rpf-tile.is-empty { opacity: .45; }
.rpf-tile.is-empty:hover { opacity: .85; }

/* Hinweis, wenn eine Auswahl die andere zurückgesetzt hat */
.rpf-note {
  margin: -8px 0 18px;
  padding: 10px 14px;
  font-size: .9rem;
  color: #5a4300;
  background: #fff6d6;
  border-left: 3px solid #e0b100;
  border-radius: 0 8px 8px 0;
}
.rpf-note.is-in { animation: rpf-note-in .35s ease; }
@keyframes rpf-note-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.rpf-pt-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 22px; font-size: .8rem; color: var(--rpf-muted); }
.rpf-pt-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rpf-pt-legend__key { display: inline-block; width: 14px; height: 14px; background: var(--pt-bg); border: 2px solid var(--pt-line); border-radius: 2px; }

/* kleines Element-Kästchen in Tabelle und Matrix */
.rpf-el {
  --pt-bg: #e4edf6;
  --pt-line: #8fa9c2;
  --pt-ink: #15324d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--pt-ink);
  background: var(--pt-bg);
  border: 1.5px solid var(--pt-line);
  border-radius: 3px;
  vertical-align: middle;
}
.rpf-el--legierung { --pt-bg: #f6ead2; --pt-line: #c9a35a; --pt-ink: #4a3410; }
.rpf-matrix__row .rpf-el { margin-right: 10px; }

.rpf-prog__all { padding: 0; font: inherit; font-weight: 700; color: var(--rpf-green-dark); background: none; border: 0; cursor: pointer; text-decoration: underline; }

/* ---------- Aktive Auswahl ---------- */
.rpf-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.rpf-active__label { font-size: .85rem; font-weight: 600; color: var(--rpf-muted); }
.rpf-active__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--rpf-ink);
  background: #fff;
  border: 1px solid var(--rpf-green);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.rpf-active__chip:hover { background: var(--rpf-green-soft); }
.rpf-active__chip .rpf-el { min-width: 22px; height: 22px; font-size: .7rem; }
.rpf-active__icon { display: inline-flex; width: 18px; height: 18px; color: var(--rpf-green); }
.rpf-active__icon svg { width: 100%; height: 100%; }
.rpf-active__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: .95rem; color: #fff; background: var(--rpf-green); border-radius: 50%; }
.rpf-active__n { padding: 3px 10px; font-size: .82rem; font-weight: 700; color: #fff; background: var(--rpf-ink); border-radius: 999px; }
.rpf-active__clear { padding: 4px 6px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--rpf-muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.rpf-active__clear:hover { color: var(--rpf-ink); }

/* ---------- Mobil: Zeilen als Karten ---------- */
@media (max-width: 760px) {
  .rpf { padding: 18px 14px; border-radius: 10px; }
  .rpf__title { font-size: 1.3rem; }
  .rpf-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rpf-tile { padding: 10px 4px 8px; }
  .rpf-tile.is-active { padding: 9px 3px 7px; }
  .rpf-tile__label { font-size: .82rem; }
  .rpf-tile__count { font-size: .72rem; }
  .rpf-panel { padding: 14px; }
  .rpf-ranges { gap: 14px 20px; }
  .rpf-range__input { width: 96px; }
  .rpf-search { width: 100%; margin-left: 0; order: 5; }
  .rpf-reset { order: 6; }

  .rpf-tablewrap { overflow: visible; border: 0; }
  .rpf-matrixwrap { overflow-x: auto; border: 1px solid var(--rpf-line); }
  .rpf-matrix__corner { min-width: 96px; }
  .rpf-views { order: 4; }
  .rpf-csv { display: none; }
  .rpf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rpf-table, .rpf-table tbody, .rpf-table tr, .rpf-table td { display: block; width: 100%; }
  .rpf-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    padding: 12px 14px;
    margin: 0 0 10px;
    background: #fff !important;
    border: 1px solid var(--rpf-line);
    border-radius: 10px;
  }
  .rpf-table td { padding: 4px 0; border: 0; white-space: normal; text-align: left !important; }
  .rpf-table td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--rpf-muted); }
  .rpf-table td.rpf-alloycol { text-align: left !important; }
  .rpf-table td.rpf-alloycol.is-none { display: none; }
  .rpf-table td.rpf-actcol { grid-column: 1 / -1; width: 100%; padding-top: 8px; }
  .rpf-table td.rpf-actcol::before { content: none; }
  .rpf-badge { border-radius: 6px; }
  .rpf-add { width: 100%; justify-content: center; padding: 10px 12px; }
  .rpf-empty { display: block !important; }
  .rpf-pager { justify-content: center; }
  .rpf-dock { bottom: 10px; }
  .rpf-dock__send { padding: 10px 14px; font-size: .9rem; }
  .rpf-dock__toggle { font-size: .88rem; }
  .rpf-dock__menge { width: 90px; }
  .rpf-pts { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rpf-pt { aspect-ratio: auto; padding: 6px 6px 0; }
  .rpf-pt__sym { font-size: 2rem; }
  .rpf-pt__name { font-size: .78rem; }
  .rpf-pt__foot { font-size: .64rem; margin-bottom: 4px; }
  .rpf-pt__count { margin: 0 -6px; font-size: .68rem; }
}