/* Tijdelijke startpagina voor plakje 0. Wordt vervangen in plakje 1. */
:root {
  --bg: #EEF2F8;
  --glas: rgba(255, 255, 255, 0.58);
  --rand: rgba(255, 255, 255, 0.9);
  --tekst: #0B1733;
  --gedempt: #4A5675;
  --vlek1: rgba(61, 211, 196, 0.38);
  --vlek2: rgba(255, 143, 90, 0.30);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0F1E;
    --glas: rgba(30, 39, 66, 0.55);
    --rand: rgba(255, 255, 255, 0.10);
    --tekst: #EEF2FB;
    --gedempt: #AEB8D3;
    --vlek1: rgba(61, 211, 196, 0.22);
    --vlek2: rgba(255, 143, 90, 0.16);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(600px 600px at 10% 0%, var(--vlek1), transparent 70%),
    radial-gradient(500px 500px at 95% 70%, var(--vlek2), transparent 70%),
    var(--bg);
  color: var(--tekst);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.kaart {
  width: min(520px, 100%);
  padding: 40px 32px;
  border-radius: 28px;
  text-align: center;
  background: var(--glas);
  border: 1px solid var(--rand);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.logo { height: 40px; width: auto; }
.woordmerk { margin: 10px 0 24px; letter-spacing: 0.22em; font-weight: 700; font-size: 14px; color: var(--gedempt); }
h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.sub { margin: 8px 0 0; color: var(--gedempt); }
@media (prefers-reduced-transparency: reduce) {
  .kaart { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}