/* ── Factsheet-opmaak (eerste ronde) ─────────────────────────────────────
   Gedeelde stijlen voor de techniek-factsheets bodemlussen.php en pvt.php:
   doorsnede-figuur met stappen in "Hoe werkt het?" plus de paginaspecifieke
   figuurdelen onderaan. Kleuren uitsluitend via huisstijl-variabelen/color-mix.
   Wordt per factsheet geladen via een <link> direct na de header-include. */

/* ═══ Gedeeld ═══════════════════════════════════════════════════════════ */

/* Hero-icoon: zelfde techniek-icoon als op de eerste-ronde pagina */
.factsheet-hero-icoon {
  display: block;
  font-size: 48px;
  line-height: 1;
  color: var(--kleur-primair);
  margin-bottom: 12px;
}

.factsheet-werking { display: grid; gap: 32px; margin-top: 24px; }
@media (min-width: 1024px) {
  .factsheet-werking {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    gap: 48px;
    align-items: start;
  }
}

.factsheet-figuur {
  margin: 0 auto;
  width: 100%;
  max-width: 540px;
  background-color: var(--kleur-wit);
  border-radius: 8px;
  padding: 16px 16px 8px;
  box-shadow: 0 2px 12px rgba(36, 34, 30, 0.08);
  /* Lauw-oranje voor bronwater dat warmte meeneemt: zelfde warmte-familie als
     de steunkleur van het hete cv-water, maar duidelijk lichter (= lauw).
     Bewust geen groen of blauw: dat leest als koud water, terwijl deze stroom
     juist de geoogste warmte naar de warmtepomp brengt. 55% i.p.v. de 45%-tint
     van "Overweeg" zodat de 4px-stroomlijn op de lichte vlakken leesbaar blijft. */
  --bl-lauw: color-mix(in srgb, var(--kleur-steun) 55%, var(--kleur-wit));
}
@media (min-width: 1024px) {
  .factsheet-figuur { margin: 0; }
}
.factsheet-figuur svg { display: block; width: 100%; height: auto; }
.factsheet-figuur figcaption {
  padding: 10px 4px 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--kleur-donkerblauw);
  opacity: 0.8;
}

/* Tekst in de doorsnede */
.factsheet-figuur text {
  font-family: var(--font-basis);
  fill: var(--kleur-donkerblauw);
}
.bl-label--klein { font-size: 15px; opacity: 0.65; }
.bl-label--titel { font-size: 16px; font-weight: 600; }
.bl-label--knoop { font-size: 13px; opacity: 0.8; }

/* Vlakken */
.bl-lucht   { fill: color-mix(in srgb, var(--kleur-accent) 6%, var(--kleur-wit)); }
.bl-zon     { fill: var(--kleur-accent); }
.bl-grond-1 { fill: color-mix(in srgb, var(--kleur-lichtgrijs) 12%, var(--kleur-wit)); }
.bl-grond-2 { fill: color-mix(in srgb, var(--kleur-lichtgrijs) 18%, var(--kleur-wit)); }
.bl-grond-3 { fill: color-mix(in srgb, var(--kleur-lichtgrijs) 26%, var(--kleur-wit)); }
.bl-grond-4 { fill: color-mix(in srgb, var(--kleur-lichtgrijs) 34%, var(--kleur-wit)); }

/* Lijnen */
.bl-schets { fill: var(--kleur-wit); stroke: var(--kleur-donkerblauw); stroke-width: 3; stroke-linejoin: round; }
.bl-fijn   { fill: none; stroke: color-mix(in srgb, var(--kleur-lichtgrijs) 70%, var(--kleur-wit)); stroke-width: 3; }
.bl-laag   { fill: none; stroke: color-mix(in srgb, var(--kleur-donkerblauw) 20%, var(--kleur-wit)); stroke-width: 2; stroke-dasharray: 3 10; }
.bl-buis   { fill: none; stroke: color-mix(in srgb, var(--kleur-lichtgrijs) 55%, var(--kleur-wit)); stroke-linejoin: round; }
.bl-gras   { fill: none; stroke: var(--kleur-primair); stroke-width: 2; opacity: 0.7; }

/* Waterstroming: kleur zegt wat het water doet.
   warm = cv-water naar de radiatoren (steunkleur, decoratief gebruik)
   koel = afgekoeld water | oogst = bronwater met opgevangen warmte (lauw-oranje) */
.bl-stroom {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 9 15;
  animation: factsheet-stroom 1.6s linear infinite;
}
@keyframes factsheet-stroom { to { stroke-dashoffset: -48; } }
.bl-warm  { stroke: var(--kleur-steun); }
.bl-koel  { stroke: color-mix(in srgb, var(--kleur-donkerblauw) 45%, var(--kleur-wit)); }
.bl-oogst { stroke: var(--bl-lauw); }
.bl-warm-f  { fill: var(--kleur-steun); }
.bl-koel-f  { fill: color-mix(in srgb, var(--kleur-donkerblauw) 45%, var(--kleur-wit)); }
.bl-oogst-f { fill: var(--bl-lauw); }

