/* range-control.css — Optik zu js/range-control.js (Doppelregler + Felder + Schnellwahl) und den Chips .cf-chip.
   Herausgelöst aus catalog-neu.css (2026-10-19), damit Katalog und Startseite (Lernwunsch) dieselbe Quelle laden.
   Lädt NACH catalog-neu.css. */
.cf-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; font: inherit; font-size: var(--cat-small-fs); font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--neutral-400); background: var(--neutral-0, #ffffff); color: var(--text-primary); cursor: pointer; }
.cf-chip:hover { border-color: var(--text-primary); }
.cf-chip[aria-pressed="true"], .cf-chip[aria-checked="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--neutral-0, #ffffff); }
.cf-chip__sub { font-size: 11px; font-weight: 500; opacity: 0.8; }
.cpr { display: flex; flex-direction: column; gap: var(--space-3); }
.cpr__value { font-size: var(--cat-name-fs); font-weight: 700; }
.cpr__track { position: relative; height: 28px; }
.cpr__track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--neutral-300); }
.cpr__fill { position: absolute; top: 12px; height: 4px; border-radius: 2px; background: var(--brand-orange); }
.cpr__range { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.cpr__range::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--neutral-0, #ffffff); border: 2px solid var(--brand-orange); box-shadow: 0 1px 4px rgba(6, 15, 28, 0.25); cursor: grab; }
.cpr__range::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--neutral-0, #ffffff); border: 2px solid var(--brand-orange); cursor: grab; }
.cpr__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.cpr__fields { display: flex; align-items: flex-end; gap: var(--space-2); }
.cpr__field { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: var(--cat-small-fs); color: var(--text-secondary); }
.cpr__field-box { display: flex; align-items: center; gap: 4px; border: 1px solid var(--neutral-400); border-radius: 10px; padding: 6px 10px; background: var(--neutral-0, #ffffff); }
.cpr__field-box:focus-within { border-color: var(--text-primary); }
.cpr__field-box input { width: 100%; border: 0; font: inherit; font-size: var(--cat-text-fs); color: var(--text-primary); background: none; outline: none; }
.cpr__cur { color: var(--text-secondary); }
.cpr__dash { padding-bottom: 10px; }
.cpr__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }