/* Gedeelde opmaak voor pakpand. Donker met neon-accenten, zoals de oorspronkelijke
   scanner; alle pagina's putten uit dezelfde variabelen zodat een kleurwijziging
   op één plek landt. */

/* Het hidden-attribuut moet ALTIJD winnen. Een regel als .filterlade{display:flex}
   overstemt de display:none die de browser zelf aan [hidden] hangt -- die author-regel
   heeft gewoon meer gewicht. Gevolg op Te koop: de filterlade stond met hidden="" nog
   steeds in beeld, op z-index 2147483100, en slikte elke klik op de linkerhelft van de
   pagina op. Het kruisje zette hidden wel, maar er gebeurde niets zichtbaars -- "ik kan
   de filters niet wegdoen". Eén !important hier scheelt dat op elke pagina. */
[hidden]{display:none!important}
:root{
  color-scheme:dark;
  --bg:#0a0a0c;
  --panel:rgba(255,255,255,.025);
  --border:rgba(255,255,255,.07);
  --border-hover:rgba(255,255,255,.2);
  --text:#f0f0f5;
  --text-2:#a8a8b2;
  --text-3:#6a6a75;
  --green:#00ff9d;
  /* Het thema is zwart met groen: alles waar je op klikt is groen. Blauw en amber
     bestonden hier als tweede en derde accent; ze blijven als naam staan omdat een
     stuk of tien plekken ernaar verwijzen, maar ze wijzen nu naar groentinten. Rose
     blijft rood -- dat is een waarschuwing, geen knop, en die moet juist afwijken. */
  --green-2:#00c87c;
  --green-3:#7dffc4;
  --amber:#00c87c;
  --blue:#00ff9d;
  --rose:#ff5577;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{
  font-family:-apple-system,"SF Pro Display","Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -100px,rgba(0,255,157,.06),transparent 70%),
    radial-gradient(ellipse 800px 400px at 90% 30%,rgba(0,200,124,.04),transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.04) 1px,transparent 0);
  background-size:28px 28px;opacity:.5;
}
.wrap{max-width:1040px;margin:0 auto;padding:32px 20px 64px;position:relative;z-index:1}
a{color:var(--green)}

/* --- tabbalk ------------------------------------------------------------------
   Deze balk stond eerst in tabs.js en werd door JavaScript opgebouwd. Dat script
   is 'defer', dus het wacht op de hele pagina -- en op /verkopen/ staat daar een
   script van dertig megabyte voor. De navigatie kwam daardoor seconden te laat.
   Nu staat de balk als gewone HTML bovenaan elke pagina en staat de opmaak hier,
   in een stylesheet die het renderen toch al blokkeert. Hij is dus bij de eerste
   schildering al zichtbaar, zonder JavaScript.
   De hoogte is vast en niet gemeten: anders verschuift de pagina alsnog zodra de
   meting binnen is. */
:root{--pp-tabs-h:58px}
.pp-tabs{display:flex;gap:4px;align-items:stretch;height:var(--pp-tabs-h);padding:0 22px;
  background:#0a0a0c;border-bottom:1px solid rgba(255,255,255,.10);
  position:fixed;top:0;left:0;right:0;z-index:2147483000;
  font-family:-apple-system,"SF Pro Display",system-ui,sans-serif;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pp-tabs::-webkit-scrollbar{display:none}
.pp-tabs .pp-merk{display:flex;align-items:center;gap:9px;padding:0 24px 0 0;color:#6a6a75;
  font:800 11.5px ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;flex-shrink:0}
.pp-tabs .pp-stip{width:10px;height:10px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px var(--green),0 0 26px rgba(0,255,157,.5);flex-shrink:0}
.pp-tabs a.pp-tab{display:flex;align-items:center;gap:9px;color:#8f8f9c;text-decoration:none;
  padding:0 26px;font-size:16px;font-weight:650;letter-spacing:-.01em;
  border-bottom:3px solid transparent;white-space:nowrap;flex-shrink:0;
  transition:color .15s,border-color .15s,background .15s}
.pp-tabs a.pp-tab:hover{color:#f0f0f5;background:rgba(255,255,255,.035)}
.pp-tabs a.pp-tab[aria-current="page"]{color:#fff;border-bottom-color:var(--green);
  background:linear-gradient(180deg,rgba(0,255,157,.10),rgba(0,255,157,0) 70%)}
body{padding-top:var(--pp-tabs-h)}
@media(max-width:620px){
  :root{--pp-tabs-h:46px}
  .pp-tabs{padding:0 12px}
  .pp-tabs .pp-merk{display:none}
  .pp-tabs a.pp-tab{padding:0 15px;font-size:14.5px;gap:7px}
}
/* --- tooltip (blijft uit tabs.js komen, maar de opmaak hoort hier) --- */
.pp-tip{position:fixed;z-index:2147483600;max-width:320px;background:#1b1f27;color:#e9ecf1;
  border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:9px 12px;
  font:400 12.5px/1.55 -apple-system,system-ui,sans-serif;
  box-shadow:0 12px 34px rgba(0,0,0,.55);pointer-events:none;opacity:0;
  transform:translateY(3px);transition:opacity .12s,transform .12s}
.pp-tip.aan{opacity:1;transform:translateY(0)}

/* --- kop met kruimelpad --- */
.balk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.stip{width:12px;height:12px;border-radius:50%;background:var(--green);
  box-shadow:0 0 14px var(--green),0 0 28px rgba(0,255,157,.35);animation:pols 2s ease-in-out infinite}
@keyframes pols{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}
.eyebrow{font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.kruimels{font:500 12px var(--mono);color:var(--text-3);letter-spacing:.06em}
.kruimels a{color:var(--text-2);text-decoration:none}
.kruimels a:hover{color:var(--text)}
.kruimels span{margin:0 7px;opacity:.5}

h1{margin:0 0 12px;font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.08;
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.6) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(max-width:560px){h1{font-size:30px}}
h2{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:40px 0 14px}
h3{font-size:16px;font-weight:700;margin:0}
.lede{margin:0;max-width:680px;color:var(--text-2);font-size:16px;line-height:1.6}
.lede b{color:var(--text);font-weight:600}

/* --- kaarten --- */
.kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px}
.kaart{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px 24px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:13px;
  transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden;
  backdrop-filter:blur(10px)}
.kaart::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;opacity:.6}
.kaart.groen::before{background:linear-gradient(90deg,transparent,var(--green),transparent)}
.kaart.amber::before{background:linear-gradient(90deg,transparent,var(--green-3),transparent)}
.kaart.blauw::before{background:linear-gradient(90deg,transparent,var(--green-2),transparent)}
.kaart:hover{border-color:var(--border-hover);transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.5)}
.kaart.groen:hover{box-shadow:0 12px 36px rgba(0,255,157,.15),0 0 0 1px rgba(0,255,157,.25)}
.kaart.amber:hover{box-shadow:0 12px 36px rgba(125,255,196,.12),0 0 0 1px rgba(125,255,196,.2)}
.kaart.blauw:hover{box-shadow:0 12px 36px rgba(0,200,124,.14),0 0 0 1px rgba(0,200,124,.25)}
.kaart p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.ikoon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);border:1px solid var(--border);font-size:20px}
.kaart.groen .ikoon{color:var(--green)}
.kaart.amber .ikoon{color:var(--green-3)}
.kaart.blauw .ikoon{color:var(--green-2)}
.voet{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag{font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pijl{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);font-size:13px;flex-shrink:0}

/* --- kleine onderdelen --- */
.beta{display:inline-block;background:rgba(0,255,157,.14);color:var(--green);
  font:700 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;margin-left:8px;vertical-align:middle}
/* Op een groene knop viel het label weg: lichtgroen op groen. Binnen een knop dus
   donker op groen, net als het opschrift zelf. */
.knop .beta{background:rgba(0,26,16,.22);color:#001a10}
.knop{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#001a10;
  border:0;border-radius:10px;padding:11px 22px;font:inherit;font-weight:700;font-size:14px;
  letter-spacing:.02em;cursor:pointer;text-decoration:none}
.knop.stil{background:rgba(255,255,255,.06);color:var(--text)}
.knop:hover{filter:brightness(1.08)}
.paneel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px 24px}
.paneel+.paneel{margin-top:14px}
footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--border);
  font:500 12px var(--mono);color:var(--text-3);letter-spacing:.05em}
footer span{margin:0 8px;opacity:.5}

/* --- telefoon -------------------------------------------------------------------
   De kaarten stonden op een smal scherm nog met te veel lucht eromheen, en de koppen
   waren voor een telefoon te groot. */
@media (max-width:640px){
  .wrap{padding:18px 14px 44px}
  h1{font-size:27px;line-height:1.12}
  h2{font-size:19px;margin:28px 0 10px}
  .lede{font-size:15px}
  .kaarten{gap:12px;margin-top:22px}
  .kaart{padding:20px 18px;gap:11px}
  .kaart h3{font-size:17px}
  .kaart p{font-size:13.5px}
  .ikoon{width:38px;height:38px;font-size:18px}
  .knop{width:100%;justify-content:center;padding:13px 20px}
  .paneel{padding:18px 16px}
  footer{margin-top:38px;font-size:11px}
}
/* Niets mag breder zijn dan het scherm; een enkele lange tabel of URL veroorzaakte
   anders horizontaal schuiven van de hele pagina. */
html,body{max-width:100%;overflow-x:hidden}
img,table,pre{max-width:100%}

/* --- favorieten ---------------------------------------------------------------
   Eén sterretje, op beide pagina's hetzelfde. Hij staat vooraan in de rij en moet
   daar niet opvallen tot je hem aanzet: leeg is hij de kleur van de stille tekst,
   aan is hij groen, want dat is op deze site de kleur van alles waar je op drukt. */
.ster{background:none;border:0;padding:0 2px;cursor:pointer;line-height:1;
  font-size:15px;color:var(--text-3);transition:color .12s,transform .12s}
.ster:hover{color:var(--green);transform:scale(1.15)}
.ster.aan{color:var(--green)}
.ster:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}