/* Vijf Elementen — tool-pagina in TTBB-huisstijl.
 * Transparante vlakken zodat de bergen/wolken-ambient doorschijnt (zoals
 * de ervaringen-pagina). Gebruikt de design-tokens uit _variables.css. */

.fe__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}

/* ── Cyclus-toggle ─────────────────────────────────────────────────── */
.fe__cycles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
}

.fe__cycles-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-right: var(--space-1);
}

.fe__cycle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(10, 36, 99, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.4);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.fe__cycle-btn:hover { background: rgba(255, 255, 255, 0.7); }

.fe__cycle-btn--actief {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Actieve knop bij hover: donkere achtergrond behouden zodat de witte tekst
   leesbaar blijft (anders wint de lichte .fe__cycle-btn:hover-achtergrond). */
.fe__cycle-btn--actief:hover {
  background: var(--color-primary);
  filter: brightness(1.12);
}

.fe__swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
}
.fe__swatch--sheng { background: #22c55e; }
.fe__swatch--ke { background: #ef4444; }

/* ── Grid: wiel + detail ───────────────────────────────────────────── */
.fe__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 860px) {
  .fe__grid { grid-template-columns: 1fr; }
}

/* ── Het wiel ──────────────────────────────────────────────────────── */
.fe__wheel {
  position: sticky;
  top: calc(var(--header-height) + var(--space-3));
}
@media (max-width: 860px) {
  .fe__wheel { position: static; }
}

.fe__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.fe__node { cursor: pointer; }

.fe__node circle {
  transition: filter var(--transition-fast), transform var(--transition-fast);
  transform-box: fill-box;
  transform-origin: center;
}
.fe__node:hover circle { filter: brightness(1.06); }

/* Verberg het rechthoekige UA-focus-vierkant op het klikbare <g>. */
.fe__node:focus { outline: none; }

/* Geselecteerd of via toetsenbord gefocust: zachte lift — geen rand, alleen
   een diepteschaduw en een lichte vergroting zodat het element 'zweeft'. */
.fe__node--actief circle,
.fe__node:focus-visible circle {
  transform: scale(1.08);
  filter: drop-shadow(0 7px 15px rgba(10, 36, 99, 0.34));
}

.fe__node-naam {
  fill: #fff;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  dominant-baseline: middle;
  paint-order: stroke;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.fe__node-org {
  fill: rgba(255, 255, 255, 0.92);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  dominant-baseline: middle;
}

/* ── Detailpaneel (transparant, ambient doorheen) ──────────────────── */
.fe__detail {
  border: 1px solid rgba(10, 36, 99, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: transparent;
  min-height: 320px;
}

.fe__detail-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.fe__dot {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.fe__detail-naam {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}

.fe__detail-sub {
  font-size: 0.85rem;
  color: var(--color-text);
}

/* ── Velden ────────────────────────────────────────────────────────── */
.fe__veld-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
}
@media (max-width: 560px) {
  .fe__veld-grid { grid-template-columns: 1fr; }
}

.fe__veld { margin-top: var(--space-1); }

.fe__veld-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.fe__veld-val {
  font-size: 0.9rem;
  color: var(--color-text-strong);
  font-weight: var(--font-weight-medium);
}

/* ── Blokken ───────────────────────────────────────────────────────── */
.fe__block {
  margin-top: var(--space-4);
  border: 1px solid rgba(10, 36, 99, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.fe__block-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.fe__rels { display: grid; gap: var(--space-1); }
.fe__rel {
  font-size: 0.85rem;
  color: var(--color-text-strong);
}
.fe__rel-label { font-weight: var(--font-weight-medium); }
.fe__rel-label--sheng { color: #15803d; }
.fe__rel-label--ke { color: var(--color-secondary); }

.fe__klachten {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text);
}
@media (max-width: 560px) {
  .fe__klachten { grid-template-columns: 1fr; }
}
.fe__klachten li::before {
  content: "· ";
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

/* ── Disclaimer ────────────────────────────────────────────────────── */
.fe__disclaimer {
  margin: var(--space-6) 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(10, 36, 99, 0.08);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  line-height: var(--line-height-loose);
  color: #5b6474;
}

/* ── Tabs (wiel / test) ────────────────────────────────────────────── */
.fe__tabs {
  display: inline-flex;
  gap: 4px;
  margin: var(--space-4) 0 var(--space-4);
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(10, 36, 99, 0.1);
}
.fe__tab {
  border: 0;
  background: transparent;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.fe__tab:hover { color: var(--color-primary); }
.fe__tab--actief {
  background: var(--color-primary);
  color: #fff;
}

/* ── Quiz ──────────────────────────────────────────────────────────── */
.fe__quiz {
  max-width: 640px;
  margin: var(--space-2) auto var(--space-4);
}

.fe__quiz-lead {
  font-size: 0.95rem;
  line-height: var(--line-height-normal);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.fe__quiz-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(10, 36, 99, 0.08);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.fe__quiz-progress-bar {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width var(--transition-normal);
}
.fe__quiz-teller {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.fe__quiz-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4);
}
.fe__quiz-opties {
  display: grid;
  gap: var(--space-2);
}
.fe__quiz-optie {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(10, 36, 99, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.fe__quiz-optie:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

@media (prefers-reduced-motion: reduce) {
  .fe__quiz-optie:hover { transform: none; }
}
.fe__quiz-optie--gekozen {
  border-color: var(--color-primary);
  box-shadow: inset 3px 0 0 0 var(--color-primary);
}
.fe__quiz-terug {
  margin-top: var(--space-4);
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.fe__quiz-terug:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Resultaat ─────────────────────────────────────────────────────── */
.fe__result-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.fe__result-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
.fe__result-naam {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
}
.fe__result-kern {
  font-size: 0.85rem;
  color: var(--color-text);
}
.fe__result-pos {
  font-size: 0.95rem;
  line-height: var(--line-height-normal);
  color: var(--color-text-strong);
  margin: 0 0 var(--space-3);
}
.fe__result-balans {
  font-size: 0.9rem;
  line-height: var(--line-height-normal);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.fe__result-balans strong { color: var(--color-secondary); }

.fe__result-sec {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(10, 36, 99, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.fe__dot--sm { width: 1.1rem; height: 1.1rem; }

.fe__result-scores {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}
.fe__score-rij {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: var(--space-2);
}
.fe__score-naam { font-size: 0.8rem; color: var(--color-text); }
.fe__score-baan {
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(10, 36, 99, 0.06);
  overflow: hidden;
}
.fe__score-vul {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--transition-slow);
}

.fe__result-acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.fe__quiz-opnieuw {
  border: 0;
  background: none;
  padding: 0;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
.fe__quiz-opnieuw:hover { color: var(--color-primary); text-decoration: underline; }

/* ── Resultaat: advies (do's / let op) ─────────────────────────────── */
.fe__result-advies { margin: var(--space-2) 0 var(--space-5); }
.fe__result-advies-titel {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}
.fe__result-advies-lead {
  font-size: 0.78rem;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.fe__advies-kolommen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 560px) {
  .fe__advies-kolommen { grid-template-columns: 1fr; }
}
.fe__advies-kolom {
  border: 1px solid rgba(10, 36, 99, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.4);
}
.fe__advies-kolom--do { border-left: 3px solid #15803d; }
.fe__advies-kolom--dont { border-left: 3px solid var(--color-secondary); }
.fe__advies-kop {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}
.fe__advies-kolom--do .fe__advies-kop { color: #15803d; }
.fe__advies-kolom--dont .fe__advies-kop { color: var(--color-secondary); }
.fe__advies-kolom ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.fe__advies-kolom li {
  font-size: 0.85rem;
  line-height: var(--line-height-normal);
  color: var(--color-text-strong);
  padding-left: 1.1em;
  position: relative;
}
.fe__advies-kolom--do li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #15803d;
  font-weight: var(--font-weight-bold);
}
.fe__advies-kolom--dont li::before {
  content: "•";
  position: absolute;
  left: 0.15em;
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}

/* ── Seizoensverdieping ──────────────────────────────────────────── */

/* Banner: welk seizoen/element is nu actief */
.fe__seizoen-banner {
  background: var(--color-primary-light, #eef6f1);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.fe__seizoen-banner-tekst {
  margin: 0;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-strong);
}
.fe__seizoen-banner-tip {
  margin: var(--space-1) 0 0;
  font-size: 0.95rem;
  color: var(--color-text);
}

/* Live seizoens-accent op de wiel-node */
.fe__node-seizoenring {
  stroke-width: 2;
  stroke-dasharray: 4 5;
  opacity: 0.85;
  animation: fe-seizoen-draai 30s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes fe-seizoen-draai {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fe__node-seizoenring { animation: none; }
}
.fe__node-nu {
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-text-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Inhoudstabs in het detailpaneel */
.fe__archetype {
  margin: var(--space-2) 0 var(--space-3);
  font-style: italic;
  color: var(--color-text);
  line-height: var(--line-height-normal);
}
.fe__dtabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.fe__dtab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
}
.fe__dtab:hover { color: var(--color-text-strong); }
.fe__dtab--actief {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold, 600);
  border-bottom-color: var(--color-primary);
}
.fe__dtab-inhoud p { margin: 0 0 var(--space-3); line-height: var(--line-height-normal); }
.fe__dtab-inhoud ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.fe__dtab-inhoud li { margin-bottom: var(--space-1); line-height: var(--line-height-normal); }

/* Subtiele kennismakings-CTA onder het detailpaneel */
.fe__detail-cta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: 0.92rem;
  color: var(--color-text);
}
.fe__detail-cta a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold, 600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Seizoenswijzer: vijf kaarten onder de tool */
.fe__wijzer { margin: var(--space-7, 3rem) 0 var(--space-5); }
.fe__wijzer-titel { margin: 0 0 var(--space-2); }
.fe__wijzer-intro { margin: 0 0 var(--space-4); max-width: 60ch; color: var(--color-text); }
.fe__wijzer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}
/* Zelfde doorzichtige kaartstijl als /tarieven/ (behandelingen-list--framed):
   de bergen-achtergrond blijft zichtbaar door de kaarten heen. */
.fe__wijzer-kaart {
  position: relative;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3) var(--space-3) var(--space-3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.fe__wijzer-kaart:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-hover, 0 8px 20px rgba(0, 0, 0, 0.08));
}
.fe__wijzer-kaart--actief {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.fe__wijzer-nu {
  position: absolute;
  top: calc(-1 * var(--space-2));
  right: var(--space-3);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 10px;
}
.fe__wijzer-kop { margin: 0 0 var(--space-2); font-size: 1rem; }
.fe__wijzer-tekst { margin: 0; font-size: 0.92rem; line-height: var(--line-height-normal); color: var(--color-text); }