/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --nacht:      #070d1f;
  --nacht-diep: #030713;
  --kaart:      rgba(255, 255, 255, 0.055);
  --kaart-rand: rgba(255, 255, 255, 0.11);
  --tekst:      #e8ecf8;
  --zacht:      #9aa6c4;
  --maan:       #ffe9b8;
  --accent:     #8fb3ff;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--nacht-diep);
  color: var(--tekst);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.lucht {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 100%, #12204a 0%, transparent 60%),
    linear-gradient(180deg, #030713 0%, #070d1f 45%, #0b1533 100%);
}

.sterren { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.ster {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: fonkel var(--duur) ease-in-out infinite;
  animation-delay: var(--wacht);
}

@keyframes fonkel {
  0%, 100% { opacity: var(--min); }
  50%      { opacity: var(--max); }
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ster { animation: none; opacity: var(--max); }
  .opkomen { animation: none; }
}

.opkomen { animation: opkomen 0.4s ease both; }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* Alleen zichtbaar als er echt iets misgaat */
#foutbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 12px 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.82rem;
  color: #2a0b06;
  background: #ffb0a0;
}

/* ---------- de balk bovenaan ---------- */
#nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(7, 13, 31, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  max-width: 720px;
  margin: 0 auto;
  padding: 11px 24px;
}

.nav-merk {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-maan {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: radial-gradient(circle at 34% 30%, #fff8e4 0%, var(--maan) 58%, #e0bd78 100%);
  box-shadow: 0 3px 12px rgba(255, 233, 184, 0.24);
  position: relative;
  flex-shrink: 0;
}

/* Twee kratertjes, zodat het vierkantje leest als een maan */
.nav-maan::before, .nav-maan::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(180, 148, 92, 0.28);
}
.nav-maan::before { width: 7px; height: 7px; top: 7px; left: 17px; }
.nav-maan::after  { width: 4px; height: 4px; top: 17px; left: 9px; }

.nav-naam {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tekst);
}

.nav-tabs { display: flex; align-items: center; gap: 3px; }

.nav-tab {
  padding: 8px 13px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--zacht);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}

.nav-tab:hover { background: rgba(255, 255, 255, 0.055); color: var(--tekst); }

.nav-tab.actief {
  font-weight: 600;
  color: #cfdcff;
  background: rgba(143, 179, 255, 0.16);
}

.nav-rechts { position: relative; margin-left: auto; }

.nav-type {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px 6px 11px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--zacht);
  background: none;
  border: 1px solid var(--kaart-rand);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.nav-type:hover { color: var(--tekst); border-color: rgba(255, 255, 255, 0.28); }

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  padding: 6px;
  background: #0d1731;
  border: 1px solid var(--kaart-rand);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.nav-mail {
  margin: 0;
  padding: 9px 12px 10px;
  font-size: 0.8rem;
  color: #6f7c9c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow-wrap: anywhere;
}

.nav-menu button {
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  color: var(--zacht);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.nav-menu button:hover { background: rgba(255, 255, 255, 0.06); color: var(--tekst); }

.nav-punt {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff8e4 0%, var(--maan) 60%, #dcb772 100%);
  flex-shrink: 0;
}

/* Op smalle schermen krimpt de pil tot alleen het bolletje. Hij mag
   NIET verdwijnen: je profiel, Plus, het verhaal en uitloggen zitten
   er allemaal achter. */
@media (max-width: 560px) {
  .nav-typenaam { display: none; }
  .nav-type { padding: 7px; }
  .nav-binnen { gap: 8px 12px; padding: 10px 16px; }
  .nav-tab { padding: 7px 10px; font-size: 0.86rem; }
  .nav-naam { display: none; }
}

/* Staat de balk er, dan mag de kop wat dichter naar boven */
#nav:not([hidden]) ~ .wrap header { padding-top: 44px; }

[hidden] { display: none !important; }

/* ---------- maan en koppen ---------- */
.maan {
  width: 78px;
  height: 78px;
  margin: 0 auto 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff8e4 0%, var(--maan) 55%, #e8c98a 100%);
  box-shadow: 0 0 40px rgba(255, 233, 184, 0.34), 0 0 110px rgba(255, 233, 184, 0.16);
  position: relative;
}

.maan.klein { width: 46px; height: 46px; margin-bottom: 20px; }

.maan::before, .maan::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(190, 160, 105, 0.22);
}
.maan::before { width: 17px; height: 17px; top: 22px; left: 44px; }
.maan::after  { width: 10px; height: 10px; top: 47px; left: 25px; }
.maan.klein::before { width: 10px; height: 10px; top: 13px; left: 26px; }
.maan.klein::after  { width: 6px;  height: 6px;  top: 28px; left: 15px; }

header { text-align: center; padding: 84px 0 48px; }
header.compact { padding: 56px 0 34px; }

h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 8.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h1.kleiner { font-size: clamp(1.7rem, 6vw, 2.3rem); }

.onderkop {
  margin: 0 auto;
  max-width: 32ch;
  color: var(--zacht);
  font-size: clamp(1.02rem, 3.4vw, 1.16rem);
}

.label {
  margin: 0 0 9px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--zacht);
}

/* ---------- knoppen ---------- */
.knop-groot {
  display: inline-block;
  padding: 17px 40px;
  font: inherit;
  font-size: 1.04rem;
  font-weight: 600;
  color: #071026;
  background: var(--maan);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 0.16s ease, transform 0.16s ease;
}

.knop-groot:hover { filter: brightness(1.06); }
.knop-groot:active { transform: scale(0.99); }

.knop-tekst {
  padding: 8px 4px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--zacht);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
}

.knop-tekst:hover { color: var(--tekst); }

:where(button, input, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- de test ---------- */
/* De prijs staat klein onder de knop, niet als lijstje erboven:
   eerst de beloning, dan pas wat het kost. */
.kleinvoordeel {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.86rem;
  color: #6f7c9c;
}

/* ---------- de voorpagina ---------- */
.blok {
  max-width: 32rem;
  margin: 0 auto 56px;
  text-align: center;
  color: #ccd5ee;
  font-size: 1.06rem;
}

.blok p { margin: 0 0 18px; }
.blok p:last-child { margin-bottom: 0; }

.blok .groot {
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--tekst);
}

