/* Kindcall: eigen huisstijl. Diep zeegroen, zonnegeel en koraal, ronde vormen, geluidsgolven. */
:root {
  --nacht: #0d3b3f;
  --nacht-2: #134a4f;
  --zee: #1d6f6a;
  --zon: #ffc93c;
  --zon-licht: #fff3c4;
  --koraal: #ff6f59;
  --koraal-licht: #ffe2dc;
  --munt: #e8f4f0;
  --wit: #ffffff;
  --grond: #f7faf9;
  --inkt: #16302f;
  --zacht: #557371;
  --lijn: #d8e7e3;
  --rood: #d63a2a;
  --rond: 28px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

h1, h2, h3, .logo { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.8rem); line-height: 0.98; margin: 0 0 22px; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1.04; margin: 0 0 16px; }
h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 8px; font-weight: 700; }
p { margin: 0 0 14px; }
a { color: var(--zee); }
.zon-tekst { background: linear-gradient(transparent 58%, var(--zon) 58%, var(--zon) 92%, transparent 92%); padding: 0 4px; }

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

/* Kop */
.kop { position: sticky; top: 0; z-index: 10; background: var(--nacht); color: #fff; }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.logo { font-size: 1.7rem; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: -0.04em; }
.logo-bol { width: 36px; height: 36px; border-radius: 12px 12px 12px 3px; background: var(--zon); display: grid; place-items: center; }
.logo-bol::before { content: ""; width: 16px; height: 12px; background:
  linear-gradient(var(--nacht), var(--nacht)) 0 50% / 3px 6px no-repeat,
  linear-gradient(var(--nacht), var(--nacht)) 50% 50% / 3px 12px no-repeat,
  linear-gradient(var(--nacht), var(--nacht)) 100% 50% / 3px 8px no-repeat; }
.kop nav { display: flex; gap: 26px; align-items: center; }
.kop nav a { color: #d7ecea; text-decoration: none; font-size: 0.98rem; }
.kop nav a:hover { color: var(--zon); }
.kop .meta { color: #d7ecea; }

.knop {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--zon); color: var(--nacht);
  text-decoration: none; padding: 16px 28px; border-radius: 16px;
  border: none; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 0 #d9a51c; transition: transform 0.1s, box-shadow 0.1s;
}
.knop:hover { transform: translateY(-1px); box-shadow: 0 5px 0 #d9a51c; color: var(--nacht); }
.knop:active { transform: translateY(3px); box-shadow: 0 1px 0 #d9a51c; }
.knop.licht { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.knop.licht:hover { box-shadow: inset 0 0 0 2px var(--zon); color: var(--zon); }
.kop .knop { padding: 10px 18px; white-space: nowrap; box-shadow: none; }
.kaart .knop.licht, .app .knop.licht { color: var(--nacht); box-shadow: inset 0 0 0 2px var(--lijn); }
.kaart .knop.licht:hover, .app .knop.licht:hover { box-shadow: inset 0 0 0 2px var(--zee); color: var(--zee); }

/* Held: donker, met een levend gesprek */
.held { background: var(--nacht); color: #fff; padding: 56px 0 120px; position: relative; overflow: hidden; }
.held::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: var(--grond); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.held .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.held .lead { font-size: 1.28rem; color: #cfe6e3; max-width: 32em; }
.held .acties { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.held .klein { font-size: 0.95rem; color: #9fc4c0; margin-top: 18px; }
.held .zon-tekst { background: none; color: var(--zon); padding: 0; }

.belkaart { background: var(--nacht-2); border: 1px solid #23605f; border-radius: 36px; padding: 28px; position: relative; }
.belkaart .wie { display: flex; align-items: center; gap: 14px; }
.belkaart .foto { width: 58px; height: 58px; border-radius: 50%; background: var(--zon); color: var(--nacht); display: grid; place-items: center; font: 800 1.6rem "Bricolage Grotesque", sans-serif; position: relative; }
.belkaart .foto::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--zon); opacity: 0; animation: puls 2.2s ease-out infinite; }
@keyframes puls { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
.belkaart .wie strong { display: block; font-size: 1.15rem; }
.belkaart .wie span { color: #9fc4c0; font-size: 0.9rem; }
.golf { display: flex; align-items: center; gap: 5px; height: 64px; margin: 22px 0; }
.golf i { flex: 1; background: var(--zon); border-radius: 4px; height: 20%; animation: golf 1.1s ease-in-out infinite; }
.golf i:nth-child(3n) { animation-delay: 0.15s; }
.golf i:nth-child(3n+1) { animation-delay: 0.35s; background: #ffe08a; }
.golf i:nth-child(4n) { animation-delay: 0.55s; }
.golf i:nth-child(5n) { animation-delay: 0.75s; background: var(--koraal); }
@keyframes golf { 0%, 100% { height: 18%; } 50% { height: 95%; } }
.ondertitel { min-height: 5.2em; font-size: 1.12rem; line-height: 1.5; }
.ondertitel .spreker { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--zon); margin-bottom: 4px; font-weight: 700; }
.belkaart .onthoudt { position: absolute; right: -18px; bottom: -26px; background: var(--koraal); color: #fff; border-radius: 18px 18px 4px 18px; padding: 12px 16px; font-size: 0.9rem; max-width: 240px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.45); }

/* Secties */
section.blok { padding: 84px 0; }
section.blok.munt { background: var(--munt); }
section.blok.donker { background: var(--nacht); color: #fff; }
.kicker { display: inline-block; background: var(--zon-licht); color: var(--nacht); font-weight: 700; font-size: 0.85rem; padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; }
.donker .kicker { background: rgba(255, 201, 60, 0.15); color: var(--zon); }
.intro { max-width: 760px; margin-bottom: 40px; }
.intro p { color: var(--zacht); font-size: 1.15rem; }
.donker .intro p { color: #cfe6e3; }

/* Voor wie: vier mensen */
.wie-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wie-kaart { background: var(--wit); border-radius: var(--rond); padding: 26px; border: 1px solid var(--lijn); display: flex; flex-direction: column; gap: 10px; }
.wie-kaart .icoon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; }
.wie-kaart:nth-child(1) .icoon { background: var(--zon-licht); }
.wie-kaart:nth-child(2) .icoon { background: var(--koraal-licht); }
.wie-kaart:nth-child(3) .icoon { background: var(--munt); }
.wie-kaart:nth-child(4) .icoon { background: #e7e3fb; }
.wie-kaart p { color: var(--zacht); margin: 0; font-size: 0.98rem; }

/* Een dag met Kindcall: tijdlijn */
.dag { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.dag::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 3px; background: repeating-linear-gradient(90deg, var(--zee) 0 10px, transparent 10px 18px); }
.moment { position: relative; padding: 0 18px 0 0; }
.moment .uur { display: inline-block; background: var(--nacht); color: var(--zon); font-weight: 700; border-radius: 999px; padding: 12px 18px; position: relative; font-variant-numeric: tabular-nums; }
.moment h3 { margin-top: 20px; }
.moment p { color: var(--zacht); font-size: 0.98rem; }

/* Twee paden */
.paden { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pad { border-radius: var(--rond); padding: 34px; }
.pad.zelf { background: var(--zon); color: var(--nacht); }
.pad.ander { background: var(--nacht-2); color: #fff; }
.pad ul { padding-left: 20px; margin: 0; }
.pad li { margin-bottom: 6px; }

.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lijst li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.lijst li::before { content: ""; width: 24px; height: 24px; margin-top: 3px; border-radius: 8px; background: var(--zee) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.lijst.niet li::before { background: var(--koraal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.donker .lijst li::before { background-color: var(--zon); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230d3b3f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Verslag als notificatie op een gsm */
.gsm { background: #0a2a2d; border-radius: 44px; padding: 16px; max-width: 380px; margin: 0 auto; box-shadow: 0 40px 70px -35px rgba(13, 59, 63, 0.6); }
.gsm-scherm { background: linear-gradient(160deg, #1d6f6a, #0d3b3f); border-radius: 32px; padding: 54px 14px 26px; min-height: 420px; }
.gsm .klok { text-align: center; color: #fff; font: 800 3.4rem "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; margin-bottom: 24px; }
.melding-pop { background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 14px 16px; margin-bottom: 10px; font-size: 0.92rem; }
.melding-pop .bron { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--zacht); margin-bottom: 4px; }
.melding-pop .bron i { width: 18px; height: 18px; border-radius: 6px 6px 6px 2px; background: var(--zon); display: inline-block; }
.melding-pop.let-op { border-left: 5px solid var(--koraal); }

.vraagwolk { display: flex; flex-wrap: wrap; gap: 10px; }
.vraagwolk span { background: var(--wit); border: 2px solid var(--lijn); border-radius: 18px 18px 18px 4px; padding: 10px 16px; font-size: 0.97rem; }
.vraagwolk span:nth-child(3n) { border-color: var(--zon); }
.vraagwolk span:nth-child(4n) { border-color: #9fd3c9; }
.vraagwolk span.uit { text-decoration: line-through; color: var(--zacht); border-style: dashed; }

.nood-blok { background: var(--koraal); color: #fff; border-radius: 36px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.nood-blok p { color: #fff3f0; }
.nood-blok .stappen-nood { display: grid; gap: 12px; counter-reset: n; }
.nood-blok .stappen-nood div { background: rgba(255, 255, 255, 0.16); border-radius: 18px; padding: 16px 18px 16px 58px; position: relative; }
.nood-blok .stappen-nood div::before { counter-increment: n; content: counter(n); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--koraal); font-weight: 800; display: grid; place-items: center; }

.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.prijs { background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--rond); padding: 30px; display: flex; flex-direction: column; }
.prijs.uitgelicht { border-color: var(--nacht); background: var(--nacht); color: #fff; }
.prijs .bedrag { font: 800 2.8rem "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; margin: 6px 0 2px; }
.prijs .per { color: var(--zacht); font-size: 0.92rem; margin-bottom: 16px; }
.prijs.uitgelicht .per { color: #9fc4c0; }
.prijs ul { padding-left: 20px; margin: 0 0 22px; flex: 1; }
.prijs .label { align-self: flex-start; background: var(--zon); color: var(--nacht); font-size: 0.8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }

.faq { max-width: 860px; }
.faq details { border-bottom: 2px solid var(--lijn); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 800 1.5rem "Bricolage Grotesque", sans-serif; color: var(--zee); line-height: 1; }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin: 12px 0 0; color: var(--zacht); }

.slot { background: var(--zon); text-align: center; padding: 84px 0; }
.slot p { font-size: 1.2rem; max-width: 36em; margin: 0 auto 26px; }
.slot .knop { background: var(--nacht); color: #fff; box-shadow: 0 4px 0 #04191b; }

footer { background: var(--nacht); color: #9fc4c0; padding: 36px 0 48px; font-size: 0.92rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: #fff; }

/* Account en Mijn Kindcall */
.paneel { max-width: 480px; margin: 48px auto 80px; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 34px; box-shadow: 0 30px 60px -40px rgba(13, 59, 63, 0.45); }
.paneel h1 { font-size: 2.1rem; }
.tabs { display: flex; gap: 6px; background: var(--munt); border-radius: 16px; padding: 5px; margin-bottom: 24px; }
.tabs button { flex: 1; border: none; background: transparent; padding: 11px; border-radius: 12px; font: inherit; font-weight: 700; color: var(--zacht); cursor: pointer; }
.tabs button.aan { background: var(--nacht); color: #fff; }
form.velden { display: grid; gap: 14px; }
form.velden label, .veld { display: grid; gap: 5px; font-size: 0.92rem; color: var(--zacht); }
form.velden input, form.velden textarea, form.velden select, .veld select {
  font: inherit; font-size: 16px; color: var(--inkt); padding: 13px 14px; border: 2px solid var(--lijn); border-radius: 14px; background: #fff;
}
form.velden input:focus, form.velden textarea:focus, form.velden select:focus { outline: none; border-color: var(--zee); }
form.velden textarea { min-height: 76px; resize: vertical; }
form.velden .knop { justify-self: start; }
.keuze-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.keuze-rij label { display: block; cursor: pointer; position: relative; }
.keuze-rij input { position: absolute; opacity: 0; }
.keuze-rij span { display: block; border: 2px solid var(--lijn); border-radius: 14px; padding: 14px; color: var(--inkt); font-weight: 700; text-align: center; }
.keuze-rij input:checked + span { border-color: var(--nacht); background: var(--nacht); color: #fff; }
.fout { color: var(--rood); font-size: 0.92rem; min-height: 1.2em; margin: 0; }
.ok { color: var(--zee); font-size: 0.92rem; }

.app { padding: 32px 0 80px; }
.app-kop { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.app-kop h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0; }
.app-tabs { display: flex; gap: 6px; margin-bottom: 24px; overflow-x: auto; }
.app-tabs button { border: 2px solid var(--lijn); background: var(--wit); font: inherit; font-weight: 700; color: var(--zacht); padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.app-tabs button.aan { color: #fff; background: var(--nacht); border-color: var(--nacht); }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 22px 24px; margin-bottom: 14px; }
.kaart h3 { margin-bottom: 8px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.persoon-kaart { display: flex; flex-direction: column; gap: 10px; border-top: 6px solid var(--zon); }
.persoon-kaart .naam { font: 800 1.45rem "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; }
.persoon-kaart .acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.knop.klein { padding: 10px 18px; font-size: 0.92rem; box-shadow: 0 3px 0 #d9a51c; }
.knop.klein.licht { box-shadow: inset 0 0 0 2px var(--lijn); }
.melding { border-left: 6px solid var(--zon); }
.melding.nood { border-left-color: var(--rood); background: #fff1ee; }
.melding.gelezen { opacity: 0.55; }
.meta { font-size: 0.86rem; color: var(--zacht); }
.labels { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.label-pil { font-size: 0.8rem; padding: 4px 12px; border-radius: 999px; background: var(--munt); }
.label-pil.rood { background: var(--koraal); color: #fff; }
.label-pil.groen { background: #cdeee2; }
.transcript { font-size: 0.92rem; color: var(--zacht); white-space: pre-wrap; margin-top: 8px; }
.belink { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.belink input { flex: 1; min-width: 200px; font: inherit; font-size: 14px; padding: 11px 13px; border: 2px solid var(--lijn); border-radius: 12px; background: var(--grond); color: var(--zacht); }
.terug { background: none; border: none; font: inherit; color: var(--zee); font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 10px; }
.thema { border: 1px solid var(--lijn); border-radius: 20px; background: var(--wit); margin-bottom: 10px; overflow: hidden; }
.thema > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; font-weight: 700; }
.thema > summary::-webkit-details-marker { display: none; }
.thema[open] > summary { background: var(--munt); }
.thema .vraag { display: flex; gap: 12px; align-items: flex-start; padding: 11px 20px; border-top: 1px solid var(--munt); font-size: 0.97rem; }
.thema .vraag.uit span { text-decoration: line-through; color: var(--zacht); }
.thema .vraag small { color: var(--zee); margin-left: auto; white-space: nowrap; }
.schakel { position: relative; width: 48px; height: 28px; flex: none; }
.schakel input { opacity: 0; width: 0; height: 0; }
.schakel span { position: absolute; inset: 0; background: #c9d8d5; border-radius: 999px; transition: 0.2s; cursor: pointer; }
.schakel span::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.schakel input:checked + span { background: var(--zee); }
.schakel input:checked + span::before { transform: translateX(20px); }
.zoek { width: 100%; font: inherit; font-size: 16px; padding: 13px 15px; border: 2px solid var(--lijn); border-radius: 14px; margin-bottom: 14px; }
.verhaal { font-size: 1.12rem; line-height: 1.65; border-left: 4px solid var(--zon); padding-left: 16px; }
.leeg { color: var(--zacht); }
iframe.mail { width: 100%; height: 680px; border: 1px solid var(--lijn); border-radius: 18px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 960px) {
  .held .wrap, .twee, .nood-blok, .paden { grid-template-columns: 1fr; }
  .wie-raster { grid-template-columns: 1fr 1fr; }
  .dag { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .dag::before { display: none; }
  .prijzen { grid-template-columns: 1fr; }
  .kop nav a:not(.knop):not(.inlog):not(.ik-chip) { display: none; }
  section.blok { padding: 60px 0; }
  .nood-blok { padding: 30px; }
  .belkaart .onthoudt { right: 10px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .wrap { padding: 0 16px; }
  .kop .wrap { height: 62px; }
  .kop nav .knop { display: none; }
  .held { padding: 28px 0 100px; }
  .held .lead { font-size: 1.12rem; }
  .wie-raster, .dag { grid-template-columns: 1fr; }
  .pad { padding: 26px; }
  .paneel { margin: 20px 12px 60px; padding: 24px; }
  .thema .vraag small { display: none; }
  .keuze-rij { grid-template-columns: 1fr; }
}

/* Cijfers in labels en klokjes: lettertype zonder doorgestreepte nul */
.kicker, .moment .uur, .gsm .klok, .belkaart .wie span, .label, .label-pil { font-family: "Bricolage Grotesque", system-ui, sans-serif; }

/* Ingelogd: initiaal en voornaam bovenaan */
.ik-chip { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; padding: 5px 16px 5px 5px; color: #fff !important; text-decoration: none; }
.ik-chip:hover { background: rgba(255, 255, 255, 0.18); }
.ik-bol { width: 34px; height: 34px; border-radius: 50%; background: var(--zon); color: var(--nacht); display: inline-grid; place-items: center; font: 800 1rem "Bricolage Grotesque", sans-serif; flex: none; }
.ik-bol.groot { width: 48px; height: 48px; font-size: 1.3rem; }
.ik-naam { font-weight: 700; }

/* Accountpagina: uitleg links, formulier rechts */
.account-raster { display: grid; grid-template-columns: 1fr 480px; gap: 56px; align-items: start; padding-top: 56px; padding-bottom: 80px; }
.account-raster .paneel { margin: 0; }
.account-uitleg h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.stappen-lijst { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 18px; counter-reset: s; }
.stappen-lijst li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 14px; }
.stappen-lijst li::before { counter-increment: s; content: counter(s); grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; background: var(--nacht); color: var(--zon); display: grid; place-items: center; font: 800 1.2rem "Bricolage Grotesque", sans-serif; }
.stappen-lijst strong { font-size: 1.1rem; }
.stappen-lijst span { color: var(--zacht); }
.geruststelling { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.geruststelling div { background: var(--munt); border-radius: 18px; padding: 14px 16px; }
.geruststelling strong { display: block; font: 800 1.1rem "Bricolage Grotesque", sans-serif; }
.geruststelling span { font-size: 0.88rem; color: var(--zacht); }
.paneel h2 { font-size: 1.7rem; margin-bottom: 4px; }
em.verplicht { font-style: normal; font-size: 0.75rem; font-weight: 700; background: var(--koraal-licht); color: #b2402f; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }

/* Mijn Kindcall */
.testbalk { background: var(--zon-licht); border-radius: 14px; padding: 12px 16px; font-size: 0.9rem; margin: 16px 0 0; }
.welkom-kaart { background: var(--nacht); color: #fff; border-radius: var(--rond); padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 20px; }
.welkom-kaart p { color: #cfe6e3; font-size: 1.1rem; }
.welkom-kaart .kicker { background: rgba(255, 201, 60, 0.15); color: var(--zon); }
.welkom-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.welkom-stappen li { display: flex; gap: 14px; align-items: center; background: var(--nacht-2); border-radius: 18px; padding: 16px; }
.welkom-stappen .nr, .blok-stap legend .nr { width: 38px; height: 38px; border-radius: 12px; background: var(--zon); color: var(--nacht); display: inline-grid; place-items: center; font: 800 1.1rem "Bricolage Grotesque", sans-serif; flex: none; }
.welkom-stappen strong { display: block; }
.welkom-stappen span:not(.nr) { color: #9fc4c0; font-size: 0.95rem; }

.persoon-kop { display: flex; gap: 12px; align-items: center; }
.status { display: inline-block; align-self: flex-start; font-weight: 700; font-size: 0.9rem; padding: 6px 12px; border-radius: 10px; background: var(--munt); }
.status.groen { background: #cdeee2; color: #145c40; }
.status.geel { background: var(--zon-licht); }
.status.oranje { background: var(--koraal-licht); color: #b2402f; }
.status.rood { background: var(--koraal); color: #fff; }
.momenten { display: flex; gap: 6px; }
.momenten span { font: 700 0.9rem "Bricolage Grotesque", sans-serif; border: 2px solid var(--lijn); border-radius: 10px; padding: 3px 9px; }
.momenten span:first-child { border-color: var(--nacht); }
.melding.gemist { border-left-color: var(--koraal); }
.link-kaart { border: 2px solid var(--zon); }
.link-stap { display: inline-block; font: 700 0.8rem "Bricolage Grotesque", sans-serif; background: var(--zon); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.bericht { display: flex; gap: 14px; align-items: center; cursor: pointer; }
.bericht:hover { border-color: var(--zee); }
.bericht-soort { font: 800 0.75rem "Bricolage Grotesque", sans-serif; text-transform: uppercase; background: var(--munt); color: var(--zee); border-radius: 10px; padding: 8px 10px; }
dl.gegevens { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 18px; }
dl.gegevens dt { color: var(--zacht); }
dl.gegevens dd { margin: 0; }

/* Formulier in stappen met aanklikbare keuzes */
.fiche-stappen { display: grid; gap: 16px; max-width: 860px; }
.fiche-stappen > .knop { justify-self: start; }
.blok-stap { margin: 0; padding: 26px 28px; }
.blok-stap legend { display: flex; align-items: center; gap: 12px; font: 800 1.35rem "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; padding: 0 6px; float: left; width: 100%; margin-bottom: 18px; }
.blok-stap legend ~ * { clear: both; }
.vraag-label { font-weight: 700; margin: 18px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: inherit; font-size: 0.97rem; background: var(--wit); color: var(--inkt); border: 2px solid var(--lijn); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.chips button:hover { border-color: var(--zee); }
.chips button.aan { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.chips.groot button { font-size: 1.05rem; font-weight: 700; padding: 14px 22px; border-radius: 16px; }
.anders-veld, .blok-stap input:not([type="checkbox"]), .blok-stap select, .blok-stap textarea {
  font: inherit; font-size: 16px; color: var(--inkt); padding: 12px 14px; border: 2px solid var(--lijn); border-radius: 14px; background: #fff; width: 100%;
}
.anders-veld { margin-top: 10px; max-width: 520px; display: block; }
.blok-stap label { display: grid; gap: 5px; font-size: 0.92rem; color: var(--zacht); }
.blok-stap textarea { min-height: 70px; resize: vertical; }
.velden-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 6px 0 12px; }
.belmomenten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
details.meer { margin-top: 18px; }
details.meer summary { cursor: pointer; font-weight: 700; color: var(--zee); }
details.meer label { margin-top: 12px; }
.verantw-info { background: var(--munt); border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; }
.verantw-info p { margin: 0; }
label.toestemming { display: flex !important; gap: 12px; align-items: flex-start; color: var(--inkt) !important; font-size: 1rem !important; margin-top: 18px; background: var(--zon-licht); border-radius: 14px; padding: 14px 16px; }
label.toestemming input { width: 22px; height: 22px; margin-top: 2px; flex: none; }

@media (max-width: 960px) {
  .account-raster { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .account-raster .paneel { order: -1; }
  .welkom-kaart { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 600px) {
  .geruststelling { grid-template-columns: 1fr; }
  .belmomenten { grid-template-columns: 1fr; }
  .blok-stap { padding: 20px; }
  .kop .ik-naam { display: none; }
  .ik-chip { padding: 4px; }
}

/* Wachtwoord met oogje */
.ww-veld { position: relative; display: block; }
.ww-veld input { width: 100%; padding-right: 52px !important; }
.oog { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--zacht); cursor: pointer; padding: 8px; border-radius: 10px; display: grid; place-items: center; }
.oog:hover { color: var(--nacht); background: var(--munt); }

/* Gsm met landcode */
.tel-veld { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 8px; }
.tel-veld select, .tel-veld input { font: inherit; font-size: 16px; color: var(--inkt); padding: 12px 12px; border: 2px solid var(--lijn); border-radius: 14px; background: #fff; min-width: 0; width: 100%; }
.veld > span { display: flex; align-items: center; gap: 6px; }
em.verplicht { justify-self: start; }

/* Situatie in groepen */
.chips.gegroepeerd { display: grid; gap: 14px; }
.chip-groep { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px; border-radius: 18px; background: var(--grond); border: 1px solid var(--lijn); }
.groep-titel { width: 100%; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--zee); }
.stap-uitleg { background: var(--zon-licht); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; }
.bewijs-uitleg { margin-top: 12px; border: 2px dashed var(--lijn); border-radius: 16px; padding: 14px 18px; }
.bewijs-uitleg p { margin: 6px 0 0; color: var(--zacht); font-size: 0.95rem; }
.blok-stap select:disabled { background: var(--grond); color: var(--zacht); }

/* Bevestiging */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--zee); color: #fff; font-weight: 700; padding: 16px 24px; border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5); transition: transform 0.25s; z-index: 50; max-width: calc(100% - 32px); }
.toast.zichtbaar { transform: translate(-50%, 0); }
.velden-raster .veld:has(.tel-veld) { grid-column: 1 / -1; max-width: 520px; }
.tel-veld { grid-template-columns: 150px 1fr; }

/* Wie ben jij: tegels in twee groepen */
.tegels { display: grid; gap: 14px; }
.tegel-groep { display: grid; gap: 8px; }
.tegel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tegels button { border-radius: 14px; padding: 13px 14px; font-weight: 700; text-align: center; }

/* Hoe bereikt Anna: twee grote tegels */
.kanaal-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kanaal-tegels button { text-align: left; border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; }
.kanaal-tegels button strong { font: 800 1.15rem "Bricolage Grotesque", sans-serif; }
.kanaal-tegels button span { font-size: 0.92rem; color: var(--zacht); line-height: 1.45; }
.kanaal-tegels button.aan span { color: #cfe6e3; }

.later-vinden { margin-top: 20px; background: var(--munt); border-radius: 16px; padding: 16px 18px; }
.later-vinden p { margin: 4px 0 6px; color: var(--zacht); }
.later-vinden ul { margin: 0; padding-left: 20px; }
.later-vinden li { margin-bottom: 4px; }

/* Persoonspagina */
.bereik-kaart { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-left: 6px solid var(--zon); }
.bereik-kaart h3 { margin: 4px 0; font-size: 1.4rem; }
.bereik-kaart p { margin: 0; }
.open-knop { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--zee); border: 2px solid var(--lijn); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.thema .open-tekst, .thema[open] .dicht-tekst { display: none; }
.thema[open] .open-tekst { display: inline; }
.thema > summary { flex-wrap: wrap; }
.thema-naam { flex: 1; min-width: 180px; }
.herinnering-form { display: grid; gap: 12px; }
.herinnering-form > input { font: inherit; font-size: 16px; padding: 12px 14px; border: 2px solid var(--lijn); border-radius: 14px; }
.h-wanneer { display: flex; gap: 12px; flex-wrap: wrap; }
.h-wanneer label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--zacht); }
.h-wanneer input { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--lijn); border-radius: 12px; }
.herinnering-form .knop { justify-self: start; }
.herinnering { display: flex; gap: 14px; align-items: center; }
.h-soort { font: 800 0.75rem "Bricolage Grotesque", sans-serif; text-transform: uppercase; border-radius: 10px; padding: 8px 10px; background: var(--munt); color: var(--zee); }
.h-soort.medicatie { background: var(--koraal-licht); color: #b2402f; }
.h-soort.afspraak { background: var(--zon-licht); color: var(--nacht); }
dl.klein-dl { font-size: 0.9rem; margin: 8px 0; }
.admin-link { color: var(--zon) !important; font-weight: 700; }
@media (max-width: 600px) {
  .kanaal-tegels { grid-template-columns: 1fr; }
  .tegel-raster { grid-template-columns: 1fr 1fr; }
}

/* Beheer */
.admin-label { font: 700 0.75rem "Atkinson Hyperlegible", sans-serif; letter-spacing: 0; background: var(--koraal); color: #fff; border-radius: 999px; padding: 2px 10px; }
.stat-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 16px 18px; }
.stat-getal { font: 800 2rem "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; }
.stat-label { font-size: 0.85rem; color: var(--zacht); }
.tabel-doos { overflow-x: auto; background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.tabel th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zacht); padding: 12px 14px; border-bottom: 2px solid var(--lijn); white-space: nowrap; }
.tabel td { padding: 12px 14px; border-bottom: 1px solid var(--munt); vertical-align: top; }
.tabel tr:last-child td { border-bottom: none; }

/* Verslagen en grafiek */
.grafiek-kaart h3 { margin-bottom: 2px; }
.grafiek-kop { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.grafiek-cijfers { display: flex; gap: 18px; }
.grafiek-cijfers div { display: grid; }
.grafiek-cijfers strong { font: 800 1.8rem "Bricolage Grotesque", sans-serif; line-height: 1; }
.grafiek-cijfers span { font-size: 0.8rem; color: var(--zacht); max-width: 130px; }
.grafiek-doos { position: relative; margin-top: 10px; }
.grafiek { width: 100%; height: auto; display: block; overflow: visible; }
.g-raster { stroke: var(--munt); stroke-width: 1; }
.g-as { fill: var(--zacht); font: 12px "Bricolage Grotesque", sans-serif; }
.g-lijn { fill: none; stroke: #0f8f80; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-bol { fill: #0f8f80; stroke: var(--wit); stroke-width: 2; }
.g-raak { fill: transparent; cursor: pointer; }
.g-punt:hover .g-bol, .g-punt:focus .g-bol { r: 7; }
.g-tip { position: absolute; transform: translate(-50%, -100%); background: var(--nacht); color: #fff; font-size: 0.85rem; padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none; }
.verslag-kop { display: flex; gap: 16px; align-items: center; }
.verslag-cijfer { flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--munt); display: grid; place-items: center; align-content: center; }
.verslag-cijfer strong { font: 800 1.7rem "Bricolage Grotesque", sans-serif; line-height: 1; }
.verslag-cijfer span { font-size: 0.72rem; color: var(--zacht); }
.verslag-cijfer.hoog { background: #cdeee2; }
.verslag-cijfer.laag { background: var(--koraal-licht); }
.verslag-tekst { font-size: 1.05rem; margin: 12px 0 8px; }

.tel-hint { grid-column: 1 / -1; margin: 0; color: var(--rood); font-size: 0.9rem; }

.boodschap-tekst { font-size: 1.1rem; margin: 8px 0; }
.boodschap-antwoord { background: var(--munt); border-radius: 14px; padding: 10px 14px; margin: 8px 0; }

/* Waarom Anna: cijfers en USP's */
.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cijfer-kaart { background: var(--nacht-2); border: 1px solid #23605f; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.cijfer-groot { font: 800 2.6rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; color: var(--zon); }
.cijfer-kaart p { margin: 0; color: #e3f1ef; font-size: 0.97rem; flex: 1; }
.bron { font-size: 0.8rem; color: #9fc4c0; }
.bron a { color: #9fc4c0; }
.eerlijk { margin-top: 22px; background: rgba(255, 201, 60, 0.12); border-left: 5px solid var(--zon); border-radius: 12px; padding: 14px 18px; color: #fff3c4; max-width: 880px; }
.usp-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.usp { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: 22px; }
.usp h3 { font-size: 1.1rem; }
.usp p { margin: 0; color: var(--zacht); font-size: 0.95rem; }
.prijs-een { max-width: 520px; }
ol.bronnen { padding-left: 22px; font-size: 0.9rem; color: var(--zacht); display: grid; gap: 8px; }
ol.bronnen li:target { background: var(--zon-licht); border-radius: 8px; }
@media (max-width: 960px) { .cijfers, .usp-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cijfers, .usp-raster { grid-template-columns: 1fr; } .cijfer-groot { font-size: 2.2rem; } }

/* Bewaartermijn, wissen en kleine voet */
.bewaar-note { background: var(--munt); border-radius: 14px; padding: 12px 16px; margin: 14px 0; font-size: 0.92rem; color: var(--inkt); }
.gevaar-kaart { border-color: #f3c3bb; background: #fff8f6; margin-top: 18px; }
.knop.gevaar { background: var(--rood); color: #fff; box-shadow: 0 3px 0 #9d2a1f; }
.knop.gevaar:hover { background: #b73021; color: #fff; box-shadow: 0 4px 0 #9d2a1f; }
.mini-voet { padding: 18px 0 28px; font-size: 0.8rem; text-align: center; }
.mini-voet a { color: var(--zacht); }
footer .mini-link { font-size: 0.78rem; opacity: 0.8; }

/* Tekstpagina (privacy) */
.tekst { max-width: 860px; padding-top: 36px; padding-bottom: 60px; }
.tekst h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 4px; }
.tekst h2 { font-size: 1.4rem; margin: 34px 0 10px; }
.inleiding { font-size: 1.15rem; color: var(--zacht); margin: 18px 0; }
.punten { padding-left: 22px; display: grid; gap: 8px; }
.concept-balk { background: var(--zon-licht); border-radius: 14px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.92rem; }
.invullen { background: var(--koraal-licht); color: #b2402f; border-radius: 6px; padding: 1px 8px; font-weight: 700; font-size: 0.9em; }
.tekst .tabel td { font-size: 0.92rem; }

/* Illustratie */
.scene-blok { padding-bottom: 20px; }
.scene-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: center; }
.scene { width: 100%; height: auto; }
@media (max-width: 960px) { .scene-wrap { grid-template-columns: 1fr; gap: 20px; } }

/* Menu bij het rondje */
.menu-doos { position: relative; }
.ik-chip { border: none; font: inherit; cursor: pointer; }
.chevron { width: 8px; height: 8px; border-right: 2px solid #d7ecea; border-bottom: 2px solid #d7ecea; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; background: var(--wit); color: var(--inkt); border: 1px solid var(--lijn); border-radius: 18px; box-shadow: 0 20px 40px -20px rgba(13, 59, 63, 0.5); padding: 8px; z-index: 30; display: grid; }
.menu button, .menu a { text-align: left; background: none; border: none; font: inherit; color: var(--inkt); padding: 12px 14px; border-radius: 12px; cursor: pointer; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--munt); }
.menu .menu-uit { color: var(--rood); border-top: 1px solid var(--munt); border-radius: 0 0 12px 12px; margin-top: 4px; }
.menu a { color: var(--zee); font-weight: 700; }

/* Personen als pillen */
.persoonbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pil { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--lijn); background: var(--wit); border-radius: 999px; padding: 5px 14px 5px 5px; font: inherit; font-weight: 700; color: var(--inkt); cursor: pointer; }
.pil.aan { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.ik-bol.klein { width: 28px; height: 28px; font-size: 0.85rem; }
.stipje { width: 10px; height: 10px; border-radius: 50%; background: #c9d8d5; }
.stipje.groen { background: #2fb37a; }
.stipje.oranje { background: #f2a33a; }
.stipje.rood { background: var(--rood); }
.persoon-hoofd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.persoon-hoofd h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; }

/* Laatste gesprek met cijfers */
.laatste-kaart { border: 2px solid var(--nacht); background: var(--wit); padding: 20px 22px; }
.laatste-kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.tegels-rij { display: grid; grid-template-columns: 170px 170px 1fr; gap: 14px; align-items: stretch; }
.tegel-cijfer { border-radius: 20px; padding: 14px 16px; display: grid; gap: 2px; align-content: start; background: var(--munt); }
.tegel-cijfer .t-titel { font-size: 0.85rem; color: var(--zacht); font-weight: 700; }
.tegel-cijfer strong { font: 800 2.8rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; }
.tegel-cijfer small { font-size: 1rem; font-weight: 700; color: var(--zacht); margin-left: 2px; }
.tegel-cijfer .t-bron { font-size: 0.78rem; color: var(--zacht); }
.tegel-cijfer.hoog { background: #cdeee2; }
.tegel-cijfer.mid { background: var(--zon-licht); }
.tegel-cijfer.laag { background: var(--koraal-licht); }
.tegel-cijfer.geen strong { color: var(--zacht); }
.trend { font-size: 0.78rem; font-weight: 700; }
.trend.op { color: #1b7a50; }
.trend.neer { color: #b2402f; }
.trend.gelijk { color: var(--zacht); }
.laatste-tekst p { margin: 0 0 8px; font-size: 1.02rem; }
.bereik-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--munt); border-radius: 16px; padding: 10px 16px; margin: 14px 0 18px; font-size: 0.95rem; }
.bereik-balk .knop { margin-left: auto; }
.stem-keuze { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Grafiek met twee lijnen */
.g-lijn-slaap { stroke: #c76a14; }
.g-bol-slaap { fill: #c76a14; }
.g-raak { fill: transparent; }
.g-eind { font: 700 12px "Bricolage Grotesque", sans-serif; fill: var(--inkt); }
.legende { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; margin-top: 4px; }
.legende .sw { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legende .sw.gevoel { background: #0f8f80; }
.legende .sw.slaap { background: #c76a14; }

@media (max-width: 760px) {
  .tegels-rij { grid-template-columns: 1fr 1fr; }
  .laatste-tekst { grid-column: 1 / -1; }
  .bereik-balk .knop { margin-left: 0; }
}

.prijzen.twee-kaarten { grid-template-columns: repeat(2, minmax(0, 460px)); }
.cadeau-held { padding-bottom: 90px; }
.cadeau-paneel { margin: 0; max-width: none; }
@media (max-width: 960px) { .prijzen.twee-kaarten { grid-template-columns: 1fr; } }

/* Foto's */
.scene-wrap { grid-template-columns: 0.85fr 1.15fr; }
.foto-paar { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; align-items: end; }
.foto-paar figure { margin: 0; position: relative; border-radius: 26px; overflow: hidden; background: var(--munt); }
.foto-paar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-groot { aspect-ratio: 4 / 5; }
.foto-klein { aspect-ratio: 4 / 5; transform: translateY(-26px); }
.foto-paar figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(13, 59, 63, 0.88); color: #fff; font-weight: 700; font-size: 0.88rem; padding: 6px 14px; border-radius: 999px; }
.foto-bel { position: absolute; left: calc(55.5% - 31px); top: 42%; width: 62px; height: 62px; border-radius: 50%; background: var(--zon); color: var(--nacht); font: 800 1.8rem "Bricolage Grotesque", sans-serif; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(255, 201, 60, 0.35), 0 14px 30px -10px rgba(0, 0, 0, 0.5); z-index: 2; }
@media (max-width: 960px) { .scene-wrap { grid-template-columns: 1fr; } .foto-klein { transform: none; } }
@media (max-width: 520px) { .foto-paar { gap: 8px; } .foto-bel { width: 48px; height: 48px; font-size: 1.4rem; left: calc(55.5% - 24px); } }

/* Foto naast tekst */
.scene-wrap { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; }
.foto-raam { position: relative; margin: 0; max-width: 460px; margin-left: auto; width: 100%; }
.foto-raam img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: 32px; box-shadow: 0 30px 60px -34px rgba(13, 59, 63, 0.55); }
.foto-kaartje { position: absolute; left: -26px; bottom: 28px; display: flex; gap: 12px; align-items: center; background: var(--wit); border-radius: 20px; padding: 14px 18px; box-shadow: 0 20px 40px -18px rgba(13, 59, 63, 0.55); max-width: 290px; }
.foto-kaartje strong { display: block; }
.foto-kaartje span:not(.live-stip) { font-size: 0.9rem; color: var(--zacht); }
.live-stip { width: 14px; height: 14px; border-radius: 50%; background: #2fb37a; box-shadow: 0 0 0 0 rgba(47, 179, 122, 0.6); animation: stip 2s infinite; flex: none; }
@keyframes stip { 70% { box-shadow: 0 0 0 12px rgba(47, 179, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 179, 122, 0); } }
@media (max-width: 960px) { .scene-wrap { grid-template-columns: 1fr; gap: 28px; } .foto-raam { margin: 0 auto; } .foto-kaartje { left: 12px; } }

/* Prijzen */
.prijzen.drie-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prijs-voor { color: var(--zacht); margin: 0 0 8px; min-height: 3em; }
.prijs.uitgelicht .prijs-voor { color: #9fc4c0; }
.kernpunt { background: var(--munt); border-radius: 16px; padding: 14px 16px; margin: 10px 0 20px; flex: 1; display: grid; align-content: start; gap: 2px; }
.kernpunt strong { font: 800 1.15rem "Bricolage Grotesque", sans-serif; }
.kernpunt span { color: var(--zacht); font-size: 0.92rem; }
.prijs.uitgelicht .kernpunt { background: rgba(255, 255, 255, 0.12); }
.prijs.uitgelicht .kernpunt span { color: #cfe6e3; }
.vergelijk { margin-top: 28px; }
.vergelijk td:first-child { font-weight: 700; }
.vergelijk th:nth-child(3), .vergelijk td:nth-child(3) { background: var(--zon-licht); }
.alles-erin { margin-top: 28px; background: var(--munt); border-radius: var(--rond); padding: 26px 30px; }
.alles-erin .lijst { grid-template-columns: 1fr 1fr; gap: 12px 30px; }
@media (max-width: 960px) { .prijzen.drie-kaarten { grid-template-columns: 1fr; } .alles-erin .lijst { grid-template-columns: 1fr; } .prijs-voor { min-height: 0; } }

/* Levendiger dashboard */
body.app-pagina { background: radial-gradient(900px 420px at 85% -80px, #ffe9a8 0, rgba(255, 233, 168, 0) 70%), radial-gradient(900px 500px at -10% 120px, #cfe9e3 0, rgba(207, 233, 227, 0) 70%), var(--grond); background-repeat: no-repeat; }

.persoon-banner { background: linear-gradient(135deg, var(--nacht) 0%, #1d6f6a 100%); color: #fff; border-radius: 30px; padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; margin-bottom: 16px; position: relative; overflow: hidden; }
.persoon-banner::after { content: ""; position: absolute; right: -50px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 201, 60, 0.16); pointer-events: none; }
.pb-links { display: flex; gap: 16px; align-items: center; min-width: 0; }
.pb-avatar { flex: none; width: 66px; height: 66px; border-radius: 50%; background: var(--zon); color: var(--nacht); display: grid; place-items: center; font: 800 2rem "Bricolage Grotesque", sans-serif; box-shadow: 0 0 0 6px rgba(255, 201, 60, 0.28); }
.persoon-banner h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; line-height: 1.05; }
.pb-sub { margin: 4px 0 0; color: #cfe6e3; font-size: 0.95rem; }
.pb-rechts { position: relative; z-index: 1; }
.pb-onder { grid-column: 1 / -1; display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 0.93rem; color: #d7ecea; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 12px; }
.pb-onder strong { color: #fff; }
.pb-zelf { color: #9fc4c0; }

.status-balk { display: flex; gap: 16px; align-items: center; border-radius: 24px; padding: 18px 22px; margin-bottom: 14px; }
.status-balk strong { display: block; font: 800 1.5rem/1.15 "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; }
.status-balk span:not(.sb-ico) { font-size: 1rem; }
.sb-ico { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.55); }
.status-balk.groen { background: #c9efdc; color: #0f4f33; }
.status-balk.oranje { background: #ffe0b8; color: #7a3d05; }
.status-balk.rood { background: #ffcdc4; color: #8d2417; }
.status-balk.geel { background: var(--zon-licht); color: #5c4400; }
.status-balk.neutraal { background: var(--wit); color: var(--inkt); border: 1px solid var(--lijn); }

.laatste-kaart { border: none; box-shadow: 0 18px 40px -26px rgba(13, 59, 63, 0.45); }
.tegel-cijfer .t-titel::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.tegel-cijfer.gevoel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.5-9.3-9A5.3 5.3 0 0 1 12 6.5 5.3 5.3 0 0 1 21.3 12C19 16.5 12 21 12 21z'/%3E%3C/svg%3E"); }
.tegel-cijfer.slaap { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 13.5A9 9 0 1 1 10.5 3a7 7 0 0 0 10.5 10.5z'/%3E%3C/svg%3E"); }
.tegel-cijfer strong { font-size: 3.2rem; }
.dag-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dag-chip { border: 2px solid var(--lijn); background: var(--wit); font: inherit; font-weight: 700; border-radius: 999px; padding: 4px 14px; cursor: pointer; font-variant-numeric: tabular-nums; }
.dag-chip.aan { background: var(--nacht); border-color: var(--nacht); color: #fff; }

.app-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.tab-ico { flex: none; opacity: 0.85; }
.app-tabs button.aan .tab-ico { color: var(--zon); opacity: 1; }

.dag-kop { font: 800 1.15rem "Bricolage Grotesque", sans-serif; margin: 22px 0 10px; display: flex; gap: 10px; align-items: baseline; }
.dag-kop span { font: 400 0.85rem "Atkinson Hyperlegible", sans-serif; color: var(--zacht); }
.kaart.verslag { border-left: 7px solid var(--lijn); }
.kaart.verslag.v-hoog { border-left-color: #2fb37a; }
.kaart.verslag.v-mid { border-left-color: var(--zon); }
.kaart.verslag.v-laag { border-left-color: var(--koraal); }
.grafiek-kaart { background: linear-gradient(180deg, #ffffff 0%, #f1f9f6 100%); }

.vast-kaart { border: 2px solid var(--zon); background: linear-gradient(180deg, #fffdf3 0%, #fff 60%); }
.vast-rij { display: flex; align-items: center; gap: 12px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 10px 12px; margin-bottom: 8px; }
.vast-nr { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--nacht); color: var(--zon); display: grid; place-items: center; font: 800 0.95rem "Bricolage Grotesque", sans-serif; }
.vast-tekst { flex: 1; font-weight: 700; }
.vast-acties { display: flex; gap: 4px; flex: none; }
.vast-acties button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--grond); cursor: pointer; font: inherit; color: var(--inkt); }
.vast-acties button:hover:not(:disabled) { background: var(--munt); }
.vast-acties button:disabled { opacity: 0.35; cursor: default; }
.opties-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.opties-rij button { font: inherit; font-size: 0.95rem; background: var(--wit); border: 2px dashed #9fc4c0; border-radius: 999px; padding: 8px 16px; cursor: pointer; color: var(--inkt); }
.opties-rij button:hover { border-style: solid; border-color: var(--zee); background: var(--munt); }

@media (max-width: 760px) {
  .persoon-banner { grid-template-columns: 1fr; padding: 18px; }
  .pb-avatar { width: 54px; height: 54px; font-size: 1.6rem; }
  .status-balk { padding: 14px 16px; }
  .status-balk strong { font-size: 1.25rem; }
  .vast-tekst { font-size: 0.95rem; }
}

/* Foto: niet uitrekken */
.foto-raam img { height: auto; aspect-ratio: 2 / 3; object-position: center 25%; }
html { scroll-padding-top: 84px; }

/* Prijzen in een balk */
.prijsbalk { background: var(--wit); border: 2px solid var(--lijn); border-radius: var(--rond); overflow: hidden; box-shadow: 0 26px 50px -34px rgba(13, 59, 63, 0.4); }
.prijsbalk .prijzen.drie-kaarten { gap: 0; }
.prijsbalk .prijs { border: 0; border-radius: 0; background: transparent; padding: 32px 28px; border-left: 1px solid var(--lijn); }
.prijsbalk .prijs:first-child { border-left: 0; }
.prijsbalk .prijs.uitgelicht { background: var(--nacht); }
.prijsbalk .tabel-doos { border: 0; border-top: 1px solid var(--lijn); border-radius: 0; margin: 0; box-shadow: none; }
@media (max-width: 960px) { .prijsbalk .prijs { border-left: 0; border-top: 1px solid var(--lijn); } .prijsbalk .prijs:first-child { border-top: 0; } }

/* Menu: waar ben ik */
.kop nav a[data-sectie] { position: relative; padding: 6px 0; }
.kop nav a[data-sectie]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px; background: var(--zon); transform: scaleX(0); transition: transform 0.25s; }
.kop nav a[data-sectie].actief { color: #fff; font-weight: 700; }
.kop nav a[data-sectie].actief::after { transform: scaleX(1); }
@media (max-width: 960px) { .kop nav a[data-sectie] { display: none; } }
.sectie-balk { display: none; }
@media (max-width: 960px) {
  .sectie-balk { display: block; position: sticky; top: 62px; z-index: 9; background: var(--zon); color: var(--nacht); font-weight: 800; font-size: 0.9rem; padding: 7px 16px; text-align: center; }
}

/* De A op de homepage */
button.foto { border: 0; cursor: pointer; }
button.foto:hover { transform: scale(1.06); }
button.foto.speelt { background: #fff; }

/* Abonnement kiezen in het formulier */
.plan-keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.plan-keuze button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--lijn); background: var(--wit); font: inherit; cursor: pointer; }
.plan-keuze button strong { font: 800 1.15rem "Bricolage Grotesque", sans-serif; }
.plan-keuze button em { font-style: normal; font-weight: 700; }
.plan-keuze button span { color: var(--zacht); font-size: 0.92rem; }
.plan-keuze button.aan { border-color: var(--nacht); background: var(--munt); box-shadow: inset 0 0 0 1px var(--nacht); }
@media (max-width: 700px) { .plan-keuze { grid-template-columns: 1fr; } }
.plan-keuze button.aan, .plan-keuze button.aan strong, .plan-keuze button.aan em { color: var(--nacht); }
.plan-keuze button.aan span { color: var(--zacht); }
.vast-tip { background: #fff3d6; border-radius: 12px; padding: 10px 14px; font-weight: 700; margin: 10px 0 0; }

/* Prijsbalk, tweede versie */
.prijsbalk { background: var(--wit); border: 0; border-radius: 34px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(13, 59, 63, 0.55), 0 0 0 1px rgba(13, 59, 63, 0.08); }
.plannen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { position: relative; padding: 40px 34px 36px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--lijn); }
.plan h3 { font: 800 1.5rem "Bricolage Grotesque", sans-serif; margin: 0 0 4px; }
.plan-voor { color: var(--zacht); margin: 0 0 22px; min-height: 3em; }
.plan-prijs { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; }
.plan-prijs .euro { font: 800 1.6rem "Bricolage Grotesque", sans-serif; }
.plan-prijs .getal { font: 800 3.6rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: -0.04em; }
.plan-prijs .per { color: var(--zacht); font-weight: 700; }
.plan-lijst { list-style: none; padding: 20px 0 0; margin: 0 0 28px; border-top: 1px solid var(--lijn); display: grid; gap: 13px; flex: 1; }
.plan-lijst li { position: relative; padding-left: 32px; line-height: 1.4; }
.plan-lijst li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #dff3ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8f80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.plan-lijst li.nee { color: #8aa3a0; text-decoration: line-through; }
.plan-lijst li.nee::before { background: #eef2f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238aa3a0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan .knop { text-align: center; justify-content: center; }
.plan.hoofd { background: linear-gradient(165deg, #0d3b3f 0%, #14575a 100%); color: #fff; }
.plan.hoofd .plan-voor, .plan.hoofd .plan-prijs .per { color: #b6d6d2; }
.plan.hoofd .plan-lijst { border-top-color: rgba(255, 255, 255, 0.18); }
.plan.hoofd .plan-lijst li::before { background-color: var(--zon); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3b3f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.plan-lint { position: absolute; top: 0; right: 30px; background: var(--zon); color: var(--nacht); font-weight: 800; font-size: 0.82rem; padding: 7px 14px 9px; border-radius: 0 0 14px 14px; }
.prijsbalk .alles-erin { margin: 0; padding: 30px 34px 34px; background: var(--munt); border-top: 1px solid var(--lijn); border-radius: 0; }
.prijsbalk .alles-erin h3 { margin-top: 0; }
@media (max-width: 960px) {
  .plannen { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--lijn); }
  .plan-voor { min-height: 0; }
  .plan { padding: 34px 24px 28px; }
}

/* Foto: breed en laag */
.foto-raam { max-width: 520px; }
.foto-raam img { aspect-ratio: 4 / 3; height: auto; width: 100%; object-fit: cover; object-position: center 30%; border-radius: 28px; }
.foto-kaartje { bottom: -22px; left: -22px; }
@media (max-width: 960px) { .foto-raam img { aspect-ratio: 16 / 10; } .foto-kaartje { left: 12px; bottom: -18px; } }

/* Hoor Anna */
.hoor-knop { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 4px; background: var(--zon); color: var(--nacht); border: 0; border-radius: 999px; padding: 12px 20px 12px 14px; font: 800 1rem "Atkinson Hyperlegible", sans-serif; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6); animation: hoor-puls 2.4s infinite; }
.hoor-knop:hover { filter: brightness(1.05); }
.hoor-knop .speel-icoon { width: 30px; height: 30px; border-radius: 50%; background: var(--nacht); position: relative; flex: none; }
.hoor-knop .speel-icoon::after { content: ""; position: absolute; left: 11px; top: 8px; border-left: 11px solid var(--zon); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hoor-knop.speelt { animation: none; background: #fff; }
.hoor-knop.speelt .speel-icoon::after { left: 9px; top: 9px; width: 4px; height: 12px; border: 0; background: var(--zon); box-shadow: 8px 0 0 var(--zon); }
@keyframes hoor-puls { 0%, 100% { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(255, 201, 60, 0.55); } 60% { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6), 0 0 0 14px rgba(255, 201, 60, 0); } }
button.foto { position: relative; }
button.foto::before { content: "▶"; position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--nacht); font-size: 0.7rem; display: grid; place-items: center; z-index: 2; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35); }

/* Menu met meer kracht */
.kop { background: linear-gradient(90deg, #0a2f33 0%, #0d3b3f 55%, #11494c 100%); border-bottom: 4px solid var(--zon); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.55); }
.kop nav { gap: 6px; }
.kop nav > a:not(.knop):not(.ik-chip) { color: #fff; font-weight: 700; font-size: 1.02rem; padding: 9px 15px; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.kop nav > a:not(.knop):not(.ik-chip):hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.kop nav > a[data-sectie]::after { display: none; }
.kop nav > a[data-sectie].actief, .kop nav > a.actief { background: var(--zon); color: var(--nacht); font-weight: 800; }
.kop nav .knop { margin-left: 10px; padding: 11px 20px; font-weight: 800; }
.kop nav > a.inlog { border: 2px solid rgba(255, 255, 255, 0.35); }
.logo { font-size: 1.8rem; }
@media (max-width: 960px) { .kop nav > a:not(.knop):not(.ik-chip):not(.inlog) { display: none; } }

/* Prijzenpagina */
.prijs-kop { padding-top: 56px; }
.prijs-kop h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 8px 0 12px; }
.prijs-kop .intro { margin-bottom: 36px; }
.prijs-teaser { display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--wit); border-radius: 30px; padding: 36px 40px; box-shadow: 0 30px 60px -40px rgba(13, 59, 63, 0.5), 0 0 0 1px rgba(13, 59, 63, 0.08); }
.prijs-teaser h2 { margin: 6px 0 8px; }
.prijs-teaser p { margin: 0; max-width: 560px; color: var(--zacht); }
.prijs-teaser .knop { flex: none; }
@media (max-width: 760px) { .prijs-teaser { flex-direction: column; align-items: flex-start; padding: 28px 24px; } }
.lang-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lang-kaart { background: var(--wit); border-radius: 28px; padding: 34px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 1px rgba(13, 59, 63, 0.1); }
.lang-kaart h3 { font-size: 1.6rem; margin: 0; }
.lang-kaart p { margin: 0; color: var(--zacht); flex: 1; }
.lang-kaart.hoofd { background: linear-gradient(165deg, #0d3b3f, #14575a); color: #fff; }
.lang-kaart.hoofd p { color: #c4e0dc; }
.lang-label { align-self: flex-start; background: var(--zon); color: var(--nacht); font-weight: 800; font-size: 0.8rem; padding: 5px 12px; border-radius: 999px; }
.lang-prijs { font-size: 1.05rem; }
.lang-prijs strong { font: 800 2.4rem "Bricolage Grotesque", sans-serif; letter-spacing: -0.03em; margin-right: 4px; }
@media (max-width: 760px) { .lang-raster { grid-template-columns: 1fr; } }

/* Luchtiger: minder tekst */
.cijfers.drie { grid-template-columns: repeat(3, 1fr); }
.cijfers.drie .cijfer-kaart { padding: 30px 28px; }
.cijfers.drie .cijfer-groot { font-size: 3.4rem; }
.cijfers.drie p { font-size: 1.05rem; }
.meer-cijfers { margin-top: 26px; }
.meer-cijfers summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--zon); font-weight: 800; padding: 10px 18px; border: 2px solid rgba(255, 201, 60, 0.5); border-radius: 999px; list-style: none; }
.meer-cijfers summary::-webkit-details-marker { display: none; }
.meer-cijfers summary::after { content: "+"; font-size: 1.2rem; }
.meer-cijfers[open] summary::after { content: "\2212"; }
.meer-cijfers .cijfers { margin-top: 20px; grid-template-columns: repeat(3, 1fr); }
.usp-raster.licht { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.usp-raster.licht .usp { padding: 28px; border-radius: 26px; border: 0; box-shadow: 0 24px 50px -36px rgba(13, 59, 63, 0.5), 0 0 0 1px rgba(13, 59, 63, 0.07); }
.usp-icoon { width: 52px; height: 52px; border-radius: 16px; background: var(--zon); display: grid; place-items: center; margin-bottom: 14px; }
.usp-raster.licht .usp h3 { font-size: 1.25rem; margin: 0 0 6px; }
.usp-raster.licht .usp p { font-size: 1.02rem; }
@media (max-width: 960px) { .cijfers.drie, .meer-cijfers .cijfers, .usp-raster.licht { grid-template-columns: 1fr; } }
.plan-keuze { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Gesprekken: dagenstrook en levendiger verslag */
.dag-titel { margin: 26px 0 10px; font-size: 1.2rem; }
.dag-strook { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.dagkeuze { position: relative; flex: none; width: 74px; padding: 10px 6px 14px; border-radius: 20px; border: 2px solid var(--lijn); background: var(--wit); display: flex; flex-direction: column; align-items: center; gap: 1px; font: inherit; cursor: pointer; scroll-snap-align: start; }
.dagkeuze:hover { border-color: var(--zee); }
.dagkeuze .dc-wd { font-size: 0.78rem; font-weight: 700; color: var(--zacht); text-transform: capitalize; }
.dagkeuze .dc-nr { font: 800 1.7rem/1.1 "Bricolage Grotesque", sans-serif; }
.dagkeuze .dc-mnd { font-size: 0.74rem; color: var(--zacht); }
.dagkeuze .dc-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.dagkeuze em { position: absolute; top: -6px; right: -4px; background: var(--nacht); color: #fff; font-style: normal; font-size: 0.72rem; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.dagkeuze.leeg { opacity: 0.6; }
.dagkeuze.aan { background: var(--nacht); border-color: var(--nacht); color: #fff; box-shadow: 0 14px 24px -14px rgba(13, 59, 63, 0.7); opacity: 1; }
.dagkeuze.aan .dc-wd, .dagkeuze.aan .dc-mnd { color: #b6d6d2; }
.dagkeuze.aan em { background: var(--zon); color: var(--nacht); }

.gk { background: var(--wit); border-radius: 26px; padding: 24px 26px; margin-bottom: 16px; box-shadow: 0 24px 50px -38px rgba(13, 59, 63, 0.6), 0 0 0 1px rgba(13, 59, 63, 0.07); position: relative; overflow: hidden; }
.gk::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 6px; background: linear-gradient(90deg, #0f8f80, #ffc93c); }
.gk.let-op::before { background: linear-gradient(90deg, #ff7a59, #ffc93c); }
.gk-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 4px; }
.gk-uur { font: 800 1.7rem/1 "Bricolage Grotesque", sans-serif; }
.gk-meta { color: var(--zacht); font-size: 0.92rem; margin-top: 4px; }
.gk-scores { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0 6px; }
.ring-doos { display: flex; align-items: center; gap: 12px; background: var(--munt); border-radius: 20px; padding: 12px 18px 12px 12px; position: relative; }
.ring { width: 66px; height: 66px; }
.ring-bg { fill: none; stroke: #fff; stroke-width: 8; }
.ring-vul { fill: none; stroke-width: 8; stroke-linecap: round; }
.ring-getal { position: absolute; left: 12px; width: 66px; text-align: center; font: 800 1.5rem "Bricolage Grotesque", sans-serif; }
.ring-tekst strong { display: block; font: 800 1.05rem "Bricolage Grotesque", sans-serif; }
.ring-tekst span { font-size: 0.82rem; color: var(--zacht); }
.gk-sfeer { display: flex; align-items: center; gap: 10px; background: #fff3d6; border-radius: 20px; padding: 12px 20px; font: 800 1.05rem "Bricolage Grotesque", sans-serif; }
.gk-sfeer.laag { background: var(--koraal-licht); }
.gk-sfeer .smiley { font-size: 1.9rem; }
.gk-citaat { display: flex; gap: 12px; margin: 16px 0 4px; align-items: flex-start; }
.gk-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--zon); display: grid; place-items: center; font: 800 1.1rem "Bricolage Grotesque", sans-serif; }
.gk-citaat p { margin: 0; background: #f1f7f6; padding: 14px 18px; border-radius: 4px 20px 20px 20px; font-size: 1.05rem; }
.gk-sectie { margin-top: 16px; }
.gk-sectie h5 { margin: 0 0 8px; font: 800 0.8rem "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--zee); }
.gk-vast { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gk-vast li { display: flex; gap: 12px; align-items: flex-start; background: #f7faf9; border-radius: 14px; padding: 10px 14px; }
.gk-vast .vink { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #dff3ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8f80' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; margin-top: 2px; }
.gk-vast strong { display: block; font-size: 0.92rem; }
.gk-vast span { color: var(--zacht); }
.label-pil.zon { background: #fff3d6; }
.gk-lees { margin-top: 16px; border-top: 1px solid var(--lijn); padding-top: 12px; }
.gk-lees summary { cursor: pointer; font-weight: 800; display: flex; justify-content: space-between; gap: 10px; }
.gk-lees summary span { font-weight: 400; color: var(--zacht); font-size: 0.85rem; }
.bubbels { display: grid; gap: 8px; margin-top: 14px; }
.bubbel { max-width: 82%; padding: 9px 14px; border-radius: 18px; line-height: 1.4; }
.bubbel span { display: block; font-size: 0.72rem; font-weight: 800; opacity: 0.65; }
.bubbel.anna { background: #eef5f4; border-top-left-radius: 4px; }
.bubbel.zij { background: var(--zon); justify-self: end; border-top-right-radius: 4px; }
.ring-kolom { display: grid; gap: 6px; justify-items: start; }
.ring-kolom .trend { font-size: 0.82rem; font-weight: 700; padding-left: 4px; }
.laatste-kaart.gk { padding-top: 26px; }
.laatste-kaart .laatste-kop { margin-top: 2px; }

/* Prijzen: drie volledige kaarten */
.prijsbalk.kaarten { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.prijsbalk.kaarten .plannen { gap: 24px; align-items: stretch; }
.prijsbalk.kaarten .plan { background: var(--wit); border: 0; border-radius: 30px; padding: 40px 32px 34px; box-shadow: 0 30px 60px -40px rgba(13, 59, 63, 0.55), 0 0 0 1px rgba(13, 59, 63, 0.09); }
.prijsbalk.kaarten .plan + .plan { border-left: 0; }
.prijsbalk.kaarten .plan.hoofd { background: linear-gradient(165deg, #0d3b3f 0%, #14575a 100%); box-shadow: 0 40px 70px -36px rgba(13, 59, 63, 0.8); transform: translateY(-8px); }
.prijsbalk.kaarten .plan-lijst { flex: 0 0 auto; margin-bottom: 20px; }
.plan-altijd { font: 800 0.8rem "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--zee); margin: 6px 0 12px; padding-top: 20px; border-top: 1px dashed var(--lijn); }
.plan.hoofd .plan-altijd { color: var(--zon); border-top-color: rgba(255, 255, 255, 0.22); }
.plan-lijst.klein { border-top: 0; padding-top: 0; gap: 9px; flex: 1; margin-bottom: 26px; font-size: 0.95rem; }
.plan-lijst.klein li::before { width: 18px; height: 18px; top: 2px; background-size: 11px; }
.plan-lijst.klein li { padding-left: 28px; }
.prijsbalk.kaarten .plan .knop { margin-top: auto; }
@media (max-width: 960px) { .prijsbalk.kaarten .plan.hoofd { transform: none; } }

/* Gegevens van de persoon */
.gz-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.gz-kaart { background: var(--wit); border-radius: 26px; padding: 22px 24px 8px; box-shadow: 0 24px 50px -38px rgba(13, 59, 63, 0.6), 0 0 0 1px rgba(13, 59, 63, 0.08); }
.gz-kaart header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.gz-kaart header h3 { margin: 0; font-size: 1.2rem; flex: 1; }
.gz-ico { width: 42px; height: 42px; border-radius: 14px; background: var(--zon); display: grid; place-items: center; flex: none; }
.gz-pas { border: 2px solid var(--lijn); background: transparent; border-radius: 999px; padding: 6px 14px; font: 700 0.85rem "Atkinson Hyperlegible", sans-serif; cursor: pointer; }
.gz-pas:hover { border-color: var(--zee); }
.gz-rij { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid #edf3f2; }
.gz-label { color: var(--zacht); font-size: 0.92rem; font-weight: 700; padding-top: 2px; }
.gz-waarde { min-width: 0; overflow-wrap: anywhere; }
.gz-lijst { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.plan-badge { display: inline-block; background: var(--nacht); color: #fff; font: 800 0.85rem "Bricolage Grotesque", sans-serif; padding: 3px 12px; border-radius: 999px; }
.toest { display: inline-block; font-weight: 800; font-size: 0.85rem; padding: 3px 12px; border-radius: 999px; }
.toest.ja { background: #cdeee2; }
.toest.wacht { background: #fff3d6; }
.gz-wis { margin-top: 22px; }
.gz-wis summary { cursor: pointer; font-weight: 800; }
.laatste-hint { margin: 12px 0 0; }
@media (max-width: 900px) { .gz-raster { grid-template-columns: 1fr; } .gz-rij { grid-template-columns: 1fr; gap: 2px; } }

/* Stemmen testen */
.stem-voorbeelden { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.stem-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.stem-kaart { display: flex; gap: 14px; align-items: center; background: var(--wit); border-radius: 22px; padding: 16px 18px; box-shadow: 0 0 0 1px rgba(13, 59, 63, 0.09); }
.stem-kaart strong { display: block; font: 800 1.15rem "Bricolage Grotesque", sans-serif; }
.stem-kaart span, .stem-kaart em { display: block; color: var(--zacht); font-size: 0.9rem; font-style: normal; }
.stem-speel { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--zon); cursor: pointer; position: relative; }
.stem-speel::after { content: ""; position: absolute; left: 20px; top: 15px; border-left: 17px solid var(--nacht); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.stem-speel.laadt { opacity: 0.6; animation: stip 1s infinite; }
.stem-speel.speelt { background: var(--nacht); }
.stem-speel.speelt::after { left: 17px; top: 17px; width: 5px; height: 18px; border: 0; background: var(--zon); box-shadow: 11px 0 0 var(--zon); }


/* Menu onder je naam: compact, met naam en e-mail bovenaan */
.menu { min-width: 250px; padding: 6px; gap: 2px; }
.menu-kop { padding: 10px 12px 12px; border-bottom: 1px solid var(--lijn); margin-bottom: 4px; display: grid; gap: 1px; }
.menu-kop strong { font: 800 1.05rem "Bricolage Grotesque", sans-serif; }
.menu-kop span { color: var(--zacht); font-size: 0.85rem; overflow-wrap: anywhere; }
.menu button, .menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 0.98rem; font-weight: 700; color: var(--inkt); width: 100%; }
.menu a { color: var(--inkt); }
.menu svg { flex: none; color: var(--zee); }
.menu .menu-uit { margin-top: 4px; border-top: 1px solid var(--lijn); border-radius: 0 0 12px 12px; padding-top: 12px; }
.menu .menu-uit svg { color: var(--rood); }

/* Bovenbalk: personen en eigen account altijd zichtbaar */
.pil-streep { width: 1px; align-self: stretch; background: var(--lijn); margin: 4px 6px; }
.pil.pil-ik { background: var(--wit); }
.pil.pil-ik.aan { background: var(--nacht); color: #fff; }
.ik-tabs { margin-bottom: 18px; }
.pb-wis { background: transparent; border: 0; color: #f3c6bb; font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; margin-right: 12px; }
.pb-wis:hover { color: #fff; }
.pb-rechts { display: flex; align-items: center; }
.gz-breed { grid-column: 1 / -1; }
.lid-rij { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #edf3f2; flex-wrap: wrap; }
.gz-wis { margin-top: 22px; padding: 22px 24px; border-radius: 26px; }
.wis-klein { margin: 36px 0 8px; text-align: center; }
.wis-klein button { background: none; border: 0; color: var(--zacht); font: inherit; font-size: 0.82rem; text-decoration: underline; cursor: pointer; opacity: 0.8; }
.wis-klein button:hover { color: var(--rood); opacity: 1; }

/* Scorekaarten: groot en duidelijk */
.sc-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 6px; }
.sc { position: relative; border-radius: 26px; padding: 20px 22px 18px; min-height: 190px; display: flex; flex-direction: column; gap: 4px; background: #f1f7f6; overflow: hidden; }
.sc.hoog { background: linear-gradient(160deg, #d6f4e8 0%, #a8e6cf 100%); }
.sc.mid { background: linear-gradient(160deg, #fff1cf 0%, #ffd97a 100%); }
.sc.laag { background: linear-gradient(160deg, #ffe0d6 0%, #ffb09a 100%); }
.sc.geen { background: #eef2f1; color: var(--zacht); }
.sc-titel { font: 800 0.95rem "Bricolage Grotesque", sans-serif; color: var(--nacht); opacity: 0.85; }
.sc-groot { display: flex; align-items: baseline; gap: 4px; margin: 4px 0 2px; }
.sc-groot strong { font: 800 4.6rem/0.95 "Bricolage Grotesque", sans-serif; letter-spacing: -0.05em; color: var(--nacht); }
.sc-groot small { font: 800 1.3rem "Bricolage Grotesque", sans-serif; color: var(--nacht); opacity: 0.6; }
.sc-smiley { font-size: 4.2rem; line-height: 1; align-items: center; }
.sc-bron { font-size: 0.88rem; color: var(--nacht); opacity: 0.75; }
.sc-woord { font: 800 1.35rem "Bricolage Grotesque", sans-serif; opacity: 1; }
.sc-trend { font-size: 0.82rem; font-weight: 800; color: var(--nacht); }
.sc-trend.op { color: #0b6e45; }
.sc-trend.neer { color: #a3361b; }
.sc-week { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.sc-week i { width: 6px; border-radius: 3px; background: rgba(13, 59, 63, 0.45); }
.sc-week i:last-child { background: var(--nacht); }
@media (max-width: 760px) { .sc-rij { grid-template-columns: 1fr; } .sc { min-height: 0; } .sc-groot strong { font-size: 3.6rem; } }

/* Kennismaking */
.kn-kop { display: flex; gap: 22px; align-items: center; background: var(--wit); border-radius: 28px; padding: 24px 28px; box-shadow: 0 0 0 1px rgba(13, 59, 63, 0.08); margin-bottom: 18px; }
.kn-kop h3 { margin: 0; font-size: 1.4rem; }
.kn-ring { --p: 0; flex: none; width: 96px; height: 96px; border-radius: 50%; background: conic-gradient(var(--zon) calc(var(--p) * 1%), #e6efed 0); display: grid; place-items: center; position: relative; }
.kn-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--wit); }
.kn-ring strong { position: relative; font: 800 1.5rem "Bricolage Grotesque", sans-serif; }
.kn-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kn-kaart { background: var(--wit); border-radius: 24px; padding: 20px 22px; box-shadow: 0 0 0 1px rgba(13, 59, 63, 0.08); }
.kn-kaart.leeg { background: #fbfdfc; box-shadow: 0 0 0 1px dashed rgba(13, 59, 63, 0.1); }
.kn-breed { grid-column: 1 / -1; margin-top: 16px; }
.kn-kaart header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kn-kaart header h3 { margin: 0; font-size: 1.1rem; }
.kn-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kn-item { display: inline-flex; align-items: center; gap: 8px; background: #eef7f5; border-radius: 999px; padding: 6px 8px 6px 14px; }
.kn-item.anna { background: #fff3d6; }
.kn-item.klein { padding: 1px 10px; font-size: 0.78rem; font-weight: 800; }
.kn-item button { border: 0; background: rgba(13, 59, 63, 0.1); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 0.7rem; }
.kn-item button:hover { background: var(--koraal); color: #fff; }
.kn-leeg { margin: 0 0 12px; font-size: 0.9rem; }
.kn-toevoegen { display: flex; gap: 8px; }
.kn-toevoegen input { flex: 1; min-width: 0; border: 2px solid var(--lijn); border-radius: 12px; padding: 8px 12px; font: inherit; }
.kn-volg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kn-volg li { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: #f7faf9; border-radius: 14px; padding: 10px 14px; }
.kn-volg button { border: 0; background: rgba(13, 59, 63, 0.1); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 0.7rem; flex: none; }
@media (max-width: 860px) { .kn-raster { grid-template-columns: 1fr; } .kn-kop { flex-direction: column; align-items: flex-start; } }

/* Zeg het Anna */
.snel-balk { background: var(--wit); border-radius: 22px; padding: 14px 18px 16px; margin: 0 0 16px; box-shadow: 0 0 0 1px rgba(13, 59, 63, 0.09); }
.snel-balk label { font: 800 0.8rem "Bricolage Grotesque", sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: var(--zee); }
.snel-rij { display: flex; gap: 10px; margin-top: 6px; }
.snel-rij input { flex: 1; min-width: 0; border: 2px solid var(--lijn); border-radius: 14px; padding: 12px 14px; font: inherit; }
.snel-rij input:focus { outline: none; border-color: var(--zee); }
.snel-uitslag { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.snel-chip { background: #eef7f5; border-radius: 14px; padding: 6px 12px; font-size: 0.92rem; }
.snel-chip.herinnering { background: #fff3d6; }
.snel-chip.boodschap { background: #e6eefc; }
.snel-chip em { font-style: normal; color: var(--zacht); font-size: 0.85rem; }

/* Menu: nooit onder elkaar, en de gele knop leesbaar */
.kop nav { flex-wrap: nowrap; white-space: nowrap; }
.kop nav a.knop, .kop nav a.knop:hover { color: var(--nacht); background: var(--zon); }
.kop nav > a:not(.knop):not(.ik-chip) { padding: 9px 12px; font-size: 0.98rem; }
@media (max-width: 1250px) { .kop .ik-chip .ik-naam { display: none; } .kop nav > a:not(.knop):not(.ik-chip) { padding: 8px 9px; font-size: 0.93rem; } }
@media (max-width: 1100px) { .kop nav > a[data-sectie] { display: none; } }
.snel-wanneer { margin-top: 10px; display: grid; gap: 6px; }
.snel-wanneer .chips button { padding: 6px 12px; font-size: 0.88rem; }
.snel-wanneer input[type=date] { font: inherit; padding: 8px 10px; border: 2px solid var(--lijn); border-radius: 12px; max-width: 220px; }
.b-type { margin-bottom: 14px; }
.lijst-kop { margin: 22px 0 10px; font-size: 1.1rem; }

/* Kennismakingslijst in het formulier */
.kv { background: #f7faf9; border-radius: 18px; padding: 14px 16px; margin-top: 10px; }
.kv-vraag { display: grid; gap: 6px; font-size: 1rem; color: var(--inkt); font-weight: 700; }
.kv-input, .kv-volg-input { font: inherit; font-weight: 400; padding: 10px 12px; border: 2px solid var(--lijn); border-radius: 12px; width: 100%; background: #fff; }
.kv-ideeen { margin-top: 8px; }
.kv-ideeen button { padding: 5px 12px; font-size: 0.86rem; }
.kv-volg { display: grid; gap: 8px; margin-top: 8px; }
.kv-volg-rij { display: grid; gap: 4px; padding: 10px 12px 10px 16px; border-left: 4px solid var(--zon); background: #fffaf0; border-radius: 0 12px 12px 0; font-size: 0.95rem; color: var(--inkt); animation: kv-in 0.3s ease; }
@keyframes kv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kv-denkt { margin: 6px 0 0; }

/* Meer contrast in Mijn Kindcall */
body.app-pagina { background: #e6eeec; }
body.app-pagina .kaart, .gk, .gz-kaart, .kn-kaart, .kn-kop, .snel-balk, .morgen-kaart, .stem-kaart, .melding { border: 1px solid #c5d5d1; box-shadow: 0 10px 24px -16px rgba(13, 59, 63, 0.45); }
.chips button { background: #f2f7f6; border-color: #aebfbb; color: var(--nacht); }
.chips button:hover { border-color: var(--nacht); background: #fff; }
.chips button.aan { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.chips button.aan .fav { background: var(--zon); color: var(--nacht); }
.fav { font-style: normal; font-size: 0.7rem; font-weight: 800; background: var(--zon); color: var(--nacht); padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.app-tabs { background: #fff; border: 1px solid #c5d5d1; border-radius: 22px; padding: 8px; box-shadow: 0 10px 24px -18px rgba(13, 59, 63, 0.5); }
.persoon-banner, .status-balk { box-shadow: 0 16px 30px -20px rgba(13, 59, 63, 0.7); }

/* Zeg het Anna: duidelijk en met kleur */
.snel-balk { background: #fffaf0; border: 1px solid #ecd9a3; border-left: 8px solid var(--zon); }
.snel-balk > label { font-size: 0.95rem; color: var(--nacht); }
.snel-rij input { background: #fff; border-color: #aebfbb; }
.snel-wanneer { background: #fff; border: 1px solid #e3d3a0; border-radius: 16px; padding: 12px 14px; margin-top: 12px; gap: 8px; }
.snel-wanneer > .meta { color: var(--nacht); font-weight: 800; font-size: 0.95rem; }
.snel-wanneer .chips button { padding: 8px 14px; font-size: 0.92rem; }
#snel-datum-label { display: grid; gap: 4px; font-weight: 700; color: var(--nacht); font-size: 0.92rem; }
#snel-datum-label input { max-width: 220px; border: 2px solid #aebfbb; border-radius: 12px; padding: 8px 10px; font: inherit; background: #fff; }

/* Morgen vraagt Anna naar */
.morgen-kaart { background: #fffaf0; border-left: 8px solid var(--zon); border-radius: 22px; padding: 18px 22px; margin-bottom: 16px; }
.morgen-kaart header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.morgen-kaart h3 { margin: 0; font-size: 1.15rem; }
.morgen-kaart .kn-volg li { background: #fff; border: 1px solid #ecd9a3; }
.morgen-kaart .kn-toevoegen { margin-top: 10px; }

/* Stap 5 in het formulier: duidelijke blokken */
.sub { background: #f2f7f6; border: 1px solid #cddad7; border-radius: 20px; padding: 18px 20px 20px; margin-top: 16px; }
.sub h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 800 1.1rem "Bricolage Grotesque", sans-serif; }
.sub h4 em { font: 400 0.85rem "Atkinson Hyperlegible", sans-serif; color: var(--zacht); font-style: normal; margin-left: 4px; }
.sub-letter { width: 28px; height: 28px; border-radius: 9px; background: var(--nacht); color: var(--zon); display: inline-grid; place-items: center; font-size: 0.9rem; flex: none; }
.sub-uitleg { margin: 0 0 12px; color: var(--zacht); font-size: 0.95rem; }
.sub .chips { margin-top: 8px; }
.sub .chips button { background: #fff; }
.sub .chips button.aan { background: var(--nacht); }
.sub .kv { background: #fff; border: 1px solid #dfe9e6; }
.sub textarea, .sub input:not([type="checkbox"]) { background: #fff; }
.kop nav .menu a, .kop nav .menu button { color: var(--inkt); font-weight: 700; padding: 10px 12px; border-radius: 12px; }
.kop nav .menu a:hover, .kop nav .menu button:hover { background: var(--munt); color: var(--nacht); }
.kop nav .menu .menu-uit { color: var(--rood); }

/* Terug naar een lichte, vriendelijke look: geen grijsgroen, geen gele zijbalken */
body.app-pagina { background: radial-gradient(900px 420px at 85% -80px, #ffe9a8 0, rgba(255, 233, 168, 0) 70%), radial-gradient(900px 500px at -10% 120px, #cfe9e3 0, rgba(207, 233, 227, 0) 70%), var(--grond); background-repeat: no-repeat; }
body.app-pagina .kaart, .gk, .gz-kaart, .kn-kaart, .kn-kop, .snel-balk, .stem-kaart, .melding { border: 1px solid #e3ebe9; box-shadow: 0 14px 30px -22px rgba(13, 59, 63, 0.4); }
.snel-balk { background: #fff; border: 1px solid #e3ebe9; border-left: 1px solid #e3ebe9; }
.snel-wanneer { background: #f6faf9; border: 1px solid #e3ebe9; }
.morgen-kaart { display: none; }
.app-tabs { border: 1px solid #e3ebe9; }
.sub { background: #f7faf9; border-color: #e3ebe9; }
.snel-balk > label { color: var(--zee); }

/* Gekozen abonnement: leesbaar */
.chips.plan-keuze button.aan { background: #e4f4ef; border-color: var(--nacht); color: var(--nacht); box-shadow: inset 0 0 0 1px var(--nacht); }
.chips.plan-keuze button.aan strong, .chips.plan-keuze button.aan em { color: var(--nacht); }
.chips.plan-keuze button.aan span { color: #3d5a58; }

/* Wat meer vreugde */
.app-tabs button.aan { background: linear-gradient(135deg, #0d3b3f, #14746f); color: #fff; }
.app-tabs button .tab-ico { color: var(--zee); }
.app-tabs button[data-ptab="boodschappen"] .tab-ico { color: #e8603f; }
.app-tabs button[data-ptab="vragen"] .tab-ico { color: #7a5cc4; }
.app-tabs button[data-ptab="kennis"] .tab-ico { color: #e8603f; }
.app-tabs button[data-ptab="levensboek"] .tab-ico { color: #c76a14; }
.app-tabs button.aan .tab-ico { color: var(--zon) !important; }
.pil { box-shadow: 0 6px 14px -10px rgba(13, 59, 63, 0.5); }
.sc { box-shadow: 0 16px 28px -22px rgba(13, 59, 63, 0.5); }
.persoon-banner { background: linear-gradient(135deg, #0d3b3f 0%, #14746f 100%); }
.gk::before { background: linear-gradient(90deg, #0f8f80, #14746f); }
.gk.let-op::before { background: #ff7a59; }
.knop-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: #e8453c; color: #fff; font: 800 0.8rem "Atkinson Hyperlegible", sans-serif; box-shadow: 0 0 0 2px var(--zon); }
.pb-rechts { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Knoppen in de blauwe banner: altijd leesbaar */
.persoon-banner .knop.licht { background: #fff; color: var(--nacht); border: 0; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5); }
.persoon-banner .knop.licht:hover { background: #f3f8f7; }

/* Aanpassen: knop bij de naam en klikbare rijen */
.pb-edit { margin: 6px 0 0; background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 6px 14px; font: 700 0.9rem "Atkinson Hyperlegible", sans-serif; cursor: pointer; }
.pb-edit:hover { background: #fff; color: var(--nacht); }
.gz-rij.klik { cursor: pointer; border-radius: 12px; transition: background 0.15s; }
.gz-rij.klik:hover { background: #eef7f5; }
.gz-rij.klik .gz-label::after { content: " ✎"; opacity: 0; transition: opacity 0.15s; }
.gz-rij.klik:hover .gz-label::after { opacity: 0.7; }
@keyframes flits { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 60, 0); } 30% { box-shadow: 0 0 0 6px rgba(255, 201, 60, 0.7); } }
.flits { animation: flits 1.2s ease 2; border-radius: 20px; }

/* Uitroeptekens: hier is nog iets te bekijken */
.tab-uitroep, .pil-uitroep { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e8453c; color: #fff; font: 800 0.8rem "Atkinson Hyperlegible", sans-serif; margin-left: 6px; animation: uitroep 2.2s ease infinite; }
.app-tabs button.aan .tab-uitroep { box-shadow: 0 0 0 2px var(--zon); }
@keyframes uitroep { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.taken-balk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: #fff1ee; border: 1px solid #f3c3bb; border-radius: 20px; padding: 12px 16px; margin-bottom: 14px; }
.taken-balk strong { color: #a3361b; margin-right: 6px; }
.taken-balk button { border: 1px solid #e8b0a4; background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.92rem; cursor: pointer; }
.taken-balk button:hover { background: #ffe0d6; }

/* Boodschappen: elke vraag in een eigen blok */
.b-stap { margin-top: 12px; }
.b-stap h4 { font-size: 1.02rem; }
.idee-label { margin: 10px 0 4px; font-size: 0.85rem; color: var(--zacht); }
#b-ideeen button { background: transparent; border: 2px dashed #b9cbc7; color: var(--zacht); font-size: 0.88rem; padding: 6px 12px; }
#b-ideeen button:hover { border-style: solid; color: var(--nacht); background: #fff; }
.b-type { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e3ebe9; }
.b-stap textarea { width: 100%; min-height: 96px; box-sizing: border-box; }
.taken-balk { display: grid; gap: 10px; }
.taken-balk .taak { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.taken-balk .taak span { color: #7a3a2c; font-size: 0.88rem; }
.kn-uitleg { background: #fff1ee; border: 1px solid #f3c3bb; border-radius: 18px; padding: 14px 18px; margin-bottom: 14px; color: #5a2a20; }

/* Stem kiezen */
.stem-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.stem-kies { position: relative; display: flex; gap: 12px; align-items: center; background: #fff; border: 2px solid #cddad7; border-radius: 20px; padding: 12px 14px; cursor: pointer; }
.stem-kies:hover { border-color: var(--zee); }
.stem-kies strong { display: block; font: 800 1.1rem "Bricolage Grotesque", sans-serif; }
.stem-kies span { color: var(--zacht); font-size: 0.85rem; }
.stem-kies .stem-vink { position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cddad7; }
.stem-kies.aan { background: #e4f4ef; border-color: var(--nacht); box-shadow: inset 0 0 0 1px var(--nacht); }
.stem-kies.aan .stem-vink { background: var(--nacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc93c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--nacht); }

/* Berichtencentrum: alles wat aandacht vraagt op één plek */
.centrum { background: #fff; border: 1px solid #e3ebe9; border-radius: 22px; margin-bottom: 14px; box-shadow: 0 14px 30px -24px rgba(13, 59, 63, 0.45); overflow: hidden; }
.centrum.dringend { border-color: #e8453c; box-shadow: 0 0 0 3px rgba(232, 69, 60, 0.18); }
.centrum-kop { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 14px 16px; cursor: pointer; font: inherit; color: var(--inkt); }
.centrum-bel { flex: none; min-width: 34px; height: 34px; border-radius: 50%; background: #e8453c; color: #fff; display: grid; place-items: center; font: 800 1rem "Bricolage Grotesque", sans-serif; }
.centrum-titel { flex: 1; min-width: 0; display: grid; }
.centrum-titel strong { font: 800 1.02rem "Bricolage Grotesque", sans-serif; }
.centrum-titel span { color: var(--zacht); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.centrum-kop[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.centrum-lijst { border-top: 1px solid #edf3f2; padding: 4px 16px 12px; }
.centrum-rij { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f5f4; }
.centrum-rij p { margin: 2px 0 0; }
.centrum-rij small { color: var(--zacht); display: block; margin-top: 2px; }
.centrum-wie { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zee); }
.centrum-rij.nood .centrum-wie { color: #c8332a; }
.centrum-rij .knop { flex: none; }
.centrum-proef { margin: 10px 0 0; color: var(--zacht); font-size: 0.88rem; }

/* Personen: één rij die je kan schuiven, niet drie rijen onder elkaar */
.pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pil { flex: none; }
.persoonbalk { flex-wrap: nowrap; gap: 8px; }
.persoonbalk > .knop { flex: none; }

@media (max-width: 700px) {
  /* Tabbladen blijven bovenaan hangen en schuiven opzij */
  #persoontabs { position: sticky; top: 66px; z-index: 8; margin: 0 -4px 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: #fff; }
  #persoontabs::-webkit-scrollbar { display: none; }
  #persoontabs button { padding: 9px 14px; font-size: 0.92rem; }
  /* De blauwe balk wordt compact */
  .persoon-banner { padding: 16px; border-radius: 24px; gap: 10px; }
  .persoon-banner h1 { font-size: 1.6rem; }
  .pb-avatar { width: 52px; height: 52px; font-size: 1.4rem; }
  .pb-rechts { justify-content: flex-start; }
  .pb-onder { font-size: 0.85rem; }
  .persoon-banner .knop.klein { padding: 8px 12px; font-size: 0.86rem; }
  .status-balk { padding: 12px 14px; }
  .sc-rij { gap: 10px; }
  .sc { padding: 14px 16px; }
  .sc-groot strong { font-size: 3rem; }
  .centrum-rij { flex-direction: column; align-items: flex-start; }
  .gk { padding: 18px 16px; }
  .snel-rij { flex-direction: column; }
  .dagkeuze { width: 66px; }
}

/* Formulier in stappen */
.wiz-balk { background: #fff; border: 1px solid #e3ebe9; border-radius: 22px; padding: 14px 18px; display: grid; gap: 10px; position: sticky; top: 68px; z-index: 7; box-shadow: 0 10px 24px -20px rgba(13, 59, 63, 0.5); }
.wiz-tekst { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.wiz-tekst strong { font: 800 1rem "Bricolage Grotesque", sans-serif; }
.wiz-tekst span { color: var(--zacht); font-weight: 700; }
.wiz-bolletjes { display: flex; gap: 6px; }
.wiz-bolletjes button { flex: 1; height: 10px; border-radius: 999px; border: 0; background: #dfe9e7; cursor: pointer; padding: 0; }
.wiz-bolletjes button.klaar { background: #7fc7bb; }
.wiz-bolletjes button.nu { background: var(--nacht); }
.wiz-bolletjes button:disabled { cursor: default; opacity: 0.7; }
.wiz-knoppen { display: flex; gap: 10px; justify-content: space-between; margin-top: 4px; position: sticky; bottom: 0; background: linear-gradient(to top, #f6f7f4 70%, rgba(246, 247, 244, 0)); padding: 14px 0 8px; z-index: 6; }
.wiz-knoppen .knop { flex: 1; justify-content: center; }
.concept-melding { background: #fff3d6; border-radius: 16px; padding: 10px 14px; font-weight: 700; }
.concept-melding button { border: 0; background: none; text-decoration: underline; font: inherit; font-weight: 800; cursor: pointer; color: var(--nacht); }
@media (max-width: 700px) { .wiz-balk { top: 62px; } }

/* Medicatie */
.med-regel { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 14px; font-weight: 700; }
.med-regel.ja { background: #dff3ea; color: #0b6e45; }
.med-regel.nee { background: #ffe0d6; color: #a3361b; }
.med-bol { width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.med-week { background: #fff; border: 1px solid #e3ebe9; border-radius: 20px; padding: 14px 18px; margin-bottom: 14px; display: grid; gap: 10px; }
.med-dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-size: 0.78rem; color: var(--zacht); text-transform: capitalize; }
.med-dag { display: grid; justify-items: center; gap: 4px; }
.med-dag i { width: 26px; height: 26px; border-radius: 50%; background: #e3ebe9; }
.med-dag.ja i { background: #2fb37a; }
.med-dag.nee i { background: #e8453c; }

/* Voorbeeldverslag op de homepage en in lege schermen */
.voorbeeld-kaart { background: #fff; border-radius: 30px; padding: 26px 28px; max-width: 900px; margin: 0 auto; box-shadow: 0 40px 70px -44px rgba(13, 59, 63, 0.55), 0 0 0 1px rgba(13, 59, 63, 0.08); }
.vk-kop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.vk-kop span { color: var(--zacht); }
.leeg-kaart { background: #fff; border-radius: 26px; padding: 24px 26px; border: 1px solid #e3ebe9; }
.leeg-kaart h3 { margin: 6px 0 6px; font-size: 1.4rem; }
.leeg-voorbeeld { position: relative; opacity: 0.55; pointer-events: none; margin-top: 8px; }
.leeg-label { position: absolute; top: 6px; right: 6px; background: var(--nacht); color: #fff; font: 800 0.78rem "Bricolage Grotesque", sans-serif; padding: 4px 12px; border-radius: 999px; }

/* Rustiger: minder kleur in de tabbladen, geen schaduw op elk bolletje, gele knop enkel voor de hoofdactie */
.app-tabs button .tab-ico, .app-tabs button[data-ptab] .tab-ico { color: var(--zee) !important; }
.app-tabs button.aan .tab-ico { color: var(--zon) !important; }
.pil { box-shadow: none; }
.knop.licht { background: #fff; color: var(--nacht); border: 2px solid #cddad7; box-shadow: none; }
.knop.licht:hover { border-color: var(--nacht); }

/* Onderbalk per pagina: waar ben ik, met sprong naar het onderdeel */
.subnav { position: sticky; top: 72px; z-index: 9; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn); }
.subnav .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; text-decoration: none; color: var(--zacht); font-weight: 700; font-size: 0.95rem; padding: 8px 16px; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.subnav a:hover { color: var(--nacht); background: var(--munt); }
.subnav a.actief { background: var(--nacht); color: var(--zon); }
main section[id], main span[id] { scroll-margin-top: 140px; }
.pagina-kop { padding-bottom: 8px; }
.pagina-kop h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.kop nav a.actief { color: var(--zon); font-weight: 700; }
@media (max-width: 960px) { .subnav { top: 62px; } main section[id], main span[id] { scroll-margin-top: 120px; } }
/* Op de gsm: de pagina's als schuifbare balk onder het logo */
.paginanav { display: none; }
@media (max-width: 960px) {
  .paginanav { display: block; position: sticky; top: 62px; z-index: 9; background: var(--nacht-2); }
  .paginanav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 6px; padding-bottom: 6px; }
  .paginanav .wrap::-webkit-scrollbar { display: none; }
  .paginanav a { flex: none; color: #d7ecea; text-decoration: none; font-weight: 700; font-size: 0.92rem; padding: 7px 14px; border-radius: 999px; }
  .paginanav a.actief { background: var(--zon); color: var(--nacht); }
  .subnav { top: 108px; }
  main section[id], main span[id] { scroll-margin-top: 170px; }
}

/* Melding bij wegklikken zonder bewaren */
.vuil-dialoog { position: fixed; inset: 0; z-index: 1000; background: rgba(13, 59, 63, 0.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: vuilIn 0.2s ease; }
.vuil-kaart { background: #fff; border-radius: 28px; padding: 32px 28px 26px; max-width: 440px; width: 100%; box-shadow: 0 30px 80px rgba(13, 59, 63, 0.35); text-align: center; }
.vuil-ico { width: 60px; height: 60px; border-radius: 20px; background: var(--zon); color: var(--nacht); display: grid; place-items: center; margin: 0 auto 14px; }
.vuil-kaart h3 { font-size: 1.5rem; margin: 0 0 8px; }
.vuil-kaart p { color: var(--zacht); margin: 0 0 22px; }
.vuil-knoppen { display: grid; gap: 10px; }
.vuil-knoppen .knop { justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.vuil-weg { background: none; border: 0; color: var(--zacht); font: inherit; font-weight: 700; padding: 10px; cursor: pointer; text-decoration: underline; }
@keyframes vuilIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }