:root {
  --diep: #061523;
  --paneel: #0c2436;
  --paneel-rand: #163a52;
  --blauw: #0068a7;
  --cyaan: #38b5e7;
  --wit: #f4f9fc;
  --grijs: #9fb7c8;
  --groen: #33c48a;
  --amber: #f2b84b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--diep);
  color: var(--wit);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(56,181,231,0.16), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(0,104,167,0.22), transparent 50%),
    var(--diep);
}

#scherm {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header#kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.6vh 4vw 1.2vh 4vw;
}

#kop-links { display: flex; align-items: center; gap: 1.4vw; }
#kop-logo { height: 5.2vh; filter: drop-shadow(0 0 10px rgba(56,181,231,0.35)); }
#kop-titel { font-size: 1.9vw; font-weight: 600; letter-spacing: 0.02em; }
#kop-sub { font-size: 1.05vw; color: var(--grijs); margin-top: 0.3vh; }

#kop-rechts { text-align: right; }
#kop-rechts-boven { display: flex; align-items: baseline; justify-content: flex-end; gap: 1vw; }
#klok { font-size: 2.1vw; font-weight: 300; font-variant-numeric: tabular-nums; }
#datum { font-size: 1vw; color: var(--grijs); }

#weer { display: flex; align-items: baseline; gap: 0.4vw; color: var(--cyaan); }
#weer-icoon { font-size: 1.6vw; }
#weer-temp { font-size: 1.5vw; font-weight: 400; font-variant-numeric: tabular-nums; }

main#inhoud {
  flex: 1;
  position: relative;
  padding: 0 4vw 2vh 4vw;
}

.slide {
  position: absolute;
  inset: 0;
  padding: 0 4vw 2vh 4vw;
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.slide.actief {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.slide-kop { margin-bottom: 2.2vh; }
.slide-titel { font-size: 2.6vw; font-weight: 700; }
.slide-sub { font-size: 1.1vw; color: var(--grijs); margin-top: 0.4vh; }

.kaarten {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6vw;
  align-content: center;
}

.kaarten.n3 { grid-template-columns: repeat(3, 1fr); }
.kaarten.n2 { grid-template-columns: repeat(2, 1fr); }
.kaarten.n1 { grid-template-columns: repeat(1, 1fr); }

.kaart {
  background: linear-gradient(160deg, var(--paneel), rgba(6,21,35,0.6));
  border: 1px solid var(--paneel-rand);
  border-radius: 18px;
  padding: 2.2vh 1.6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8vh;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
}

.kaart::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(56,181,231,0.16), transparent 70%);
}

.kaart-icoon { font-size: 2.4vw; opacity: 0.9; }
.kaart-waarde { font-size: 3.1vw; font-weight: 700; line-height: 1.05; color: var(--wit); }
.kaart-eenheid { font-size: 1vw; color: var(--cyaan); font-weight: 500; margin-left: 0.4vw; }
.kaart-label { font-size: 1.05vw; color: var(--grijs); }
.kaart.financieel { border-color: var(--amber); }
.kaart.financieel .kaart-waarde { color: var(--amber); }

footer#voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2vh 4vw 2.2vh 4vw;
  gap: 2vw;
}

#stippen { display: flex; gap: 0.7vw; }
.stip { width: 0.7vw; height: 0.7vw; border-radius: 50%; background: var(--paneel-rand); transition: background 0.3s; }
.stip.actief { background: var(--cyaan); }

#voortgang { flex: 1; height: 4px; background: var(--paneel-rand); border-radius: 2px; overflow: hidden; }
#voortgang-balk { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blauw), var(--cyaan)); }

#bijgewerkt { font-size: 0.85vw; color: var(--grijs); }

#foutmelding {
  position: absolute;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(200,60,60,0.85);
  padding: 0.8vh 1.6vw;
  border-radius: 8px;
  font-size: 1vw;
  display: none;
}