/* =========================================================================
 * VELDSTIJL - zwart, groen, wit
 * =========================================================================
 * Komt na style.css en bepaalt het uiterlijk; de opbouw (wat waar staat)
 * blijft van style.css. Haal je deze regel uit index.html, dan is de oude
 * stijl terug.
 *
 * Uitgangspunt: een meetinstrument, geen website. Strakke lijnen in plaats
 * van glas en gloed, en drie lettertypes met elk een eigen taak:
 *
 *   Bebas Neue     koppen, adressen en grote getallen - leesbaar op een
 *                  meter afstand, ook in de zon
 *   Barlow         lopende tekst - getekend naar Amerikaanse verkeersborden,
 *                  dus gemaakt om snel gelezen te worden
 *   IBM Plex Mono  labels, codes en meetwaarden - alles wat je naast elkaar
 *                  wilt vergelijken
 *
 * Groen betekent "actie" of "goed". Het staat dus niet overal: op de knop die
 * je moet indrukken, het actieve tabblad, de livestip. Statuskleuren en
 * energielabelkleuren blijven zoals ze zijn, die betekenen iets.
 * ========================================================================= */

/* --- tokens: licht --------------------------------------------------------- */
:root {
  --groen: #13894a;
  --groen-sterk: #0e7a40;
  --groen-tekst: #ffffff;
  --groen-zacht: rgba(19, 137, 74, .1);

  --achter: #efeee9;
  --vlak: #ffffff;
  --vlak-2: #f6f6f2;
  --vlak-3: #ecece6;
  --glas: rgba(255, 255, 255, .96);
  --glas-sterk: #ffffff;
  --paneel: #ffffff;
  --rand: rgba(17, 20, 18, .11);
  --rand-sterk: rgba(17, 20, 18, .24);

  --tekst: #121513;
  --zacht: #5e6661;

  --primair: #121513;
  --primair-tekst: #ffffff;
  --accent: #13894a;
  --link: #0e7a40;

  --kaart-achtergrond: #efeee9;
  --schaduw: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .1);
  --schaduw-klein: 0 1px 2px rgba(0, 0, 0, .08);
  --focus: 0 0 0 3px rgba(19, 137, 74, .25);
  --soepel: cubic-bezier(.16, 1, .3, 1);
  --overgang: .2s var(--soepel);

  --kop: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --letter: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --hoek: 8px;
  --hoek-groot: 12px;
}

/* --- tokens: donker - en altijd op het inlogscherm ------------------------- */
html[data-thema="donker"], #login {
  color-scheme: dark;

  --groen: #3fd17f;
  --groen-sterk: #34bd70;
  --groen-tekst: #06140c;
  --groen-zacht: rgba(63, 209, 127, .12);

  --achter: #0a0c0b;
  --vlak: #111413;
  --vlak-2: #171b19;
  --vlak-3: #1f2421;
  --glas: rgba(17, 20, 19, .96);
  --glas-sterk: #111413;
  --paneel: #111413;
  --rand: rgba(255, 255, 255, .08);
  --rand-sterk: rgba(255, 255, 255, .17);

  --tekst: #eef1ef;
  --zacht: #8d9691;

  --primair: #eef1ef;
  --primair-tekst: #0a0c0b;
  --accent: #3fd17f;
  --link: #6fdfa0;

  --let-op: #f5b62e;
  --fout: #f87171;
  --fout-vlak: rgba(248, 113, 113, .12);
  --fout-tekst: #fca5a5;
  --ok-vlak: rgba(63, 209, 127, .12);
  --ok-tekst: #8be4b2;
  --waarschuwing-tekst: #fbbf24;

  --balk: #0a0c0b;
  --kaart-achtergrond: #0c0c0c;   /* zelfde als de neutrale donkere kaart */
  --kaart-voorbeeld: #101512;
  --raster: rgba(255, 255, 255, .05);

  --schaduw: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 48px rgba(0, 0, 0, .55);
  --schaduw-klein: 0 2px 8px rgba(0, 0, 0, .4);
  --focus: 0 0 0 3px rgba(63, 209, 127, .28);
}

/* --- basis ---------------------------------------------------------------- */

html, body {
  font-family: var(--letter);
  font-size: 15.5px;
  font-feature-settings: 'tnum' 1;   /* cijfers even breed, zodat ze onder elkaar lijnen */
  -webkit-font-smoothing: antialiased;
}
body { background: var(--kaart-achtergrond); }
::selection { background: var(--groen); color: var(--groen-tekst); }
b, strong { font-weight: 600; }

* { scrollbar-width: thin; scrollbar-color: var(--rand-sterk) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--rand-sterk); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }

/* --- kopbalk --------------------------------------------------------------- */

#merk, #zoek, #btn-menu, #gebied, #hint {
  background: var(--glas);
  border: 1px solid var(--rand);
  box-shadow: var(--schaduw);
  backdrop-filter: none;
}

#merk {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 8px;
  border-radius: var(--hoek);
  font-family: var(--kop);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
}
#merk span { color: var(--groen); }
/* Livestip: het team ziet elkaars werk direct. */
#merk::before {
  content: '';
  width: 6px; height: 6px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--groen);
  animation: livestip 2.6s ease-out infinite;
}
@keyframes livestip {
  0%   { box-shadow: 0 0 0 0 rgba(63, 209, 127, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 209, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 209, 127, 0); }
}
@media (max-width: 560px) { #merk { display: none; } }

#zoek {
  border-radius: var(--hoek);
  padding: 12px 16px 12px 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d9691' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 16px;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
#zoek:focus { border-color: var(--groen); box-shadow: var(--schaduw), var(--focus); }

#suggesties {
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  padding: 4px;
}
#suggesties li { border-radius: 5px; }
#suggesties li:hover, #suggesties li.actief { background: var(--vlak-3); }
#suggesties li.actief { box-shadow: inset 2px 0 0 var(--groen); }
#suggesties .type {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  background: transparent;
  border: 1px solid var(--rand-sterk);
  border-radius: 3px;
}

#btn-menu { border-radius: var(--hoek); color: var(--tekst); font-size: 20px; }
#btn-menu:hover { border-color: var(--rand-sterk); box-shadow: var(--schaduw); }
#btn-menu.let-op { background: var(--groen); color: var(--groen-tekst); border-color: var(--groen); }

#gebied {
  border-radius: 6px;
  font-family: var(--kop);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1;
  padding: 8px 12px 6px;
}
#hint { border-radius: 6px; font-family: var(--mono); font-size: 12px; }
#verbinding { border-radius: 6px; font-family: var(--mono); font-size: 12px; }

/* Melding dat een bron (EP-Online) plat ligt. Boven de locatieknop, zodat hij
 * opvalt zonder iets op de kaart af te dekken waar je op wilt tikken. */
#storing {
  position: absolute;
  z-index: 16;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: min(520px, calc(100vw - 24px));
  padding: 9px 13px;
  border: 1px solid rgba(245, 182, 46, .5);
  border-left: 3px solid #f5b62e;
  border-radius: 6px;
  background: var(--vlak);
  box-shadow: var(--schaduw);
  color: var(--tekst);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}
#storing:not([hidden]) { animation: verschijn .3s var(--soepel); }

/* --- panelen --------------------------------------------------------------- */

#detail, #menu {
  /* Bovenin een groene lijn die meegroeit met hoe ver je gescrold hebt
   * (--voortgang zet effecten.js). Een achtergrond op een scrollend element
   * scrolt zelf niet mee, dus de lijn blijft bovenaan staan. */
  background:
    linear-gradient(var(--groen), var(--groen)) 0 0 / calc(var(--voortgang, 0) * 100%) 2px no-repeat,
    var(--paneel);
  backdrop-filter: none;
  border: 1px solid var(--rand);
  box-shadow: var(--schaduw);
}
@media (min-width: 721px) {
  #detail, #menu { border-radius: var(--hoek-groot); width: 392px; }
  body.paneel-open .maplibregl-ctrl-bottom-right { right: calc(392px + 24px); }
}
@media (max-width: 720px) {
  #detail, #menu { border-radius: 14px 14px 0 0; }
}
#detail::before, #menu::before { background: var(--rand-sterk); }

@keyframes paneel-opzij {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes paneel-omhoog {
  from { transform: translateY(48px); opacity: .4; }
  to   { transform: none; opacity: 1; }
}
@media (min-width: 721px) {
  #detail:not([hidden]), #menu:not([hidden]) { animation: paneel-opzij .38s var(--soepel); }
}
@media (max-width: 720px) {
  #detail:not([hidden]), #menu:not([hidden]) { animation: paneel-omhoog .42s var(--soepel); }
}

/* Adres als kop: groot, in kapitalen, leesbaar op armlengte. */
#detail h2 {
  margin: 2px 40px 4px 0;
  font-family: var(--kop);
  font-size: 36px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
}
#menu h2 {
  margin: 0 40px 2px 0;
  font-family: var(--kop);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .02em;
}
#detail .sub {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--zacht);
}

/* Sectiekoppen: een klein label met een haarlijn tot de rand. */
#detail h3, #menu h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zacht);
}
#detail h3::after, #menu h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rand);
}
#detail h3 .badge, #menu h3 .badge { order: 0; }

.sluit {
  width: 34px; height: 34px;
  border-radius: var(--hoek);
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--zacht);
  font-size: 22px;
}
.sluit:hover { border-color: var(--rand-sterk); color: var(--tekst); background: var(--vlak-2); }

/* Huidige status onder het adres: wie, wat, wanneer, in een regel. */
.huidige-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 14px;
  font-weight: 600;
}
.huidige-status i {
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--kleur);
}
.huidige-status span {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--zacht);
}

/* --- kerncijfers ---------------------------------------------------------- */

.kerncijfers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.tegel {
  min-width: 0;
  padding: 9px 11px 10px;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  background: var(--vlak-2);
}
.tegel.breed { grid-column: 1 / -1; }
.tegel > span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zacht);
}
.tegel > b {
  display: block;
  font-family: var(--kop);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
}
.tegel > b small {
  margin-left: 3px;
  font-family: var(--letter);
  font-size: 13px;
  font-weight: 500;
  color: var(--zacht);
}
.tegel #label-veld, .tegel #woz-veld { font-size: 13px; line-height: 1.35; }
.tegel #label-veld small { display: block; margin-top: 4px; font-size: 11px; color: var(--zacht); }
.tegel .label-badge {
  min-width: 36px;
  padding: 3px 9px 1px;
  border-radius: 4px;
  font-family: var(--kop);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
}
.tegel .woz-waarde {
  font-family: var(--kop);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
}
.tegel .woz-historie { font-family: var(--mono); font-size: 11px; }

.label-badge { border-radius: 4px; }

/* --- achtergrondkaartjes (kans, subsidie, eigendom, doelgroep) ------------ */

.achtergrond { margin-top: 6px; }
.eigendom, .subsidie, .kans {
  border-radius: var(--hoek);
  background: var(--vlak-2);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--kleur);
  box-shadow: none;
}
.kans-score {
  font-family: var(--kop);
  font-size: 48px;
  font-weight: 400;
  line-height: .9;
  text-shadow: none;
}
.kans-klasse { font-weight: 600; }
.subsidie-bedrag { font-family: var(--kop); font-size: 26px; font-weight: 400; letter-spacing: .01em; }
.eigendom-balk, .labelbalk { height: 6px; border-radius: 2px; }
.eigendom-balk span { background: #16a34a; box-shadow: none; }

.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--rand-sterk);
  border-radius: 3px;
  color: var(--tekst);
  padding: 1px 6px;
}
.uitleg code { background: var(--vlak-3); color: var(--tekst); font-family: var(--mono); }
.meta { font-family: var(--mono); font-size: 11px; }

/* --- knoppen -------------------------------------------------------------- */

.knop-vol {
  border-radius: var(--hoek);
  padding: 13px 18px;
  background: var(--groen);
  color: var(--groen-tekst);
  font-weight: 600;
  font-size: 15.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .25);
  transition: background var(--overgang), transform var(--overgang), box-shadow var(--overgang);
}
.knop-vol:hover { background: var(--groen-sterk); filter: none; transform: translateY(-1px); }
.knop-vol:disabled { opacity: .4; transform: none; cursor: default; }

