/* chat.css — de Kaasmeester-chat V3: de orb als middelpunt.
   Architectuur: markup in index.html · stijl hier · logica in chat.js
   Thema's: alle kleuren lopen via semantische variabelen; body[data-thema="inkt"]
   schakelt het donkere premium-thema in. Familiekleuren en goud zijn constant. */

:root {
  /* licht (krijt & crème) — het vertrekpunt */
  --vlak:#f5f4ee; --vlak2:#eceae5; --kaart:#fffdf8; --invoer:#ffffff;
  --tekst:#14130f; --tekst-zacht:#3a382f; --gedempt:#6e6a5c; --rand:#d8d4c6;
  --ik-bg:#14130f; --ik-tekst:#f5f4ee; --knop-bg:#14130f; --knop-tekst:#f5f4ee;
  --chip-warm:#fbf6e9; --schaduw:rgba(20,19,15,.06);
  /* constant in beide thema's */
  --inkt:#14130f; --creme:#f5f4ee; --goud:#9a7b2e; --goud-licht:#c9a44a;
  --geit:#5b6234; --wit-fam:#9a7b2e; --gewassen:#9b4a2c; --hard:#7e5b2a; --blauw:#33566e;
  --disp:"Fraunces",Georgia,serif; --body:"Newsreader",Georgia,serif;
}
body[data-thema="inkt"] {
  /* donker (inkt & goud) — het premium-thema */
  --vlak:#14130f; --vlak2:#1a1913; --kaart:#1e1c15; --invoer:#23211a;
  --tekst:#ece8da; --tekst-zacht:#cfc9b6; --gedempt:#8f8a74; --rand:#38352a;
  --ik-bg:#38321d; --ik-tekst:#f5efdc; --knop-bg:#c9a44a; --knop-tekst:#14130f;
  --chip-warm:rgba(201,164,74,.13); --schaduw:rgba(0,0,0,.4);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family:var(--body); font-size:17px; color:var(--tekst); overflow:hidden;
  background:radial-gradient(ellipse 90% 60% at 50% -10%, rgba(154,123,46,.08), transparent 60%), var(--vlak);
  -webkit-font-smoothing:antialiased; transition:background .4s, color .4s;
}
body.groot { font-size:20px; }
button { font-family:inherit; }

.app { display:flex; height:100dvh; }