.blok .klap {
  margin-top: 30px;
  font-size: clamp(1.45rem, 5.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--maan);
}

.feiten { display: grid; gap: 14px; margin: 0 0 56px; }

.feit {
  position: relative;
  padding: 24px 24px 24px 26px;
  background: var(--kaart);
  border: 1px solid var(--kaart-rand);
  border-radius: 16px;
}

.feit-nr {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(143, 179, 255, 0.42);
}

.feit h2 {
  margin: 0 0 9px;
  padding-right: 40px;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.feit p { margin: 0; color: #b9c4de; font-size: 0.99rem; }

.omslag {
  padding: 38px 26px 34px;
  text-align: center;
  background: linear-gradient(180deg, rgba(143, 179, 255, 0.11), rgba(143, 179, 255, 0.035));
  border: 1px solid rgba(143, 179, 255, 0.26);
  border-radius: 18px;
}

.omslag h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.omslag > p { margin: 0 auto; max-width: 32ch; color: #ccd5ee; }

/* ---------- de mailpoort ---------- */
.poort { max-width: 26rem; margin: 0 auto 34px; }

.mailvorm.groot input[type="email"] { flex: 1 1 100%; padding: 16px 18px; font-size: 1.02rem; }
.mailvorm.groot button { flex: 1 1 100%; padding: 16px; font-size: 1.02rem; }

.poortfout {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: #ffb0a0;
}

.poort-klein {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #6f7c9c;
}

.krijg {
  max-width: 26rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  color: var(--zacht);
  font-size: 0.97rem;
}

.krijg li { position: relative; margin-bottom: 11px; padding-left: 28px; }

.krijg li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}

.balk {
  height: 3px;
  margin-bottom: 34px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  overflow: hidden;
}

.balk div {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.32s ease;
}

.teller {
  margin: 0 0 12px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zacht);
}

.vraagtekst {
  margin: 0 0 26px;
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.opties { display: grid; gap: 10px; margin-bottom: 30px; }

.optie {
  width: 100%;
  padding: 17px 20px;
  text-align: left;
  font: inherit;
  font-size: 1.02rem;
  color: var(--tekst);
  background: var(--kaart);
  border: 1px solid var(--kaart-rand);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}

.optie:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); }
.optie:active { transform: scale(0.99); }
.optie.gekozen { background: rgba(143, 179, 255, 0.16); border-color: var(--accent); }

/* ---------- de uitslag ---------- */
.type-naam {
  margin: 0 0 10px;
  font-size: clamp(2rem, 7vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--maan);
}

.meters { margin: 34px 0; }

.meter { margin-bottom: 15px; }

.meter-kop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.88rem;
  color: var(--zacht);
}

.meter-baan {
  height: 7px;
  background: rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  overflow: hidden;
}

.meter-baan div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #b9cdff);
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.meter-baan.hoog div { background: linear-gradient(90deg, #ffb865, var(--maan)); }

/* ---------- kaarten ---------- */
.kaart {
  padding: 26px 24px;
  background: var(--kaart);
  border: 1px solid var(--kaart-rand);
  border-radius: 16px;
}

.kaart + .kaart { margin-top: 16px; }

.kaart h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.kaart p { margin: 0 0 15px; color: #ccd5ee; }
.kaart p:last-child { margin-bottom: 0; }

.stappen { margin: 0; padding: 0; list-style: none; counter-reset: stap; }

.stappen li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 40px;
  counter-increment: stap;
  color: #ccd5ee;
}

.stappen li:last-child { margin-bottom: 0; }

.stappen li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #071026;
  background: var(--accent);
  border-radius: 50%;
}

.waarschuwing {
  margin-top: 16px;
  padding: 16px 18px;
  background: rgba(255, 184, 101, 0.09);
  border-left: 3px solid #ffb865;
  border-radius: 0 10px 10px 0;
  color: #ffd9a8;
  font-size: 0.94rem;
}

section { margin-bottom: 40px; }

/* ---------- situaties ---------- */
.keuzes { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }

.keuze {
  width: 100%;
  padding: 19px 22px;
  text-align: left;
  font: inherit;
  font-size: 1.03rem;
  color: var(--tekst);
  background: var(--kaart);
  border: 1px solid var(--kaart-rand);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.keuze:hover { background: rgba(255, 255, 255, 0.085); border-color: rgba(255, 255, 255, 0.2); }

.keuze[aria-expanded="true"] {
  background: rgba(143, 179, 255, 0.13);
  border-color: rgba(143, 179, 255, 0.42);
}

.keuze .pijl { float: right; color: var(--zacht); transition: transform 0.18s ease; }
.keuze[aria-expanded="true"] .pijl { transform: rotate(90deg); }

.keuze .tip {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--accent);
}

.antwoord { margin-top: 14px; }

.doen {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(143, 179, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}

.doen strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

.doen p { margin: 0; color: var(--tekst); }

/* ---------- geluid ---------- */
.rij { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }

.pil {
  padding: 10px 17px;
  font: inherit;
  font-size: 0.93rem;
  color: var(--zacht);
  background: transparent;
  border: 1px solid var(--kaart-rand);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.pil:hover { color: var(--tekst); border-color: rgba(255, 255, 255, 0.28); }

.pil[aria-pressed="true"] {
  color: #071026;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.speelknop {
  width: 100%;
  padding: 17px;
  font: inherit;
  font-size: 1.04rem;
  font-weight: 600;
  color: #071026;
  background: var(--maan);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: filter 0.16s ease, transform 0.16s ease;
}

.speelknop:hover { filter: brightness(1.06); }
.speelknop:active { transform: scale(0.99); }
.speelknop.speelt { background: rgba(255, 255, 255, 0.14); color: var(--tekst); }

.resterend {
  margin: 14px 0 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: var(--zacht);
  min-height: 1.4em;
}

.volume { margin-top: 20px; }
.volume input { width: 100%; accent-color: var(--accent); }

/* ---------- het nachtboek ---------- */
.manen {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.maantje {
  width: 42px;
  height: 42px;
  padding: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--kaart-rand);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease;
}

.maantje:hover { transform: scale(1.08); border-color: rgba(255, 255, 255, 0.3); }

.maantje.aan {
  background: radial-gradient(circle at 34% 30%, #fff8e4 0%, var(--maan) 58%, #e0bd78 100%);
  border-color: transparent;
  box-shadow: 0 0 16px rgba(255, 233, 184, 0.3);
}

.cijfer-woord {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--maan);
  min-height: 1.5em;
}

#nacht-opslaan { margin-top: 22px; }
#nacht-opslaan:disabled { opacity: 0.35; cursor: default; }

.grafiek {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 150px;
  margin: 4px 0 18px;
}

.staaf-vak {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.staaf {
  width: 100%;
  border-radius: 5px 5px 3px 3px;
  transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Van slecht naar goed: koel en dof naar warm en helder */
.staaf.c1 { background: linear-gradient(180deg, #6f7fa8, #4a5674); }
.staaf.c2 { background: linear-gradient(180deg, #8090c0, #5a6890); }
.staaf.c3 { background: linear-gradient(180deg, var(--accent), #6a8ed4); }
.staaf.c4 { background: linear-gradient(180deg, #cfd9ff, #93b2f0); }
.staaf.c5 { background: linear-gradient(180deg, #fff3d4, var(--maan)); }
.staaf.leeg { background: rgba(255, 255, 255, 0.09); }

.staaf-dag {
  margin-top: 7px;
  font-size: 0.68rem;
  color: #5f6b8a;
}

.statjes {
  display: flex;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--kaart-rand);
}

.statjes div { flex: 1; text-align: center; }

.statjes strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--maan);
}

.statjes span {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--zacht);
}

.patroon-lijst { margin: 18px 0 0; padding: 0; list-style: none; }

.patroon-lijst li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #ccd5ee;
}

.patroon-lijst li:last-child { border-bottom: 0; }

.patroon-cijfer { font-weight: 700; color: var(--maan); }
.patroon-aantal { font-weight: 400; font-size: 0.84rem; color: var(--zacht); }

.binnenkort {
  margin: 18px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--kaart-rand);
  font-size: 0.88rem;
  color: #6f7c9c !important;
}

/* ---------- mail ---------- */
.mail {
  padding: 30px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(143, 179, 255, 0.1), rgba(143, 179, 255, 0.035));
  border: 1px solid rgba(143, 179, 255, 0.24);
  border-radius: 16px;
}

.mail h2 { margin: 0 0 8px; font-size: 1.14rem; }
.mail p  { margin: 0 auto 20px; max-width: 36ch; color: var(--zacht); font-size: 0.96rem; }

.mailvorm { display: flex; flex-wrap: wrap; gap: 9px; }

.mailvorm input[type="email"] {
  flex: 1 1 180px;
  min-width: 0;
  padding: 14px 16px;
  font: inherit;
  color: var(--tekst);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--kaart-rand);
  border-radius: 11px;
}

.mailvorm input::placeholder { color: #6f7c9c; }

.mailvorm button {
  padding: 14px 26px;
  font: inherit;
  font-weight: 600;
  color: #071026;
  background: var(--maan);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}

.bedankt { margin: 14px 0 0; color: var(--accent); font-size: 0.94rem; }

/* ---------- het verhaal ---------- */
.verhaal {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.06rem;
  color: #ccd5ee;
}

.verhaal p { margin: 0 0 22px; }

.verhaal .inzet {
  font-size: 1.2rem;
  color: var(--tekst);
}

/* De draai van het verhaal krijgt lucht om zich heen */
.verhaal .klap {
  margin: 34px 0;
  font-size: clamp(1.5rem, 5.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--maan);
}

.verhaal .uitgelicht {
  margin: 34px 0;
  padding: 22px 24px;
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--tekst);
  background: rgba(143, 179, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
}

.verhaal .slot {
  margin-top: 46px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: clamp(1.25rem, 4.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--maan);
}

/* Tweede regel iets lichter en in het blauw: twee regels even hard
   naast elkaar leest als schreeuwen. */
.verhaal .slot span {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  color: var(--accent);
}

a.knop-groot { text-decoration: none; }

footer {
  margin-top: 48px;
  text-align: center;
  font-size: 0.83rem;
  color: #5f6b8a;
}

footer p { margin: 0 0 8px; }

footer a { color: var(--zacht); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.16); }
footer a:hover { color: var(--tekst); }


/* ===============================================================
   Plus
   ===============================================================
   Een slot mag nooit een grijze vlek zijn. Je ziet je eigen cijfers
   vervaagd erdoorheen, met de uitleg eroverheen — dat overtuigt,
   een dichte deur niet.
   =============================================================== */

.grendel {
  position: relative;
  margin-top: 26px;
  border: 1px solid var(--kaart-rand);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.grendel-kijkje {
  padding: 18px 20px 22px;
  filter: blur(5px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  min-height: 120px;
}

.grendel-op {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 20px;
  text-align: center;
  background: linear-gradient(180deg,
    rgba(7, 13, 31, 0.72) 0%,
    rgba(7, 13, 31, 0.92) 55%,
    rgba(7, 13, 31, 0.97) 100%);
}

.grendel:not(:has(.grendel-kijkje)) .grendel-op { position: static; }

.grendel-op h3 { margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; }
.grendel-op p  { margin: 0; max-width: 34em; color: var(--zacht); font-size: 0.93rem; }

.grendel-merk, .prijs-vlag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nacht-diep);
  background: var(--maan);
}

.knop-plus {
  margin-top: 6px;
  padding: 10px 20px;
  font: inherit;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--nacht-diep);
  background: var(--maan);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.knop-plus:hover { filter: brightness(1.06); }

/* Dichte knopjes tussen de open knopjes */
.pil.op-slot { opacity: 0.5; border-style: dashed; }
.pil.op-slot:hover { opacity: 0.8; }
.slotje { margin-left: 7px; color: var(--maan); }

.eigen-tijd input {
  width: 84px;
  padding: 10px 14px;
  font: inherit;
  font-size: 0.93rem;
  color: var(--tekst);
  background: transparent;
  border: 1px solid var(--kaart-rand);
  border-radius: 999px;
}
.eigen-tijd input:focus { outline: none; border-color: var(--maan); }


/* ---------- de prijspagina ---------- */
.prijzen { display: grid; gap: 16px; margin-top: 8px; }

/* Geen align-items: start — dan zijn de kaarten even hoog en staan de
   voetregels op één lijn. Kaarten van ongelijke lengte naast elkaar
   lezen als "die ene is belangrijker", en dat klopt hier niet: het zijn
   drie manieren om hetzelfde te gebruiken. */
@media (min-width: 720px) {
  .prijzen { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  .prijzen.drie { grid-template-columns: 1fr 1fr 1fr; }
}

.prijskaart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--kaart-rand);
  border-radius: 18px;
  background: var(--kaart);
}


.prijskaart.uitgelicht {
  border-color: rgba(255, 233, 184, 0.4);
  background: rgba(255, 233, 184, 0.05);
}

.prijs-vlag { position: absolute; top: -11px; left: 24px; }

.prijs-naam {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--zacht);
}

.prijs-bedrag { margin: 0 0 20px; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; }
.prijs-bedrag span { display: block; margin-top: 7px; font-size: 0.87rem;
  font-weight: 400; line-height: 1.5; color: var(--zacht); }

.prijs-lijst { margin: 0 0 22px; padding: 0; list-style: none; }
.prijs-lijst li { position: relative; padding: 7px 0 7px 24px; color: #ccd5ee; font-size: 0.95rem; }
.prijs-lijst li::before {
  content: "";
  position: absolute;
  top: 15px; left: 2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--maan);
  opacity: 0.75;
}
.prijs-alles { font-weight: 600; color: var(--tekst) !important; }
.prijs-alles::before { display: none; }

.prijs-voet { margin: 16px 0 0; font-size: 0.83rem; color: var(--zacht); }
.prijs-actief { margin: 0; padding: 13px 0; font-weight: 600; color: var(--maan); }

/* De lijst rekt op zodat de voetregel onderaan blijft plakken: dan
   eindigen beide kaarten op dezelfde hoogte. Staat hier en niet bij
   .prijskaart, want een uitzondering hoort ná de regel waar hij een
   uitzondering op is. */
.prijskaart .prijs-lijst { flex: 1; }
.prijskaart .prijs-voet { margin-top: auto; padding-top: 4px; }

.plus-uitleg { margin-top: 4px; }
.voorproef { margin-top: 26px; border-style: dashed; }


/* ---------- overzicht voor de arts ---------- */
.arts-lijst { margin: 0; padding: 0; list-style: none; }
.arts-lijst li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
}
.arts-lijst li:last-child { border-bottom: 0; }
.arts-lijst li span:first-child { color: var(--zacht); }
.arts-lijst li span:last-child { text-align: right; }
.arts-alles { max-height: 320px; overflow-y: auto; }
.arts-voet { margin-top: 20px; font-size: 0.82rem; color: var(--zacht); text-align: center; }

/* Veel staafjes: dan passen de dagletters er niet meer onder */
.grafiek.dicht .staaf-dag { display: none; }
.grafiek.dicht .staaf-vak { min-width: 0; }


/* ---------- uitdraaien ---------- */
@media print {
  .lucht, .sterren, #nav, footer, .schermloos, .maan { display: none !important; }
  body { background: #fff; color: #111; }
  .kaart { border: 1px solid #ccc; background: #fff; break-inside: avoid; }
  .kaart h2 { color: #111; }
  .kaart p, .arts-lijst li span:first-child { color: #333; }
  .arts-alles { max-height: none; overflow: visible; }
  .arts-lijst li { border-bottom: 1px solid #ddd; }
}


/* ===============================================================
   Wie het gemaakt heeft
   =============================================================== */
.maker {
  margin-top: 52px;
  padding: 30px 26px;
  border: 1px solid var(--kaart-rand);
  border-radius: 18px;
  background: var(--kaart);
}

.maker h2 {
  margin: 0 0 16px;
  font-size: clamp(1.3rem, 4.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.maker p { margin: 0 0 15px; color: #ccd5ee; }

.maker-slot {
  margin: 22px 0 0 !important;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--maan) !important;
  font-weight: 600;
}

/* Op de Plus-pagina: waarom het helpt */
.steun {
  margin-top: 26px;
  padding: 26px 24px;
  border: 1px solid rgba(255, 233, 184, 0.28);
  border-radius: 18px;
  background: rgba(255, 233, 184, 0.045);
}
.steun h2 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 700; }
.steun p { margin: 0 0 13px; color: #ccd5ee; }
.steun p:last-child { margin-bottom: 0; }


/* ===============================================================
   De blog
   ===============================================================
   Eén pagina per vraag die mensen intypen. De kaarten zijn met opzet
   groot en rustig: iemand die dit om vier uur 's nachts leest, moet
   niet hoeven mikken.
   =============================================================== */
.artikellijst { display: grid; gap: 14px; margin-top: 8px; }

.artikelkaart {
  display: block;
  padding: 24px 22px;
  border: 1px solid var(--kaart-rand);
  border-radius: 18px;
  background: var(--kaart);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.artikelkaart:hover {
  border-color: rgba(255, 233, 184, 0.32);
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-2px);
}

.artikelkaart h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.15rem, 4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.artikelkaart p { margin: 0 0 14px; color: var(--zacht); font-size: 0.95rem; }

.artikel-datum {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5f6b8a;
}

.artikel-lees { font-size: 0.9rem; font-weight: 600; color: var(--maan); }

.terug-blog { color: var(--zacht); text-decoration: none; }
.terug-blog:hover { color: var(--tekst); }

/* Bronnen onder een artikel */
.bronnen { margin-top: 38px; }
.bronnen ul { margin: 0; padding-left: 20px; }
.bronnen li { margin-bottom: 11px; color: #ccd5ee; font-size: 0.92rem; line-height: 1.55; }
.bronnen li:last-child { margin-bottom: 0; }
.bronnen-voet { margin: 16px 0 0 !important; font-size: 0.85rem; color: var(--zacht); }

/* De afsluiter met de knop naar de test */
.artikel-eind {
  margin-top: 44px;
  padding: 32px 26px;
  border: 1px solid rgba(255, 233, 184, 0.22);
  border-radius: 18px;
  background: rgba(255, 233, 184, 0.04);
  text-align: center;
}

.artikel-eind h2 {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 4.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.artikel-eind p { margin: 0; color: #ccd5ee; }


/* ---------- het menu rechtsboven ---------- */
/* Links en knoppen moeten er identiek uitzien: op index.html zijn het
   knoppen die van scherm wisselen, op de blog zijn het echte links. */
.nav-menu-lijst { display: flex; flex-direction: column; }

.nav-menu a,
.nav-menu .nav-menu-lijst button {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  color: var(--zacht);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.nav-menu a:hover,
.nav-menu .nav-menu-lijst button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tekst);
}

.nav-menu a.actief,
.nav-menu .nav-menu-lijst button.actief {
  color: var(--maan);
  background: rgba(255, 233, 184, 0.07);
}

/* Uitloggen hoort er niet bij, dus een streep ertussen */
.nav-uit {
  margin-top: 6px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  color: #6f7c9c !important;
}


/* ===============================================================
   Plus onder de aandacht brengen
   ===============================================================
   Het strookje mag opvallen, maar het moet nog steeds klinken als
   dezelfde persoon die de rest schreef. Vandaar: geen uitroeptekens,
   geen kortingen, gewoon wat het is en wat het kost.
   =============================================================== */
.plusstrip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 233, 184, 0.3);
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(255, 233, 184, 0.085) 0%,
    rgba(255, 233, 184, 0.03) 100%);
}

.plusstrip > div { flex: 1 1 260px; }

.plusstrip p {
  margin: 7px 0 9px;
  color: var(--tekst);
  font-size: 1rem;
  line-height: 1.5;
}

.plusstrip-merk {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nacht-diep);
  background: var(--maan);
}

.plusstrip-prijs {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--maan);
}

.plusstrip .knop-plus { margin-top: 0; flex-shrink: 0; text-decoration: none; }

/* De Plus-tab in de balk */
.nav-tab.nav-plus { color: var(--maan); }
.nav-tab.nav-plus:hover { background: rgba(255, 233, 184, 0.1); color: var(--maan); }
.nav-tab.nav-plus.actief { background: rgba(255, 233, 184, 0.15); color: var(--maan); }

/* Eén regel onderaan elke pagina */
.voet-plus { color: #7c88a8; }
.voet-plus strong { color: var(--maan); font-weight: 600; }


/* ===============================================================
   Het oordeel
   ===============================================================
   Bovenaan het nachtboek, vóór alle cijfers. Niemand ontcijfert om
   vier uur 's nachts een grafiek — de vraag is "gaat het beter", en
   die beantwoorden we hier in één zin.
   =============================================================== */
.oordeel {
  margin-bottom: 18px;
  padding: 18px 22px;
  border: 1px solid var(--kaart-rand);
  border-left-width: 3px;
  border-radius: 0 14px 14px 0;
  background: var(--kaart);
}

.oordeel p { margin: 0; color: #ccd5ee; font-size: 1.02rem; line-height: 1.5; }
.oordeel strong { color: var(--tekst); }

.oordeel.beter    { border-left-color: var(--maan); }
.oordeel.slechter { border-left-color: #d98a8a; }
.oordeel.vlak     { border-left-color: var(--accent); }
.oordeel.wachten  { border-left-color: rgba(255, 255, 255, 0.18); }
.oordeel.wachten p { color: var(--zacht); }


/* ===============================================================
   De agenda
   =============================================================== */
.agenda-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.agenda-kop h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

.maand-knop {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--zacht);
  background: transparent;
  border: 1px solid var(--kaart-rand);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}

.maand-knop:hover:not(:disabled) { color: var(--tekst); border-color: rgba(255,255,255,.28); }
.maand-knop:disabled { opacity: 0.25; cursor: default; }

.agenda {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.agenda-letter {
  padding-bottom: 6px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5f6b8a;
}

.agenda-leeg { aspect-ratio: 1; }

.agenda-dag {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nacht-diep);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.agenda-dag:hover { transform: scale(1.08); border-color: rgba(255, 255, 255, 0.3); }

/* Dezelfde schaal als voorheen: grijsblauw is beroerd, crème is goed */
.agenda-dag.k1, .schaal-vak.k1 { background: linear-gradient(160deg, #6f7fa8, #4a5674); }
.agenda-dag.k2, .schaal-vak.k2 { background: linear-gradient(160deg, #8090c0, #5a6890); }
.agenda-dag.k3, .schaal-vak.k3 { background: linear-gradient(160deg, var(--accent), #6a8ed4); }
.agenda-dag.k4, .schaal-vak.k4 { background: linear-gradient(160deg, #cfd9ff, #93b2f0); }
.agenda-dag.k5, .schaal-vak.k5 { background: linear-gradient(160deg, #fff3d4, var(--maan)); }

.agenda-dag.k1, .agenda-dag.k2 { color: #e8ecf8; }

/* Niet ingevuld: leeg vakje met een flauw cijfer */
.agenda-dag.niets { color: #5f6b8a; }
.agenda-dag.later { opacity: 0.3; cursor: default; }
.agenda-dag.later:hover { transform: none; border-color: transparent; }

.agenda-dag.vandaag { box-shadow: 0 0 0 2px var(--maan); }

.agenda-detail {
  min-height: 1.4em;
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--zacht);
}

.agenda-schaal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 16px 0 4px;
  font-size: 0.72rem;
  color: #5f6b8a;
}

.schaal-vak { width: 17px; height: 9px; border-radius: 3px; }
.agenda-schaal span:first-child { margin-right: 4px; }
.agenda-schaal span:last-child { margin-left: 4px; }


/* ===============================================================
   Zoeken en rubrieken in de uitleg
   =============================================================== */
.zoekvak { margin: 4px 0 32px; }

.zoekvak input {
  width: 100%;
  padding: 15px 20px;
  font: inherit;
  font-size: 1rem;
  color: var(--tekst);
  background: var(--kaart);
  border: 1px solid var(--kaart-rand);
  border-radius: 999px;
  -webkit-appearance: none;
}

.zoekvak input::placeholder { color: #5f6b8a; }
.zoekvak input:focus {
  outline: none;
  border-color: rgba(255, 233, 184, 0.45);
  background: rgba(255, 255, 255, 0.075);
}

.zoek-uitslag {
  min-height: 1.3em;
  margin: 10px 4px 0;
  font-size: 0.87rem;
  color: var(--zacht);
}
.zoek-uitslag a { color: var(--maan); }

.rubriek { margin-bottom: 38px; }
.rubriek[hidden] { display: none; }

.rubriek-kop {
  margin: 0 0 4px;
  font-size: clamp(1.15rem, 3.8vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--maan);
}

.rubriek-uitleg { margin: 0 0 16px; color: var(--zacht); font-size: 0.93rem; }

.artikelkaart[hidden] { display: none; }

/* Verwante stukken onderaan een artikel */
.verwant { margin-top: 42px; }
.verwant .artikellijst { margin-top: 10px; }


/* ===============================================================
   Dieper invullen
   ===============================================================
   De snelle route blijft snel: cijfer aantikken en klaar. Alles
   hieronder is optioneel en zit standaard dichtgevouwen, want een
   dagboek dat vijf minuten kost vult niemand twee weken vol.
   =============================================================== */
.label-bij {
  margin-left: 8px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #5f6b8a;
}

.meer-knop {
  display: block;
  margin: 4px 0 6px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--accent);
}

#meer { margin-top: 6px; }

#notitie {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--tekst);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kaart-rand);
  border-radius: 14px;
  resize: vertical;
  min-height: 92px;
  -webkit-appearance: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

#notitie::placeholder { color: rgba(154, 166, 196, 0.45); }

#notitie:focus {
  outline: none;
  border-color: rgba(255, 233, 184, 0.45);
  background: rgba(255, 255, 255, 0.07);
}

.notitie-teller {
  min-height: 1.1em;
  margin: 6px 4px 0;
  text-align: right;
  font-size: 0.78rem;
  color: #5f6b8a;
}

.detail-notitie { display: block; margin-top: 4px; font-style: italic; color: #8f9bbb; }
.arts-notitie { display: block; margin-top: 3px; font-style: italic; color: #7c88a8; }


/* ===============================================================
   Wat je nachten van je profiel zeggen
   =============================================================== */
.leren, .leren-wacht { margin-top: 16px; }

.leren.eens   { border-left: 3px solid var(--maan); }
.leren.oneens { border-left: 3px solid var(--accent); }

.leren h2 { margin-top: 6px; }
.leren-uitleg { color: var(--maan) !important; font-weight: 600; }
.leren-wacht p { color: var(--zacht); }
.leren .knop-plus { margin-top: 8px; }

/* Twee balkjes onder elkaar: wat de test zei, wat je nachten zeggen */
.tweemeters { margin-top: 6px; }
.tweemeter { margin-bottom: 16px; }

.tweemeter-kop {
  margin-bottom: 6px;
  font-size: 0.86rem;
  color: var(--zacht);
}

.tweemeter-baan {
  height: 7px;
  margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
}

.tweemeter-baan div { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.uit-test  { background: var(--accent); }
.uit-nacht { background: var(--maan); }

.tweemeter-legenda { margin-top: 14px; font-size: 0.82rem; color: var(--zacht); }
.stip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }
.stip.test  { background: var(--accent); }
.stip.nacht { background: var(--maan); }


/* ===============================================================
   Tips bij de extra vragen
   ===============================================================
   Mensen vullen alleen iets in als ze weten waarom het ertoe doet.
   Eén regel per vraag, klein, nooit in de weg.
   =============================================================== */
.wenk {
  margin: -12px 0 22px;
  padding-left: 13px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  font-size: 0.86rem;
  line-height: 1.5;
  color: #7c88a8;
}

.wenk em { color: #9aa6c4; font-style: italic; }

.wenk-sterk {
  margin-top: 6px;
  border-left-color: var(--maan);
  color: #9aa6c4;
}
.wenk-sterk strong { color: var(--maan); }


/* ===============================================================
   Beloftes aan jezelf
   =============================================================== */
.belofte { border-left: 3px solid var(--maan); }
.belofte.vraag { border-left-color: var(--accent); }
.belofte h2 { margin-top: 6px; }

.belofte-tekst {
  margin: 4px 0 12px !important;
  font-size: clamp(1.1rem, 3.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--maan) !important;
}

.belofte-bij { margin: 12px 0 0 !important; font-size: 0.86rem; color: #7c88a8 !important; }

.belofte-keuzes { display: flex; flex-direction: column; gap: 7px; margin: 18px 0 16px; }

.belofte-optie {
  padding: 12px 16px;
  text-align: left;
  font: inherit;
  font-size: 0.93rem;
  line-height: 1.4;
  color: #ccd5ee;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--kaart-rand);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.belofte-optie:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255,255,255,.06); }
.belofte-optie.gekozen {
  border-color: rgba(255, 233, 184, 0.5);
  background: rgba(255, 233, 184, 0.08);
  color: var(--tekst);
}

.belofte-eigen { display: flex; gap: 9px; flex-wrap: wrap; }

.belofte-eigen input {
  flex: 1 1 200px;
  padding: 13px 17px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--tekst);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--kaart-rand);
  border-radius: 999px;
  -webkit-appearance: none;
}
.belofte-eigen input::placeholder { color: rgba(154, 166, 196, 0.45); }
.belofte-eigen input:focus { outline: none; border-color: rgba(255, 233, 184, 0.45); }
.belofte-eigen .knop-plus { margin-top: 0; }

.belofte-antwoord { margin: 16px 0 0; }

.belofte-uitkomst.werkt { border-left: 3px solid var(--maan); }
.belofte-uitkomst.vlak  { border-left: 3px solid var(--accent); }
.belofte-wacht { border-left: 3px solid rgba(255, 255, 255, 0.16); }
.belofte-wacht p { color: var(--zacht); }

.belofte-lijst { margin: 0; padding: 0; list-style: none; }
.belofte-lijst li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.belofte-lijst li:last-child { border-bottom: 0; }
.belofte-regel { font-size: 0.93rem; color: #ccd5ee; }
.belofte-winst { flex-shrink: 0; font-weight: 700; color: var(--maan); }
.belofte-nog { font-weight: 400; font-size: 0.83rem; color: #5f6b8a; }

/* Belofte al gemaakt: rustiger, want er valt niets meer te kiezen */
.belofte.gemaakt { background: rgba(255, 233, 184, 0.05); }


/* ===============================================================
   Wie je bent
   ===============================================================
   Elk veld optioneel, en bij elk veld staat waarom het gevraagd
   wordt. Zonder die uitleg vult niemand zijn leeftijd in, en terecht.
   =============================================================== */
.mij-vraag h2 { margin-bottom: 8px; font-size: 1.12rem; }

.mij-waarom {
  margin: 0 0 16px !important;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #7c88a8 !important;
}

.mij-vraag .rij { margin-bottom: 0; }

.mij-tijden { display: flex; gap: 22px; flex-wrap: wrap; }

.mij-tijden label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--zacht);
}

.mij-tijden input {
  padding: 10px 14px;
  font: inherit;
  font-size: 0.98rem;
  color: var(--tekst);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--kaart-rand);
  border-radius: 12px;
  -webkit-appearance: none;
}
.mij-tijden input:focus { outline: none; border-color: rgba(255, 233, 184, 0.45); }

.mij-uitkomst {
  margin: 16px 0 0 !important;
  font-weight: 600;
  color: var(--maan) !important;
}

.mij-slot {
  margin: 30px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: #5f6b8a;
}

/* Wat er uit je antwoorden volgt */
.inzicht { border-left: 3px solid var(--maan); }
.inzicht h2 { margin-bottom: 10px; font-size: 1.1rem; }
.inzicht em { color: var(--maan); font-style: italic; }

.mij-leeg { border-style: dashed; }
.mij-leeg p { color: var(--zacht); margin: 0; }

/* De uitnodiging op je profielpagina */
.mij-nodig {
  border-left: 3px solid var(--accent);
  margin-top: 16px;
}
.mij-nodig h2 { margin: 6px 0 10px; font-size: 1.12rem; }
.mij-nodig .knop-plus { margin-top: 6px; }

.mij-klaar { margin-top: 16px; border-left: 3px solid var(--maan); }
.mij-klaar p { margin-bottom: 6px; }


/* ===============================================================
   De prijs, uitgesplitst
   ===============================================================
   Negentien euro in één keer voelt als een uitgave. Vijf cent per
   nacht voelt als niets — en het is exact hetzelfde bedrag. Dat is
   geen trucje zolang je allebei de getallen laat zien, en dat doen we.
   =============================================================== */
.prijs-bedrag .prijs-jaar {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--zacht);
}

.prijs-nacht {
  margin: 14px 0 6px;
  font-size: 0.93rem;
  line-height: 1.55;
  color: #ccd5ee;
}
.prijs-nacht strong { color: var(--maan); }

.prijs-anders {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: #7c88a8;
}

.prijs-voet strong { color: var(--tekst); }

/* De rustige Plus-regel onderaan de voorpagina. Hier komt iemand
   binnen die nog nooit van je gehoord heeft, dus dit mag niet
   schreeuwen — het plant alleen een zaadje voor later. */
.voorpagina-plus {
  max-width: 30em;
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #7c88a8;
  text-align: center;
}
.voorpagina-plus strong { color: var(--maan); font-weight: 600; }

.onderkop.klein { font-size: 0.9rem; color: #7c88a8; margin-top: 14px; }


/* ===============================================================
   Het losse rapport
   ===============================================================
   Een aftelling naar veertien nachten. Dat is niet alleen een
   verkooppraatje: onder de veertien is er te weinig om iets zinnigs
   over te zeggen, en dat staat er ook.
   =============================================================== */
.rapport-teller { border-left: 3px solid var(--accent); }
.rapport-teller.klaar { border-left-color: var(--maan); }
.rapport-teller h2 { margin: 6px 0 10px; font-size: 1.25rem; }

.rapport-baan {
  height: 7px;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  overflow: hidden;
}
.rapport-baan div {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--maan));
  transition: width 0.6s ease;
}

.rapport-lijst { margin: 0; padding: 0; list-style: none; }
.rapport-lijst li {
  padding: 12px 0 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  color: #ccd5ee;
  line-height: 1.55;
}
.rapport-lijst li:last-child { border-bottom: 0; }
.rapport-lijst li::before {
  content: "";
  position: absolute;
  top: 21px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--maan);
  opacity: .7;
}
.rapport-lijst strong { color: var(--tekst); }

.rapport-eerlijk { border-left: 3px solid var(--maan); }
.rapport-arts { border-left: 3px solid #d98a8a; }

.rapport-koop { text-align: center; border-color: rgba(255, 233, 184, 0.32); }
.rapport-prijs {
  margin: 4px 0 20px !important;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rapport-prijs span {
  display: block;
  margin-top: 5px;
  font-size: 0.87rem;
  font-weight: 400;
  color: var(--zacht);
}
.rapport-wacht { margin: 0 !important; font-weight: 600; color: var(--maan) !important; }
.rapport-klein { margin: 14px 0 0 !important; font-size: 0.84rem; color: #7c88a8 !important; }

.rapport-stappen { margin: 0 0 20px; padding-left: 20px; }
.rapport-stappen li { margin-bottom: 10px; color: #ccd5ee; line-height: 1.55; }

.geenabo { margin-top: 26px; border-left: 3px solid var(--accent); }
.geenabo strong { color: var(--maan); }

/* De aankondiging elders in de site */
.rapportstrip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid rgba(143, 179, 255, 0.28);
  border-radius: 16px;
  background: rgba(143, 179, 255, 0.05);
}
.rapportstrip.klaar {
  border-color: rgba(255, 233, 184, 0.34);
  background: rgba(255, 233, 184, 0.06);
}
.rapportstrip > div { flex: 1 1 260px; }
.rapportstrip p { margin: 8px 0 9px; color: var(--tekst); line-height: 1.5; }

.rapportstrip-merk {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nacht-diep);
  background: var(--accent);
}
.rapportstrip.klaar .rapportstrip-merk { background: var(--maan); }

.rapportstrip-prijs {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--zacht);
}
.rapportstrip .knop-plus { margin-top: 0; flex-shrink: 0; }

/* De doorgestreepte prijs voor wie Plus heeft */
.rapport-oud {
  display: inline !important;
  margin: 0 !important;
  font-size: 1.5rem !important;
  color: #5f6b8a !important;
  text-decoration: line-through;
}
.rapport-korting {
  margin: -10px 0 20px !important;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--zacht) !important;
}

/* Knoppen in een prijskaart vullen de breedte: drie kaarten naast
   elkaar zien er anders rommelig uit met drie verschillend brede
   knoppen. */
.prijskaart .breed {
  display: block;
  width: 100%;
  text-align: center;
}

/* De uitleg over waar het geld heen gaat mag korter en rustiger dan
   de kaarten erboven — daar is de keuze al gemaakt. */
.steun h2 { font-size: 1.1rem; }
.steun p { margin-bottom: 0; font-size: 0.93rem; line-height: 1.6; }
.steun a { color: var(--maan); }

/* Drie kaarten passen niet in de leeskolom van 720px — dan wordt elke
   kaart 210 pixels breed en breekt elke regel drie keer. Deze breekt
   daarom uit de kolom, maar alleen als er ook echt ruimte is. */
@media (min-width: 1000px) {
  .prijzen.drie {
    width: min(1080px, 94vw);
    margin-left: 50%;
    transform: translateX(-50%);
  }
}


/* ===============================================================
   Doorvertellen
   ===============================================================
   Verschijnt alleen als iemands eigen cijfers laten zien dat het
   werkt. Daarom mag het er warm uitzien: op dat moment vraag je
   geen gunst, je biedt iemand iets aan om door te geven.
   =============================================================== */
.delen {
  margin-top: 20px;
  border-left: 3px solid var(--maan);
  background: rgba(255, 233, 184, 0.05);
}

.delen p { color: #ccd5ee; }
.delen strong { color: var(--maan); }

.delen-vraag {
  margin: 16px 0 18px !important;
  font-weight: 600;
  color: var(--tekst) !important;
}

.delen-knoppen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.delen-knoppen .knop-plus { margin-top: 0; }
.delen-knoppen .knop-tekst { padding: 0; font-size: 0.9rem; color: var(--zacht); }

.delen-klein {
  min-height: 1.2em;
  margin: 14px 0 0 !important;
  font-size: 0.86rem;
  color: var(--maan) !important;
}


/* ===============================================================
   De vragen die mensen tegenhouden
   ===============================================================
   Dichtgeklapt kost elke vraag één regel, dus de pagina wordt niet
   langer voor wie al overtuigd is. Wie twijfelt klapt precies die
   ene vraag open. Dit is de <details> van de browser zelf: werkt
   zonder JavaScript en met het toetsenbord.
   =============================================================== */
.bezwaren {
  max-width: 40rem;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bezwaar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bezwaar summary {
  position: relative;
  padding: 17px 34px 17px 2px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tekst);
  cursor: pointer;
  list-style: none;
  transition: color 0.16s ease;
}

.bezwaar summary::-webkit-details-marker { display: none; }
.bezwaar summary:hover { color: var(--maan); }

/* Het plusje rechts, dat een minnetje wordt als hij openstaat */
.bezwaar summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: var(--zacht);
}
.bezwaar[open] summary::after { content: "−"; color: var(--maan); }
.bezwaar[open] summary { color: var(--maan); }

.bezwaar p {
  margin: 0 0 20px;
  padding-right: 34px;
  color: #ccd5ee;
  font-size: 0.95rem;
  line-height: 1.65;
}

.bezwaar a { color: var(--maan); }
.bezwaar em { color: var(--tekst); font-style: italic; }


/* ===============================================================
   Welkom terug
   =============================================================== */
.terug {
  margin-bottom: 18px;
  border-left: 3px solid var(--accent);
}
.terug.eerste { border-left-color: var(--maan); }
.terug.lang { border-left-color: var(--maan); }
.terug strong { color: var(--maan); }
.terug-klein {
  margin: 12px 0 0 !important;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--maan) !important;
}

/* De volgende stap onderaan een scherm dat anders doodloopt */
.volgende { margin-top: 30px; border-left: 3px solid var(--accent); }
.volgende h2 { margin-bottom: 10px; font-size: 1.1rem; }
.volgende .knop-plus { margin-top: 6px; }


/* ===============================================================
   Voor jou
   ===============================================================
   De stukken die bij iemands slaaptype horen, bovenaan de blog. Mag
   opvallen: dit is het enige deel van de pagina waarvan we zeker
   weten dat het over hém gaat.
   =============================================================== */
.voorjou {
  margin-bottom: 42px;
  padding: 26px 24px 8px;
  border: 1px solid rgba(255, 233, 184, 0.28);
  border-radius: 18px;
  background: rgba(255, 233, 184, 0.045);
}

.voorjou-kop {
  margin: 4px 0 6px;
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--maan);
}

.voorjou-bij { margin: 0 0 18px; color: var(--zacht); font-size: 0.93rem; }
.voorjou-bij em { color: var(--tekst); font-style: italic; }
.voorjou .artikellijst { margin-bottom: 18px; }


/* ===============================================================
   Wat dit is, en wat er nu gebeurt
   =============================================================== */
.welkom { margin-bottom: 20px; border-left: 3px solid var(--maan); }

.welkom-stappen { margin: 18px 0 0; padding-left: 22px; }
.welkom-stappen li {
  margin-bottom: 13px;
  color: #ccd5ee;
  line-height: 1.6;
}
.welkom-stappen li::marker { color: var(--maan); font-weight: 700; }
.welkom-stappen strong { color: var(--maan); }

.welkom-slot {
  margin: 18px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  color: var(--zacht) !important;
}