.knop-rand {
  border-radius: var(--hoek);
  border: 1px solid var(--rand-sterk);
  background: transparent;
  color: var(--tekst);
  font-weight: 600;
}
.knop-rand:hover { border-color: var(--groen); color: var(--groen); background: transparent; }
.knop-rand:disabled:hover { border-color: var(--rand-sterk); color: var(--tekst); }

.knop-tekst, .knop-link, .tekstknop { color: var(--link); }
.nexa-knop { background: var(--groen); color: var(--groen-tekst); }

/* --- statusknoppen --------------------------------------------------------- */

.statusknoppen { gap: 5px; }
.statusknoppen button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 40px 12px 12px;
  border-radius: var(--hoek);
  border: 1px solid var(--rand);
  border-left: 1px solid var(--rand);
  background: var(--vlak-2);
  color: var(--tekst);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 4px 0 0 var(--kleur);
}
/* Sneltoets: 1 t/m 5 op de computer. Op een telefoon onzichtbaar. */
.statusknoppen kbd {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  margin-left: 4px;
  border: 1px solid var(--rand-sterk);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--zacht);
}
@media (hover: none) { .statusknoppen kbd { display: none; } .statusknoppen button { padding-left: 18px; } }
.statusknoppen button:not(.actief):hover {
  border-color: var(--rand-sterk);
  background: var(--vlak-3);
}
.statusknoppen button.actief {
  background: var(--kleur);
  border-color: var(--kleur);
  color: #fff;
  box-shadow: none;
}
.statusknoppen button.actief kbd { border-color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .85); }
/* Oranje en wit lezen slecht; daar dus donkere tekst. */
.statusknoppen button.actief[data-status="nietthuis"] { color: #1d1400; }
.statusknoppen button.actief[data-status="nietthuis"] kbd { border-color: rgba(0, 0, 0, .3); color: rgba(0, 0, 0, .6); }
.statusknoppen button:disabled { opacity: .55; }

/* Net gezet: een korte stempel, zodat je voelt dat het gelukt is. */
.statusknoppen button.gestempeld { animation: stempel .55s var(--soepel); }
@keyframes stempel {
  0%   { transform: scale(.96); box-shadow: 0 0 0 0 var(--kleur); }
  40%  { transform: scale(1.015); }
  100% { transform: none; box-shadow: 0 0 0 10px transparent; }
}

/* --- invoervelden --------------------------------------------------------- */

#notitie, .veld input, .uitnodigen input, .wijk-veld input, .wijk-veld select {
  border-radius: var(--hoek);
  border: 1px solid var(--rand);
  background: var(--vlak-2);
  color: var(--tekst);
  font-family: var(--letter);
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
#notitie:focus, .veld input:focus, .uitnodigen input:focus, .wijk-veld input:focus, .wijk-veld select:focus,
#notitie:focus-visible, .veld input:focus-visible, .uitnodigen input:focus-visible {
  border-color: var(--groen);
  box-shadow: var(--focus);
  outline: none;
}
.veld { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--zacht); }
.veld input { text-transform: none; letter-spacing: 0; }

/* --- tabbladen: tekst met een streep eronder die meeschuift ---------------- */

.menu-tabs {
  position: relative;
  gap: 0;
  margin: 14px -18px 6px;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid var(--rand);
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tabs button {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  padding: 12px 10px 11px;
  border-radius: 0;
  background: transparent;
  color: var(--zacht);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu-tabs button.actief { background: transparent; color: var(--tekst); box-shadow: none; }
.menu-tabs button:not(.actief):hover { color: var(--tekst); }
.menu-tabs button:active { transform: none; }
/* De streep zelf; effecten.js zet breedte en positie en laat hem glijden.
 * Zonder JavaScript staat er gewoon een streep onder het actieve tabblad. */
.tab-indicator {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  background: var(--groen);
  transition: transform .42s var(--soepel), width .42s var(--soepel);
}
.menu-tabs:not(:has(.tab-indicator)) button.actief { box-shadow: inset 0 -2px 0 var(--groen); }

.segment {
  padding: 3px;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
  background: transparent;
}
.segment button { border-radius: 5px; font-weight: 600; }
.segment button.actief { background: var(--vlak-3); color: var(--tekst); box-shadow: inset 0 0 0 1px var(--rand-sterk); }

.grens-presets button, .grens-stijlen button, .wijk-labels button {
  border-radius: 6px;
  border: 1px solid var(--rand);
  background: var(--vlak-2);
}
.grens-presets button.actief, .grens-stijlen button.actief {
  background: var(--tekst);
  border-color: var(--tekst);
  color: var(--achter);
}

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--groen); }

/* --- lijsten -------------------------------------------------------------- */

.activiteit li { border-radius: 0; padding: 12px 6px; border-bottom: 1px solid var(--rand); }
.activiteit li:hover { background: var(--vlak-2); }
.activiteit .stip { border-radius: 2px; }
.activiteit .regel b { font-weight: 600; }
.activiteit .regel small { font-family: var(--mono); font-size: 11px; }

.wijk-regel {
  border-radius: var(--hoek);
  border: 1px solid var(--rand);
  background: var(--vlak-2);
}
.wijk-regel:hover { border-color: var(--groen); background: var(--vlak-2); }
.wijk-kop b { font-family: var(--kop); font-size: 22px; font-weight: 400; letter-spacing: .01em; }
.wijk-cijfers { font-family: var(--mono); font-size: 11px; }
.wijk-blok { border-radius: var(--hoek); }

.sales-telling li { border-radius: 4px; font-family: var(--mono); font-size: 12.5px; }
.sales-telling li:nth-child(odd) { background: var(--vlak-2); }

/* --- locatieknop ----------------------------------------------------------- */

#btn-locatie {
  width: 62px; height: 62px;
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  color: var(--groen);
  box-shadow: var(--schaduw);
}
/* Draaiende ring zolang hij je volgt: je ziet zonder te lezen dat hij aan staat. */
#btn-locatie::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, var(--groen) 80deg, transparent 160deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
  transition: opacity var(--overgang);
}
#btn-locatie.aan::before, #btn-locatie.loper::before { opacity: 1; animation: draai 2.4s linear infinite; }
#btn-locatie.aan { background: var(--vlak); color: var(--groen); border-color: var(--groen); --pols-kleur: rgba(63, 209, 127, .35); }
#btn-locatie.loper { background: var(--groen); color: var(--groen-tekst); border-color: var(--groen); --pols-kleur: rgba(63, 209, 127, .45); }
html[data-thema="donker"] #btn-locatie.aan, html[data-thema="donker"] #btn-locatie.loper { border-color: var(--groen); }
@keyframes draai { to { transform: rotate(360deg); } }

/* --- kaartknoppen van MapLibre --------------------------------------------- */

.maplibregl-ctrl-group {
  border-radius: var(--hoek) !important;
  background: var(--vlak) !important;
  border: 1px solid var(--rand) !important;
  backdrop-filter: none;
}
.maplibregl-ctrl-group button:hover { background: var(--vlak-3) !important; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-scale { font-family: var(--mono) !important; }
.maplibregl-popup-content { border-radius: var(--hoek) !important; border: 1px solid var(--rand); font-family: var(--letter); }

#doelgroep-legenda { border-radius: var(--hoek); border: 1px solid var(--rand); background: var(--vlak); backdrop-filter: none; }

/* --- klikeffect: een dunne ring vanaf de vinger --------------------------- */

.klik-ring {
  z-index: 9999;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 1.5px solid var(--ring-kleur, var(--groen, #3fd17f));
  pointer-events: none;
  animation: klik-ring .5s var(--soepel) forwards;
}
.klik-ring.groot { animation: klik-ring-groot .7s var(--soepel) forwards; }
@keyframes klik-ring { from { transform: scale(.4); opacity: .8; } to { transform: scale(4); opacity: 0; } }
@keyframes klik-ring-groot { from { transform: scale(.4); opacity: .9; } to { transform: scale(7); opacity: 0; } }

.knop-vol:active, .knop-rand:active, .statusknoppen button:active,
.segment button:active, .wijk-regel:active, .activiteit li:active { transform: scale(.975); }

/* --- scroll-effect in panelen ---------------------------------------------- */

.onthul {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .5s var(--soepel) var(--vertraging, 0ms),
    transform .5s var(--soepel) var(--vertraging, 0ms);
}
.onthul.zichtbaar { opacity: 1; transform: none; }

/* =========================================================================
 * INLOGSCHERM
 * ========================================================================= */

#login {
  display: block;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--achter);
  color: var(--tekst);
  scroll-behavior: auto;   /* landing.js glijdt zelf, de browser hoeft niet mee */
  overscroll-behavior: contain;
}
html[data-thema] #login { background: var(--achter); }

.landing { position: relative; isolation: isolate; overflow-x: clip; }

/* De 3D-kaart staat vast achter alles; de tekst schuift eroverheen. */
.landing-kaart {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.landing-kaart.klaar { opacity: 1; }
.landing-kaart .maplibregl-canvas { outline: none; }
.landing-waas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 12, 11, .94) 0%, rgba(10, 12, 11, .72) 38%, rgba(10, 12, 11, .2) 72%, rgba(10, 12, 11, .35) 100%),
    linear-gradient(180deg, rgba(10, 12, 11, .5) 0%, transparent 18%, transparent 70%, rgba(10, 12, 11, .9) 100%);
}