/* ---------- zijbalk: de kelderkast (donker in beide thema's) ---------- */
.zijbalk {
  width:284px; flex:none; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#191813,#14130f); color:#e6e2d6;
  border-right:1px solid rgba(201,164,74,.25);
}
.zb-kop { display:flex; align-items:center; gap:11px; padding:18px 16px 12px; }
.zb-zegel {
  width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2a2820, #14130f); border:1.5px solid var(--goud-licht);
  font-family:var(--disp); font-weight:600; color:var(--goud-licht); font-size:17px;
}
.zb-kop b { font-family:var(--disp); font-weight:500; font-size:19px; color:#f5f4ee; }
.zb-kop small { display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--goud); }
.zb-nieuw {
  margin:4px 12px 10px; display:flex; align-items:center; gap:9px; padding:11px 14px; cursor:pointer;
  border:1px solid rgba(201,164,74,.4); border-radius:999px; background:transparent;
  color:#f5f4ee; font-size:14.5px; transition:border-color .2s, background .2s;
}
.zb-nieuw:hover { border-color:var(--goud-licht); background:rgba(201,164,74,.08); }
.zb-titel { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#8a8570; padding:10px 18px 6px; }
.zb-reis { flex:1; overflow-y:auto; padding:0 8px 8px; display:flex; flex-direction:column; gap:2px; }
/* een rij = een kaasgesprek: openen links, ✕ rechts; het actieve venster licht op */
.reis-item {
  display:flex; align-items:center; width:100%; border-radius:10px;
}
.reis-item:hover { background:rgba(255,255,255,.06); }
.reis-item.aan { background:rgba(201,164,74,.14); box-shadow:inset 2px 0 0 var(--kleur,#c9a44a); }
.reis-open {
  display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-align:left; cursor:pointer;
  padding:10px 12px; border:none; background:transparent; color:#e6e2d6; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reis-x {
  flex:none; border:none; background:transparent; cursor:pointer; color:#7a7560;
  font-size:13px; padding:10px 12px; border-radius:8px; opacity:0; transition:opacity .15s, color .15s;
}
.reis-item:hover .reis-x, .reis-item.aan .reis-x { opacity:1; }
.reis-x:hover { color:#d99a7a; }
@media (pointer:coarse) { .reis-x { opacity:1; } }   /* gsm: geen hover, kruisje altijd zichtbaar */
.reis-item .stip { width:10px; height:10px; border-radius:50%; flex:none; background:var(--kleur,#777); box-shadow:0 0 6px rgba(0,0,0,.4); }
.reis-leeg { color:#7a7560; font-size:13.5px; font-style:italic; padding:12px; line-height:1.6; }
.zb-onder { border-top:1px solid rgba(201,164,74,.2); padding:10px 8px; display:flex; flex-direction:column; gap:3px; }
.zb-knop {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:11px 13px; border:none; background:transparent; border-radius:10px; color:#e6e2d6; font-size:14.5px;
  transition:background .2s;
}
.zb-knop:hover { background:rgba(255,255,255,.06); }
.zb-knop.goud { color:var(--goud-licht); border:1px solid rgba(201,164,74,.4); border-radius:999px; justify-content:center; }
.zb-knop .zegeltje { width:12px; height:12px; border-radius:50%; background:var(--goud); flex:none; }
.zb-links { display:flex; gap:4px; padding:4px 13px 2px; }
.zb-links a { color:#8a8570; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; padding:6px 8px; }
.zb-links a:hover { color:var(--goud-licht); }

/* ---------- hoofd ---------- */
.hoofd { flex:1; min-width:0; display:flex; flex-direction:column; }
.m-kop { display:none; }

/* orb-podium: een levende horizon */
.podium { flex:none; padding:12px 16px 8px; }
.podium-band {
  position:relative; max-width:760px; height:112px; margin:0 auto; border-radius:16px; overflow:hidden;
  background:#14130f; border:1px solid rgba(154,123,46,.4);
  box-shadow:0 10px 34px var(--schaduw), inset 0 0 0 1px rgba(0,0,0,.4);
}
.podium-band canvas { position:absolute; inset:0; width:100%; height:100%; }
.podium-sluier {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(20,19,15,.86) 0%, rgba(20,19,15,.45) 42%, rgba(20,19,15,.05) 70%);
}
.podium-band::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--goud) 30%, var(--goud-licht) 50%, var(--goud) 70%, transparent);
  opacity:.7;
}
.podium-tekst { position:absolute; left:24px; top:50%; transform:translateY(-50%); z-index:2; }
.podium-tekst h1 { font-family:var(--disp); font-weight:500; font-size:23px; color:#f5f4ee; letter-spacing:.02em; line-height:1.15; }
.podium-tekst h1 i { font-style:italic; color:var(--goud-licht); }
.podium-sub { font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(230,226,214,.55); }
.orb-status { font-size:12.5px; font-style:italic; color:rgba(230,226,214,.75); min-height:1.3em; margin-top:3px; transition:opacity .3s; }
.orb-status.denkt { color:var(--goud-licht); }

/* ---------- het gesprek ---------- */
.gesprek { flex:1; overflow-y:auto; padding:18px 16px 10px; }
.gesprek .binnen { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.beurt { display:flex; gap:11px; animation:rijs .4s ease both; }
@keyframes rijs { from { opacity:0; transform:translateY(12px); } }
.beurt .blok { max-width:86%; }
.beurt.ai .blok {
  background:var(--kaart); border:1px solid var(--rand); border-left:3px solid var(--goud);
  border-radius:4px 14px 14px 4px; padding:13px 17px 12px; box-shadow:0 2px 10px var(--schaduw);
}
.beurt.gebruiker { justify-content:flex-end; }
.beurt.gebruiker .blok {
  background:var(--ik-bg); color:var(--ik-tekst); border-radius:14px 4px 14px 14px; padding:12px 17px; max-width:80%;
}
.wie { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--goud); margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.wie .lees { margin-left:auto; border:none; background:none; cursor:pointer; font-size:15px; opacity:.5; }
.wie .lees:hover { opacity:1; }
.tekst { line-height:1.6; }
.tekst p { margin-bottom:.6em; } .tekst p:last-child { margin-bottom:0; }
.tekst ul { margin:.3em 0 .6em 1.2em; }
.tekst.fout { color:var(--gewassen); }

/* welkomstkaart */
.welkom h2 { font-family:var(--disp); font-weight:500; font-size:26px; line-height:1.2; margin-bottom:8px; }
.welkom h2 em { font-style:italic; color:var(--goud); }
.welkom p { color:var(--tekst-zacht); }
.cijfers { display:flex; gap:26px; margin:13px 0 4px; }
.cijfer b { font-family:var(--disp); font-size:24px; color:var(--goud); display:block; line-height:1; }
.cijfer span { font-size:11.5px; color:var(--gedempt); letter-spacing:.08em; text-transform:uppercase; }

/* wachter */
.denken { display:inline-flex; gap:5px; vertical-align:middle; }
.denken i { width:7px; height:7px; border-radius:50%; background:var(--goud); animation:denkpols 1.2s ease-in-out infinite; }
.denken i:nth-child(2){ animation-delay:.18s } .denken i:nth-child(3){ animation-delay:.36s }
@keyframes denkpols { 0%,100%{ opacity:.3; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }
.denk-tekst { font-style:italic; color:var(--gedempt); margin-left:10px; }

/* bronnen, meld, deel */
.bronnen { margin-top:10px; padding-top:8px; border-top:1px dashed var(--rand); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bronnen .b-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gedempt); }
.bron-chip { display:inline-flex; align-items:center; gap:6px; background:var(--vlak2); border:1px solid var(--rand); border-radius:999px; padding:2.5px 10px; font-size:12.5px; color:var(--tekst-zacht); }
.bron-chip .zegel { width:11px; height:11px; border-radius:50%; background:var(--kleur,var(--goud)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.meld-bar { margin-top:7px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.meld-knop { border:none; background:none; cursor:pointer; font-family:var(--body); font-size:12px; color:var(--gedempt); padding:2px 0; }
.meld-knop:hover { color:var(--goud); }
.meld-form textarea { width:100%; font:inherit; font-size:14px; border:1px solid var(--rand); border-radius:9px; padding:8px 10px; margin:6px 0; background:var(--invoer); color:var(--tekst); }
.meld-rij { display:flex; gap:8px; }
.meld-rij button { font-size:12.5px; padding:6px 13px; border-radius:999px; border:1px solid var(--rand); background:var(--vlak2); color:var(--tekst); cursor:pointer; }
.meld-rij .meld-verzend { background:var(--knop-bg); color:var(--knop-tekst); border:none; }

/* keuzes + verken verder */
.keuzes, .kamers-chips { display:flex; flex-wrap:wrap; gap:8px; }
.keuzes { margin-top:10px; }
.chip {
  background:var(--kaart); border:1.5px solid var(--rand); border-radius:999px; cursor:pointer;
  padding:9px 15px; font-size:14.5px; color:var(--tekst); transition:border-color .15s, background .15s;
}
.chip:hover { border-color:var(--goud); }
.chip.goud { border-color:var(--goud); background:var(--chip-warm); font-weight:500; }
/* ---------- voet: rustig — alleen de vraagbalk en één stille regel ---------- */
.voet { flex:none; border-top:1px solid var(--rand); background:var(--vlak2); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
.balk { display:flex; gap:9px; max-width:760px; margin:0 auto; }
.balk .kies-knop {
  flex:none; border:1.5px solid var(--goud); background:var(--chip-warm); color:var(--goud); border-radius:12px;
  padding:0 14px; cursor:pointer; font-size:18px; transition:filter .2s;
}
.balk .kies-knop:hover { filter:brightness(1.05); }
.balk input {
  flex:1; min-width:0; font:inherit; font-size:16.5px; padding:12px 16px;
  border:1.5px solid var(--rand); border-radius:12px; background:var(--invoer); color:var(--tekst);
}
.balk input:focus { outline:none; border-color:var(--goud); box-shadow:0 0 0 3px rgba(154,123,46,.16); }
.balk .verstuur {
  flex:none; background:var(--knop-bg); color:var(--knop-tekst); border:none; border-radius:12px;
  padding:0 22px; font:inherit; font-size:16px; cursor:pointer; transition:filter .2s;
}
.balk .verstuur:hover:not(:disabled) { filter:brightness(1.15); }
.balk .verstuur:disabled { opacity:.5; cursor:wait; }
.voet-regel { display:flex; align-items:center; gap:16px; max-width:760px; margin:7px auto 0; }
.eerlijk { flex:1; min-width:0; font-size:11.5px; font-style:italic; color:var(--gedempt); }

/* ---------- modals ---------- */
.overlay {
  position:fixed; inset:0; z-index:60; background:rgba(20,19,15,.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.overlay.open { display:flex; }
.modal {
  width:min(720px,96vw); max-height:88dvh; background:var(--kaart); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.45); border-top:4px solid var(--goud);
}
.mo-kop { display:flex; align-items:center; gap:10px; padding:15px 18px 12px; border-bottom:1px solid var(--rand); }
.mo-kop b { font-family:var(--disp); font-weight:500; font-size:21px; color:var(--tekst); }
.mo-kop .sluit { margin-left:auto; width:36px; height:36px; border:none; border-radius:10px; background:var(--vlak2); font-size:17px; cursor:pointer; color:var(--tekst-zacht); }
.mo-kop .sluit:hover { background:var(--rand); }
.mo-inhoud { overflow-y:auto; padding:14px 18px 18px; }
.mo-zoek { display:flex; align-items:center; gap:9px; background:var(--vlak2); border:1.5px solid var(--rand); border-radius:11px; padding:10px 14px; margin-bottom:11px; }
.mo-zoek input { flex:1; border:none; background:transparent; font:inherit; font-size:16px; outline:none; color:var(--tekst); }
.fam-rij { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.fam-chip {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:13px; color:var(--tekst-zacht);
  border:1.5px solid var(--rand); border-radius:999px; padding:6px 13px; background:var(--kaart); transition:all .15s;
}
.fam-chip .d { width:11px; height:11px; border-radius:50%; background:var(--kleur,#999); box-shadow:inset 0 -1px 2px rgba(0,0,0,.25); }
.fam-chip.aan { border-color:var(--goud); background:var(--chip-warm); color:var(--tekst); }
.kaasrooster { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.kaaskaart {
  position:relative; overflow:hidden; border:none; border-radius:12px; cursor:pointer; text-align:left;
  aspect-ratio:8/5; padding:12px 13px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(150deg, var(--k1,#4a4438), var(--k2,#28241d)); color:#fff;
  transition:transform .12s, box-shadow .2s;
}
.kaaskaart:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,19,15,.28); }
.kaaskaart .init { position:absolute; top:2px; right:10px; font-family:var(--disp); font-weight:700; font-size:52px; color:rgba(255,255,255,.14); line-height:1; }
.kaaskaart .nm { font-family:var(--disp); font-weight:500; font-size:16px; line-height:1.15; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.kaaskaart .fp { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:3px; }
.geen-kaas { grid-column:1/-1; text-align:center; color:var(--gedempt); font-style:italic; padding:22px 6px; line-height:1.7; }
.geen-kaas b { color:var(--goud); }

/* instellingen */
.inst-kop { font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--goud); margin:6px 2px 10px; }
.gids-rooster { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:16px; }
.gids {
  display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer; font:inherit; color:var(--tekst);
  border:1.5px solid var(--rand); border-radius:12px; padding:11px 12px; background:transparent; transition:all .15s;
}
.gids.aan { border-color:var(--goud); background:var(--chip-warm); }
.gids .gz { width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--disp); font-size:16px; background:var(--kleur,#777);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.25); }
.gids .gn { font-size:14.5px; } .gids .gr { color:var(--gedempt); font-size:12px; }
.gids .straks { margin-left:auto; font-size:9px; letter-spacing:.08em; text-transform:uppercase; background:var(--goud); color:#fff; border-radius:999px; padding:2px 7px; flex:none; }
.inst-veld { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px; border-bottom:1px solid var(--rand); }
.inst-veld:last-of-type { border-bottom:none; }
.inst-veld .k { color:var(--tekst); }
.inst-veld .k small { display:block; color:var(--gedempt); font-size:12.5px; }
.inst-veld input[type="text"] {
  font:inherit; font-size:15px; padding:9px 12px; border:1.5px solid var(--rand); border-radius:10px;
  background:var(--invoer); color:var(--tekst); width:min(220px,50vw);
}
.inst-veld input[type="text"]:focus { outline:none; border-color:var(--goud); }
.schakel { width:48px; height:28px; border-radius:999px; border:none; background:var(--rand); position:relative; cursor:pointer; flex:none; transition:background .2s; }
.schakel::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s; }
.schakel.aan { background:var(--goud); } .schakel.aan::after { left:23px; }

/* thema- en stemmingkeuze */
.taal-seg { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.taal-seg button {
  display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--rand); border-radius:999px;
  background:var(--kaart); cursor:pointer; font:inherit; font-size:13.5px; padding:7px 14px;
  color:var(--gedempt); transition:all .15s;
}
.taal-seg button.aan { border-color:var(--goud); background:var(--chip-warm); color:var(--tekst); font-weight:500; }
.taal-seg button:not(.aan):hover { border-color:var(--goud); }
.taal-hint { font-size:11.5px; color:var(--gedempt); font-style:italic; margin-top:5px; text-align:right; }
.inst-uitleg { font-size:13px; color:var(--gedempt); line-height:1.6; margin:-4px 2px 10px; }
.reset-knop {
  width:100%; margin-top:16px; border:1px solid var(--rand); border-radius:10px; background:transparent;
  color:var(--gedempt); font:inherit; font-size:12.5px; padding:10px; cursor:pointer; transition:all .2s;
}
.reset-knop:hover { border-color:var(--gewassen); color:var(--gewassen); }

/* account & premium */
.g-btn {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; color:#3c4043; border:1.5px solid var(--rand); border-radius:12px;
  padding:12px; font:inherit; font-size:15px; font-weight:500; cursor:pointer; transition:box-shadow .2s;
}
.g-btn:hover { box-shadow:0 4px 14px rgba(20,19,15,.15); }
.g-btn svg { width:19px; height:19px; flex:none; }
.straks-badge {
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--goud); color:#fff; border-radius:999px; padding:2.5px 8px; flex:none;
}
.premium-kaart {
  position:relative; border-radius:14px; padding:1.5px; margin-top:2px;
  background:linear-gradient(120deg, var(--goud), #e6cc7a 30%, var(--goud) 55%, #7a5f20 85%);
}
.pk-binnen { background:linear-gradient(180deg,#1b1a15,#14130f); border-radius:12.5px; padding:16px 18px 15px; color:#f5f4ee; }
.pk-kop { display:flex; align-items:baseline; gap:9px; margin-bottom:11px; }
.pk-kop .pk-ster { color:var(--goud-licht); }
.pk-kop b { font-family:var(--disp); font-weight:500; font-size:19px; }
.pk-prijs { margin-left:auto; font-family:var(--disp); font-size:21px; color:var(--goud-licht); }
.pk-prijs i { font-style:normal; font-size:12px; color:rgba(230,226,214,.6); }
.pk-binnen ul { list-style:none; margin-bottom:13px; }
.pk-binnen li { position:relative; padding-left:20px; font-size:13.5px; line-height:1.5; color:#d8d4c6; margin-bottom:6px; }
.pk-binnen li::before { content:"✦"; position:absolute; left:0; color:var(--goud); font-size:11px; top:2px; }
.pk-knop {
  width:100%; border:1px solid rgba(201,164,74,.55); border-radius:10px; background:rgba(201,164,74,.1);
  color:var(--goud-licht); font:inherit; font-size:13px; letter-spacing:.08em; padding:11px; cursor:pointer;
  transition:background .2s;
}
.pk-knop:hover { background:rgba(201,164,74,.2); }
.pk-voet { text-align:center; font-size:11.5px; font-style:italic; color:rgba(230,226,214,.55); margin-top:9px; }

/* toast */
.toast {
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:99;
  background:#14130f; color:#f5f4ee; border:1px solid var(--goud); border-radius:999px;
  padding:11px 20px; font-size:14px; max-width:90vw; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.3);
}

/* ---------- mobiel ---------- */
.zb-overlay { display:none; }
@media (max-width:860px) {
  .zijbalk {
    position:fixed; top:0; bottom:0; left:0; z-index:70; width:min(300px,86vw);
    transform:translateX(-102%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:8px 0 30px rgba(0,0,0,.4);
  }
  .zijbalk.open { transform:none; }
  .zb-overlay { display:block; position:fixed; inset:0; z-index:69; background:rgba(20,19,15,.5); opacity:0; pointer-events:none; transition:opacity .25s; }
  .zb-overlay.open { opacity:1; pointer-events:auto; }
  .m-kop { display:flex; align-items:center; gap:10px; padding:10px 14px 0; }
  .m-toggle { width:40px; height:40px; border:1px solid var(--rand); border-radius:10px; background:var(--kaart); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .m-toggle i { width:17px; height:2px; background:var(--tekst-zacht); border-radius:2px; }
  .m-kop .mk-naam { font-family:var(--disp); font-size:17px; color:var(--tekst); }
  .podium-band { height:88px; }
  .podium-tekst { left:16px; }
  .podium-tekst h1 { font-size:18px; }
  .gids-rooster { grid-template-columns:1fr; }
  .cijfers { gap:18px; }
  .taal-seg { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
  .beurt { animation:none; }
  .denken i { animation:none !important; }
}

/* StΔrDüst-signatuur: gedeelde stijl in kaas-gemeen.css; hier enkel de drager + het lettertype */
.zb-maker { display:flex; align-items:center; gap:8px; padding:8px 13px 4px;
  font-size:11px; color:#8a8570; letter-spacing:.04em; }
.stardust { font-family:var(--disp); }

/* ---------- instellingen als tab-paneel (Sfeer · Gids · Voorkeuren · Account · Premium · Hulp) ---------- */
.inst-modal { width:min(780px,96vw); }
.inst-lichaam { display:flex; min-height:400px; overflow:hidden; flex:1; }
.inst-rail { flex:none; width:172px; display:flex; flex-direction:column; gap:2px;
  padding:14px 10px; background:var(--vlak2); border-right:1px solid var(--rand); }
.rail-knop { position:relative; text-align:left; border:none; background:none; cursor:pointer;
  font-family:var(--disp); font-size:15px; color:var(--gedempt); padding:10px 13px;
  border-radius:9px; transition:color .2s, background .2s; }
.rail-knop:hover { color:var(--tekst); }
.rail-knop.aan { color:var(--tekst); background:var(--chip-warm); }
.rail-knop.aan::before { content:""; position:absolute; left:0; top:22%; bottom:22%; width:3px;
  border-radius:2px; background:var(--goud); }
.inst-panes { flex:1; min-width:0; overflow-y:auto; padding:16px 20px 20px; }
.pane { display:none; } .pane.aan { display:block; }

/* sfeerkaarten: het thema als proefplankje */
.sfeer-rooster { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.sfeer-kaart { border:1.5px solid var(--rand); border-radius:13px; background:var(--kaart);
  cursor:pointer; text-align:left; padding:0 0 11px; overflow:hidden; font:inherit; color:var(--tekst);
  transition:border-color .15s, transform .12s, box-shadow .2s; }
.sfeer-kaart:hover { transform:translateY(-2px); box-shadow:0 6px 16px var(--schaduw); }
.sfeer-kaart.aan { border-color:var(--goud); box-shadow:0 0 0 2px rgba(154,123,46,.18); }
.sk-voorbeeld { display:block; height:54px; margin-bottom:9px; }
.sfeer-kaart b { display:block; font-family:var(--disp); font-weight:500; font-size:15px; padding:0 12px; }
.sfeer-kaart small { display:block; color:var(--gedempt); font-size:12px; padding:2px 12px 0; }
.sk-licht { background:linear-gradient(120deg,#fffdf8,#f5f4ee 50%,#e5dfc8); }
.sk-inkt  { background:linear-gradient(120deg,#14130f,#2a2418 55%,#c9a44a); }

/* stemkeuze */
.stem-rij { display:flex; gap:8px; align-items:center; max-width:min(300px,60vw); }
.stem-rij select { flex:1; min-width:0; font:inherit; font-size:13.5px; padding:8px 10px;
  border:1.5px solid var(--rand); border-radius:9px; background:var(--invoer); color:var(--tekst); }
.beluister { flex:none; border:1.5px solid var(--rand); background:var(--kaart); border-radius:9px;
  cursor:pointer; font-size:14px; padding:7px 11px; transition:border-color .2s; }
.beluister:hover { border-color:var(--goud); }

/* hulp & over: rustige uitklappers */
.hulp-item { border:1px solid var(--rand); border-radius:11px; margin-bottom:9px;
  background:var(--kaart); overflow:hidden; }
.hulp-item summary { cursor:pointer; list-style:none; padding:12px 15px;
  font-family:var(--disp); font-size:15px; display:flex; align-items:center; color:var(--tekst); }
.hulp-item summary::-webkit-details-marker { display:none; }
.hulp-item summary::after { content:"+"; margin-left:auto; color:var(--goud); font-size:17px; }
.hulp-item[open] summary::after { content:"–"; }
.hulp-item .h-tekst { padding:0 15px 13px; color:var(--tekst-zacht); font-size:13.5px; line-height:1.7; }

/* de eerlijke vragenteller: compact naast de eerlijkheidsregel */
.teller { flex:none; display:flex; align-items:center; gap:8px; }
.teller-balk { width:86px; height:4px; border-radius:999px; background:var(--rand); overflow:hidden; }
.teller-balk i { display:block; height:100%; width:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--goud),var(--goud-licht)); transition:width .5s ease; }
.teller-tekst { flex:none; font-size:11px; color:var(--gedempt); white-space:nowrap; }

@media (max-width:700px) {
  .inst-lichaam { flex-direction:column; min-height:0; }
  .inst-rail { width:auto; flex-direction:row; overflow-x:auto; border-right:none;
    border-bottom:1px solid var(--rand); padding:8px 10px; scrollbar-width:none; }
  .rail-knop { white-space:nowrap; }
  .rail-knop.aan::before { left:12%; right:12%; top:auto; bottom:0; width:auto; height:3px; }
  .teller-tekst { font-size:10px; }
}

/* toekomst-kaart: gouden kader, eerlijke tekst — geen beloftes zonder dekking */
.pk-tekst { font-size:13.5px; line-height:1.7; color:#d8d4c6; margin-bottom:11px; }

/* kies-je-kaas: donker medaillon met warme spot — de vrijstaande kaas komt naar voren
   i.p.v. weg te smelten in crème (feedback Soffia) */
.kaaskaart .init.kfoto { top:8px; right:8px; width:58px; height:58px; border-radius:10px;
  background:radial-gradient(circle at 50% 42%, rgba(224,179,78,.22), rgba(13,12,10,.6) 78%);
  border:1px solid rgba(224,179,78,.3);
  display:flex; align-items:center; justify-content:center; padding:5px; }
.kaaskaart .init.kfoto img { max-width:100%; max-height:100%;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.55)); }
/* gsm: de foto wórdt de kaart — groot en gecentreerd boven de naam, niet piepklein in een hoek */
@media (max-width:640px) {
  .kaasrooster { grid-template-columns:1fr 1fr; gap:9px; }
  .kaaskaart { aspect-ratio:auto; min-height:158px; padding-top:12px; }
  .kaaskaart .init.kfoto { position:static; order:-1; width:92px; height:92px;
    align-self:center; margin-bottom:10px; }
}