/* Warmteafgifte: golfjes die opstijgen uit radiator en vloerverwarming */
.bl-warmte {
  fill: none;
  stroke: var(--kleur-steun);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  animation: factsheet-warmte 2.6s ease-in-out infinite;
}
.bl-warmte--2 { animation-delay: 0.85s; }
.bl-warmte--3 { animation-delay: 1.7s; }
@keyframes factsheet-warmte {
  0%   { transform: translateY(8px); opacity: 0; }
  25%  { opacity: 0.65; }
  75%  { opacity: 0.35; }
  100% { transform: translateY(-10px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-stroom, .bl-straal, .bl-wind { animation: none; }
  .bl-warmte { animation: none; opacity: 0.55; }
}

/* Inzetkader: de kringloop binnenin de warmtepomp */
.bl-kaart   { fill: var(--kleur-wit); stroke: color-mix(in srgb, var(--kleur-lichtgrijs) 45%, var(--kleur-wit)); stroke-width: 2; }
.bl-verbind { fill: none; stroke: color-mix(in srgb, var(--kleur-lichtgrijs) 85%, var(--kleur-wit)); stroke-width: 2; stroke-dasharray: 4 7; }
.bl-stroom--dun { stroke-width: 2.5; stroke-dasharray: 6 10; }
.bl-node      { fill: var(--kleur-wit); stroke: var(--kleur-donkerblauw); stroke-width: 1.8; }
.bl-node-bron { fill: color-mix(in srgb, var(--bl-lauw) 18%, var(--kleur-wit)); stroke: var(--bl-lauw); stroke-width: 1.8; }
.bl-node-warm { fill: color-mix(in srgb, var(--kleur-steun) 10%, var(--kleur-wit)); stroke: var(--kleur-steun); stroke-width: 1.8; }
.bl-ventiel   { fill: var(--kleur-donkerblauw); }

/* Stap-nummers in de figuur */
.bl-badge circle { fill: var(--kleur-primair); stroke: var(--kleur-wit); stroke-width: 2.5; }
.bl-badge text   { fill: var(--kleur-wit); font-weight: 700; font-size: 17px; text-anchor: middle; }

/* Stappenlijst naast de figuur */
.factsheet-uitleg { display: grid; gap: 24px; align-content: start; }
.factsheet-stappen {
  list-style: none;
  counter-reset: factsheetstap;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.factsheet-stappen li {
  counter-increment: factsheetstap;
  position: relative;
  padding-left: 52px;
}
.factsheet-stappen li::before {
  content: counter(factsheetstap);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--kleur-primair);
  color: var(--kleur-wit);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.factsheet-stappen h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--kleur-donkerblauw);
  margin: 0 0 6px;
  line-height: 1.4;
}
.factsheet-stappen p {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.65;
}
.factsheet-noot {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background-color: var(--kleur-wit);
  border-left: 3px solid var(--kleur-primair);
  border-radius: 8px;
  padding: 16px;
  font-size: 0.95rem;
  line-height: 1.65;
  box-shadow: 0 2px 12px rgba(36, 34, 30, 0.08);
  max-width: 65ch;
}
.factsheet-noot i { color: var(--kleur-primair); font-size: 24px; flex: none; margin-top: 2px; }

/* Legenda in het onderschrift: streepje in de figuurkleur vóór elk kleurwoord.
   De kleurwoorden zelf blijven donkere tekst – het figuurgrijs en amber halen
   als tekstkleur geen WCAG AA, en amber is in de huisstijl verboden als tekst. */
.factsheet-legenda-term { white-space: nowrap; }
.factsheet-legenda-kleur {
  display: inline-block;
  width: 18px;
  height: 5px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
}
.factsheet-legenda-kleur--warm  { background-color: var(--kleur-steun); }
.factsheet-legenda-kleur--koel  { background-color: color-mix(in srgb, var(--kleur-donkerblauw) 45%, var(--kleur-wit)); }
.factsheet-legenda-kleur--oogst { background-color: var(--bl-lauw); }
.factsheet-legenda-kleur--elek  { background-color: var(--kleur-primair); }

/* ═══ Alleen bodemlussen.php: mini-figuren bij de drie vormen ═══════════ */
.bodemlus-kaart-figuur { display: block; max-width: 220px; margin: 0 auto 16px; }
.bodemlus-kaart-figuur svg { display: block; width: 100%; height: auto; }
.bl-mini-schets   { fill: var(--kleur-wit); stroke: var(--kleur-donkerblauw); stroke-width: 2.5; stroke-linejoin: round; }
.bl-mini-grond    { fill: color-mix(in srgb, var(--kleur-lichtgrijs) 16%, var(--kleur-wit)); }
.bl-mini-maaiveld { stroke: var(--kleur-donkerblauw); stroke-width: 2.5; }
.bl-mini-gat {
  fill: var(--kleur-wit);
  stroke: color-mix(in srgb, var(--kleur-lichtgrijs) 55%, var(--kleur-wit));
  stroke-width: 2;
}
.bl-mini-lus { fill: none; stroke: var(--kleur-primair); stroke-width: 3; stroke-linecap: round; }
.bl-mini-net { fill: none; stroke: color-mix(in srgb, var(--kleur-primair) 45%, var(--kleur-wit)); stroke-width: 2.5; stroke-dasharray: 4 7; }

/* ═══ Alleen pvt.php: panelen, zonnestralen, buitenlucht en stroomkabel ═ */
.bl-paneel      { fill: var(--kleur-donkerblauw); stroke: var(--kleur-donkerblauw); stroke-width: 1; stroke-linejoin: round; }
.bl-paneel-lijn { fill: none; stroke: color-mix(in srgb, var(--kleur-wit) 30%, var(--kleur-donkerblauw)); stroke-width: 1; }
.bl-straal {
  fill: none;
  stroke: var(--kleur-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 4 14;
  animation: factsheet-stroom 1.6s linear infinite;
}
.bl-wind {
  fill: none;
  stroke: color-mix(in srgb, var(--kleur-donkerblauw) 30%, var(--kleur-wit));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
  animation: factsheet-stroom 2.4s linear infinite;
}
/* Stroomkabel in bosgroen ("groene stroom"): bewust niet amber, dat is
   nauwelijks te onderscheiden van het lauw-oranje bronwater en van de
   zonnestralen. */
.bl-elek   { stroke: var(--kleur-primair); }
.bl-elek-f { fill: var(--kleur-primair); }