.landing-balk {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 40px 16px;
  /* Een echte balk, geen verloop: anders loopt de tekst eronder door de
   * coördinaten heen zodra je scrolt. */
  background: rgba(10, 12, 11, .92);
  border-bottom: 1px solid var(--rand);
}
.landing-merk { font-family: var(--kop); font-size: 26px; letter-spacing: .04em; line-height: 1; }
.landing-hud {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--zacht);
  white-space: pre;
}

.landing-held {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: center;
  gap: 56px;
  max-width: 1240px;
  min-height: calc(100vh - 66px);
  min-height: calc(100dvh - 66px);
  margin: 0 auto;
  padding: 24px 40px 80px;
}

.landing-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--groen);
}
.landing-label::before { content: ''; width: 32px; height: 1px; background: var(--groen); }

.landing-kop {
  margin: 0;
  font-family: var(--kop);
  font-weight: 400;
  font-size: clamp(64px, 10.5vw, 164px);
  line-height: .86;
  letter-spacing: .005em;
  color: #f2f4f3;
}
.landing-kop .groen { color: var(--groen); }

/* Koppen regel voor regel onder een rand vandaan. Alleen verborgen als de
 * beweging aan staat; landing.js maakt ze zichtbaar zodra ze in beeld komen. */
[data-regels] > span { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
[data-regels] > span > span { display: block; transition: transform 1.05s var(--soepel); }
html[data-beweging="aan"] [data-regels]:not(.zichtbaar) > span > span { transform: translateY(108%); }
[data-regels] > span:nth-child(2) > span { transition-delay: .09s; }
[data-regels] > span:nth-child(3) > span { transition-delay: .18s; }

.landing-sub {
  max-width: 520px;
  margin: 28px 0 0;
  font-size: 18.5px;
  line-height: 1.55;
  color: #c3cbc6;
}

/* Inlogkaart: een stevig vlak dat een paar graden met de muis meekantelt. */
.login-kaart {
  max-width: 380px;
  padding: 28px 26px 24px;
  border-radius: var(--hoek-groot);
  border: 1px solid var(--rand-sterk);
  background: rgba(17, 20, 19, .96);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--soepel);
}
.login-kop { margin: 0 0 4px; font-family: var(--kop); font-size: 34px; line-height: 1; letter-spacing: .02em; }
.login-kaart h1 { font-family: var(--kop); font-weight: 400; font-size: 34px; letter-spacing: .02em; }
.login-kaart h1 span { color: var(--groen); }
.login-voet { border-top-color: var(--rand); }
#login:not([hidden]) .login-kaart { animation: kaart-in .9s var(--soepel) both; animation-delay: .25s; }
@keyframes kaart-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
#login > .login-kaart { margin: 12vh auto; width: calc(100% - 32px); }

/* Drie grote cijfers op een balk over de hele breedte. */
.landing-cijfers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  background: rgba(10, 12, 11, .9);
}
.cijfer { padding: 40px 40px 36px; border-left: 1px solid var(--rand); }
.cijfer:first-child { border-left: 0; }
.cijfer b {
  display: block;
  font-family: var(--kop);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 132px);
  line-height: .85;
  letter-spacing: .01em;
}
.cijfer span {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zacht);
}
.cijfer:nth-child(2) { --vertraging: 100ms; }
.cijfer:nth-child(3) { --vertraging: 200ms; }

/* Vier stappen als een genummerde lijst, niet als kaartjes. */
.landing-stappen {
  padding: 110px 40px 40px;
  background: rgba(10, 12, 11, .92);
}
.landing-stappen > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.stappen-kop {
  margin-bottom: 56px;
  font-family: var(--kop);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: .88;
  letter-spacing: .005em;
}
.stap {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  padding: 34px 0 36px;
  border-top: 1px solid var(--rand);
}
.stap:last-child { border-bottom: 1px solid var(--rand); }
.stap-nr {
  font-family: var(--kop);
  font-size: 84px;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .32);
  transition: color .5s var(--soepel), -webkit-text-stroke-color .5s var(--soepel);
}
.stap:hover .stap-nr { color: var(--groen); -webkit-text-stroke-color: var(--groen); }
.stap h3 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.stap p { margin: 0; max-width: 560px; font-size: 16.5px; line-height: 1.6; color: #aab3ae; }
.stap-cijfer {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--groen);
  white-space: nowrap;
}

.landing-slot {
  padding: 130px 40px 120px;
  text-align: center;
  background: rgba(10, 12, 11, .92);
}
.landing-slot-kop {
  margin: 0;
  font-family: var(--kop);
  font-size: clamp(54px, 9vw, 140px);
  line-height: .88;
  letter-spacing: .005em;
}
.landing-slot .knop-vol { width: auto; min-width: 230px; margin-top: 34px; }

.landing-voet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 22px 40px;
  border-top: 1px solid var(--rand);
  background: #0a0c0b;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--zacht);
}

/* Onthullen op het inlogscherm: verder en trager dan in de panelen. */
.landing .onthul { transform: translateY(32px); transition-duration: .9s, .9s; }
.landing .onthul.zichtbaar { transform: none; }

@media (max-width: 900px) {
  .landing-balk { padding: 16px 18px 14px; }
  .landing-hud { display: none; }
  .landing-held { grid-template-columns: minmax(0, 1fr); gap: 36px; min-height: auto; padding: 28px 18px 64px; }
  .landing-kop { font-size: clamp(58px, 17vw, 96px); }
  .landing-sub { font-size: 17px; }
  .login-kaart { max-width: none; transform: none; }
  .landing-waas {
    background: linear-gradient(180deg, rgba(10, 12, 11, .55) 0%, rgba(10, 12, 11, .82) 45%, rgba(10, 12, 11, .95) 100%);
  }
  .landing-cijfers { grid-template-columns: minmax(0, 1fr); }
  .cijfer { padding: 28px 18px; border-left: 0; border-top: 1px solid var(--rand); }
  .cijfer:first-child { border-top: 0; }
  .landing-stappen { padding: 72px 18px 24px; }
  .stappen-kop { margin-bottom: 32px; }
  .stap { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 26px 0; }
  .stap-nr { font-size: 48px; }
  .stap-cijfer { grid-column: 2; margin-top: 12px; }
  .stap h3 { font-size: 22px; }
  .landing-slot { padding: 80px 18px; }
  .landing-voet { padding: 18px; }
}

/* --- beweging uit (Instellingen) ------------------------------------------ */

html[data-beweging="uit"] .onthul { opacity: 1; transform: none; }
html[data-beweging="uit"] #btn-locatie::before { animation: none; }
html[data-beweging="uit"] .klik-ring { display: none; }
html[data-beweging="uit"] .login-kaart { transform: none; }

/* --- uitnodigen: knoppen naast elkaar en het linkblok ---------------------- */

.uitnodig-knoppen { display: flex; gap: 8px; margin-top: 8px; }
.uitnodig-knoppen > * { flex: 1; margin-top: 0; text-align: center; text-decoration: none; }
.uitnodig-knoppen a.knop-rand { display: inline-flex; align-items: center; justify-content: center; padding: 11px; font-size: 14px; }
.uitnodig-link {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--groen);
  border-radius: var(--hoek);
  background: var(--groen-zacht);
}
.uitnodig-link .uitleg { margin-top: 0; color: var(--tekst); }
.uitnodig-link-veld {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--vlak);
  color: var(--zacht);
  font-family: var(--mono);
  font-size: 11px;
}