/* Product Hunter: stijl gebaseerd op het PetrickSales-logo */

@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

:root {
  --bg: #0b1220;
  --panel: #111c30;
  --panel-2: #16233b;
  --line: #22324d;
  --tx: #e8eef5;
  --mut: #8a9bb0;
  --ac: #1fd1a5;
  --ac-2: #19b8d8;
  --ac-zacht: rgba(31, 209, 165, 0.12);
  --gloed: 0 0 0 1px rgba(31, 209, 165, 0.35), 0 0 24px rgba(31, 209, 165, 0.18);
  --goed: #34d399;
  --matig: #f5a524;
  --slecht: #f2545b;
  --rond: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Een vak dat je aanklikt of waar de browser naartoe springt, komt niet onder een vaste opslaan-balk te staan */
html { scroll-padding-bottom: 110px; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(25, 184, 216, 0.08), transparent 60%), var(--bg);
  background-attachment: fixed;
  color: var(--tx);
  font: 15px/1.55 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
[hidden] { display: none !important; }
/* Sleutels en wachtwoorden van andere diensten: bolletjes, maar geen echt wachtwoordveld (zie geheimInvoer in app.js) */
.geheim-invoer { -webkit-text-security: disc; text-security: disc; font-family: monospace; }
.geheim-invoer::placeholder { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; }
/* Even niets tonen tot de app weet of dit venster ingelogd mag blijven (zie app.js) */
body.sessie-controle .app, body.sessie-controle .mobiel-balk { visibility: hidden; }
/* Ingelogd met een tijdelijk wachtwoord: geen menu, alleen Account en Uitloggen */
body.moet-wijzigen .menu, body.moet-wijzigen .werkruimte, body.moet-wijzigen .mobiel-bel { display: none !important; }
a { color: var(--ac); }

/* --- Merk --- */
.merk { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.merk img { width: 44px; height: 44px; }
.merk-naam { font-weight: 800; font-size: 20px; letter-spacing: -0.3px; line-height: 1.1; color: var(--tx); }
.merk-naam span, .verloop {
  background: linear-gradient(90deg, var(--ac), var(--ac-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--mut);
}
.tagline::before, .tagline::after {
  content: ''; flex: 0 0 16px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ac), var(--ac-2));
}

/* --- Opbouw: menubalk links, inhoud rechts --- */
/* minmax(0, 1fr): een brede tabel maakt de inhoud nooit breder dan het scherm (die schuift dan in zijn eigen vak) */
.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
/* Het menu is precies zo hoog als het scherm. Past het er niet in, dan schuift het menu zelf (ook met het muiswiel
   als de muis erop staat), en de achtergrondkleur loopt altijd door tot onderaan. */
.zijbalk {
  background: rgba(17, 28, 48, 0.75);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overscroll-behavior: contain;
}
.zijbalk > * { flex-shrink: 0; }
.inhoud { min-width: 0; }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu button {
  display: flex; align-items: center; gap: 10px;
  text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid transparent; background: none; color: var(--mut);
  font: inherit; font-weight: 500; cursor: pointer;
}
.menu button:hover { color: var(--tx); background: var(--panel-2); }
.menu button.aan { color: var(--tx); background: var(--ac-zacht); border-color: rgba(31, 209, 165, 0.35); }
.menu button.aan .punt { background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.punt { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ac); flex: none; }
.wie { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; color: var(--mut); }
.wie b { display: block; color: var(--tx); font-weight: 600; }
.wie b, .wie span { overflow-wrap: anywhere; }
.wie .knoppen { display: flex; gap: 8px; margin-top: 10px; }

.inhoud { padding: 32px 24px 60px; }
.pagina { max-width: 820px; margin: 0 auto; }
h1 { font-weight: 800; font-size: 28px; letter-spacing: -0.5px; margin: 0 0 4px; }
h2 { font-weight: 600; font-size: 17px; margin: 0 0 12px; }
.intro { color: var(--mut); margin: 0 0 22px; }

/* --- Kaarten en formulieren --- */
.kaart {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rond);
  padding: 20px; margin-bottom: 18px;
}
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--mut); margin: 12px 0 6px; }
input, select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--tx); font: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ac); box-shadow: var(--gloed); }
textarea { min-height: 100px; resize: vertical; }

.knop {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--ac), var(--ac-2)); color: #06221c;
  font: inherit; font-weight: 600;
  box-shadow: 0 0 20px rgba(31, 209, 165, 0.22);
}
.knop:hover { filter: brightness(1.08); }
.knop:disabled { opacity: 0.6; cursor: wait; }
.knop.breed { width: 100%; margin-top: 18px; }
.knop.rand { background: transparent; color: var(--ac); border: 1px solid rgba(31, 209, 165, 0.5); box-shadow: none; }
.knop.klein { padding: 6px 12px; font-size: 13px; }
.knop.gevaar { background: transparent; color: var(--slecht); border: 1px solid rgba(242, 84, 91, 0.45); box-shadow: none; }

.melding { margin-top: 12px; font-size: 14px; min-height: 1em; }
.melding.fout { color: var(--slecht); }
.melding.goed { color: var(--goed); }
.hint { font-size: 13px; color: var(--mut); }

/* --- Score --- */
.uitslag { display: flex; align-items: center; gap: 22px; margin-bottom: 8px; flex-wrap: wrap; }
.cirkel {
  width: 120px; height: 120px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: conic-gradient(var(--kleur, var(--ac)) calc(var(--pct, 0) * 1%), var(--line) 0);
  box-shadow: 0 0 30px rgba(31, 209, 165, 0.15);
}
.cirkel div {
  width: 96px; height: 96px; border-radius: 50%; background: var(--panel);
  display: grid; place-items: center; font-weight: 800; font-size: 32px;
}
.cirkel small { display: block; font-size: 11px; color: var(--mut); font-weight: 500; margin-top: -10px; }
.oordeel { font-weight: 800; font-size: 22px; }
.balk-rij { margin: 14px 0; }
.balk-rij .t { display: flex; justify-content: space-between; font-size: 14px; }
.balk { height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.balk i { display: block; height: 100%; border-radius: 6px; width: 0; transition: width 0.6s ease; }
.prijs { font-size: 18px; margin-top: 18px; }
.prijs s { color: var(--mut); margin-right: 8px; }

/* --- Lijsten --- */
.lijst { width: 100%; border-collapse: collapse; }
.lijst th { text-align: left; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mut); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--line); }
.lijst td { padding: 12px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lijst tr:last-child td { border-bottom: 0; }
.lijst .acties { text-align: right; white-space: nowrap; }
.lijst .acties .knop { margin-left: 6px; }
.label-score { display: inline-block; min-width: 46px; text-align: center; padding: 3px 8px; border-radius: 999px; font-weight: 600; font-size: 13px; border: 1px solid currentColor; }
.scroll { overflow-x: auto; }
.leeg { color: var(--mut); text-align: center; padding: 24px 0; }

pre.opdracht { white-space: pre-wrap; word-wrap: break-word; font: inherit; margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.stappen { color: var(--mut); padding-left: 20px; margin: 12px 0 0; }

/* --- Vandaag: productkaarten --- */
.pagina.breed { max-width: 1240px; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.pkaart {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rond); overflow: hidden;
  color: var(--tx); font: inherit; padding: 0; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pkaart:hover, .pkaart:focus-visible { border-color: rgba(31, 209, 165, 0.55); box-shadow: var(--gloed); transform: translateY(-2px); outline: none; }
.pkaart .foto { aspect-ratio: 4 / 5; background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
.pkaart .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.geen-foto { color: var(--mut); font-size: 13px; padding: 16px; text-align: center; }
.pkaart .info { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pkaart .titel { font-weight: 600; line-height: 1.35; }
.pkaart .prijzen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: 14px; }
.pkaart .prijzen > * { white-space: nowrap; }
.pkaart .prijzen b { font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.chip { font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: rgba(245, 165, 36, 0.12); color: var(--matig); border: 1px solid rgba(245, 165, 36, 0.4); }
.chip.ok { background: var(--ac-zacht); color: var(--ac); border-color: rgba(31, 209, 165, 0.4); }
.demo-band {
  position: absolute; top: 12px; left: 0; right: 0; z-index: 1;
  background: rgba(242, 84, 91, 0.92); color: #fff; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 8px;
}
.demo-band.klein { position: static; display: inline-block; border-radius: 6px; margin-bottom: 8px; }
.leeg-kaart { grid-column: 1 / -1; text-align: center; color: var(--mut); padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--rond); }

/* --- Detailscherm --- */
dialog {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 24px;
  background: var(--panel); color: var(--tx); border: 1px solid rgba(31, 209, 165, 0.35); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), var(--gloed);
}
dialog::backdrop { background: rgba(5, 9, 18, 0.75); backdrop-filter: blur(3px); }
.detail-kop { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.detail-kop h2 { font-size: 22px; font-weight: 800; margin: 0; }
.sluit { background: none; border: 1px solid var(--line); color: var(--mut); width: 38px; height: 38px; border-radius: 10px; font-size: 22px; cursor: pointer; flex: none; }
.sluit:hover { color: var(--tx); border-color: var(--ac); }
.waarschuwingen { margin: 16px 0 4px; display: grid; gap: 8px; }
.waarschuwing { padding: 10px 14px; border-radius: 10px; background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.45); color: #ffd28a; font-size: 14px; }
.waarschuwing.merk { background: rgba(242, 84, 91, 0.1); border-color: rgba(242, 84, 91, 0.5); color: #ffb0b4; }
.waarschuwing.ok { background: var(--ac-zacht); border-color: rgba(31, 209, 165, 0.4); color: var(--ac); }
.veld-fout { margin-top: 6px; }
[aria-invalid="true"] { border-color: var(--slecht) !important; }
.waarschuwing.neutraal { background: none; border-color: var(--line); color: var(--mut); }
.detail-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; margin-top: 16px; }
.detail-foto { aspect-ratio: 4 / 5; background: var(--panel-2); border-radius: 12px; overflow: hidden; display: grid; place-items: center; }
.detail-foto img { width: 100%; height: 100%; object-fit: cover; }
.duimpjes { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.duimpjes button { width: 56px; height: 70px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: var(--panel-2); cursor: pointer; }
.duimpjes button.aan { border-color: var(--ac); }
.duimpjes img { width: 100%; height: 100%; object-fit: cover; }
.bron { overflow-wrap: anywhere; margin: 8px 0 0; }
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.gegevens dt { color: var(--mut); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding-top: 3px; }
.gegevens dd { margin: 0; word-break: break-word; }
.gegevens .kop { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ac); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.gegevens .kop:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tussenkop { margin-top: 22px; }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.checklist label {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--tx);
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.checklist label.aan { border-color: rgba(31, 209, 165, 0.5); background: var(--ac-zacht); }
.checklist input { width: 18px; height: 18px; accent-color: var(--ac); flex: none; }
.detail-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-acties .ruimte { flex: 1; }
.knop:disabled { filter: grayscale(1); opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* --- Product toevoegen --- */
.vol { grid-column: 1 / -1; }
.rij-knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rij-knoppen select { flex: 1; min-width: 200px; }
.foto-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.koppel td { padding: 8px; }
.koppel td:first-child { white-space: nowrap; font-weight: 500; }
.koppel .nodig::after { content: ' *'; color: var(--ac); }
.koppel select, .koppel input { padding: 7px 10px; font-size: 14px; }
/* Breed genoeg om de kolomnaam te lezen (op de telefoon is de keuzelijst al zo breed als het scherm) */
@media (min-width: 761px) { .koppel select { min-width: 280px; } }
.koppel input { margin-top: 6px; }
.koppel .voorbeeld { color: var(--mut); font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voorbeeld-tabel { border: 1px solid var(--line); border-radius: 10px; }
.voorbeeld-tabel th, .voorbeeld-tabel td {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 6px 10px;
}
#profielRij { margin-top: 12px; }
.koppel .hoe { white-space: nowrap; }
.herkomst { font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid; }
.herkomst.ok { color: var(--ac); background: var(--ac-zacht); border-color: rgba(31, 209, 165, 0.4); }
.herkomst.let-op { color: var(--matig); background: rgba(245, 165, 36, 0.12); border-color: rgba(245, 165, 36, 0.4); }
.herkomst.mist { color: var(--slecht); background: rgba(242, 84, 91, 0.1); border-color: rgba(242, 84, 91, 0.45); }
.overgeslagen { margin: 8px 0 0; padding-left: 20px; color: var(--mut); font-size: 13px; max-height: 220px; overflow: auto; }
input[type=file] { padding: 9px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10;
  background: var(--panel-2); border: 1px solid rgba(31, 209, 165, 0.45); box-shadow: var(--gloed);
  border-radius: 12px; padding: 10px 12px 10px 16px; display: flex; gap: 12px; align-items: center; font-size: 14px;
}

/* --- Werkruimte en rollen --- */
.werkruimte { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.werkruimte label { margin: 0 0 4px; font-size: 10.5px; letter-spacing: 2px; }
.werkruimte select { padding: 7px 10px; font-size: 14px; }
.ws-naam { font-weight: 600; }
.werkruimte .hint { margin-top: 4px; font-size: 12px; }
.rol-kijker .alleen-werken { display: none !important; }

/* --- Instellingen --- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tabs button {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--mut); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.tabs button:hover { color: var(--tx); }
.tabs button.aan { color: var(--tx); background: var(--ac-zacht); border-color: rgba(31, 209, 165, 0.5); }
.lijst-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 38px; gap: 10px; margin-bottom: 10px; }
#iTarieven, #iVasteKosten { margin: 12px 0; }
label.vink {
  display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 500; color: var(--tx); cursor: pointer;
}
label.vink input { width: 18px; height: 18px; accent-color: var(--ac); flex: none; }
.geheim-rij { display: flex; gap: 10px; align-items: center; }
.geheim-rij input { flex: 1; min-width: 0; }
.geheim-status { flex: none; font-size: 13px; color: var(--mut); white-space: nowrap; min-width: 92px; }
.geheim-status.ingevuld { color: var(--goed); font-weight: 600; }
.geheim-status.wis { color: var(--slecht); }
.stekker { padding: 12px 0; border-top: 1px solid var(--line); }
.stekker:first-child { border-top: 0; }
.stekker .vink { margin-top: 0; }
.opslaan-balk {
  position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid rgba(31, 209, 165, 0.35); border-radius: var(--rond); padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.opslaan-balk .melding { margin-top: 0; }

/* --- Kansen: advies, score en stippen --- */
.kans-uitleg { margin: -12px 0 14px; }
#kansFilter { margin-bottom: 16px; }
.advies-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.advies { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid; }
.advies.testen { color: var(--goed); background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.5); }
.advies.twijfel { color: var(--matig); background: rgba(245, 165, 36, 0.14); border-color: rgba(245, 165, 36, 0.5); }
.advies.onvolledig { color: var(--mut); background: transparent; border-color: var(--line); }
.advies.afvallen { color: var(--slecht); background: rgba(242, 84, 91, 0.12); border-color: rgba(242, 84, 91, 0.5); }
.stippen { display: flex; flex-wrap: wrap; gap: 4px; }
.stip { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line); display: block; }
.stip.k-groen { background: var(--goed); border-color: var(--goed); }
.stip.k-oranje { background: var(--matig); border-color: var(--matig); }
.stip.k-rood { background: var(--slecht); border-color: var(--slecht); }
.stip.k-leeg { background: transparent; }
.kans-reden { font-size: 13px; color: var(--tx); opacity: 0.85; line-height: 1.4; }
.advies-blok:not(:empty) { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); display: grid; gap: 8px; }
.advies-blok p { margin: 0; }
.advies-redenen { margin: 0; padding-left: 18px; font-size: 14px; color: var(--mut); }

/* --- Prijs: calculator en prijsadvies --- */
.prijs-advies:not(:empty) { margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(31, 209, 165, 0.45); border-radius: 12px; background: var(--bg); display: grid; gap: 6px; }
.prijs-advies h3, .prijs-advies p { margin: 0; }
.advies-prijs b { font-size: 26px; font-weight: 800; color: var(--ac); }
.advies-prijs-klein { color: var(--ac); }
.invoer-regel { margin-top: 2px; }
.advies-keuze { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.advies-keuze:first-of-type { border-top: 0; padding-top: 0; }
.advies-keuze > .knop, .advies-versie > .knop { justify-self: start; }
.advies-versie { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.advies-versie .advies-prijs b { font-size: 20px; }
.p-knop-vak { display: flex; align-items: flex-end; }
.p-knop-vak .knop { width: 100%; margin-top: 12px; }
.calc-tabel { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.calc-tabel th, .calc-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.calc-tabel thead th { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mut); }
.calc-tabel tbody th { font-weight: 500; color: var(--mut); }
.calc-tabel .calc-winst td { font-weight: 700; }
.calc-tabel .calc-roas td { font-weight: 600; color: var(--ac); }
.calc-tabel td .calc-som, .calc-tabel td .calc-info { font-size: 13px; font-weight: 400; color: var(--mut); margin-top: 2px; }
.calc-tabel td .calc-info { font-style: italic; }
.calc-tabel td .calc-kop { font-size: 12px; font-weight: 500; color: var(--mut); margin-bottom: 2px; }
.calc-tabel td { overflow-wrap: break-word; }
.dag-info { font-size: 12px; font-style: italic; color: var(--mut); margin-top: 2px; }
.oz-checks-vak { margin-top: 12px; }
.vergelijk td { font-size: 14px; white-space: nowrap; }
#pConcurrenten { margin: 8px 0; }

/* --- Onderzoek (detailscherm) --- */
.detail-tabs { margin: 14px 0 4px; }
h3 { font-weight: 600; font-size: 15px; margin: 0 0 8px; }
.oz-status { max-width: 360px; margin-top: 8px; }
.oz-beoordeling { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.oz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.oz-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.oz-check b { display: block; font-weight: 600; }
.oz-check span:not(.kleur-label) { color: var(--mut); }
.kleur-label {
  flex: none; display: inline-block; min-width: 128px; text-align: center; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid;
}
.kleur-label.k-groen { color: var(--goed); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.45); }
.kleur-label.k-oranje { color: var(--matig); background: rgba(245, 165, 36, 0.12); border-color: rgba(245, 165, 36, 0.45); }
.kleur-label.k-rood { color: var(--slecht); background: rgba(242, 84, 91, 0.12); border-color: rgba(242, 84, 91, 0.45); }
.kleur-label.k-leeg { color: var(--mut); background: transparent; border-color: var(--line); }
.vondst { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: var(--panel-2); }
.vondst-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vondst-uitslag:not(:empty) { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; }
.vondst-uitslag.k-groen { border-color: rgba(52, 211, 153, 0.45); }
.vondst-uitslag.k-oranje { border-color: rgba(245, 165, 36, 0.45); }
.vondst-uitslag.k-rood { border-color: rgba(242, 84, 91, 0.45); }
.vondst-uitslag-kop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vondst-uitslag ul { margin: 8px 0 0; padding-left: 18px; color: var(--mut); }
#detail .opslaan-balk { margin-top: 16px; }
.oz-groep { margin: 14px 0 8px; }
.oz-stop { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; color: #ffb0b4; background: rgba(242, 84, 91, 0.1); border: 1px solid rgba(242, 84, 91, 0.5); }
.oz-risico { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.oz-risico legend { padding: 0 6px; font-size: 14px; font-weight: 600; }
.oz-risico-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin-top: 6px; }
.oz-risico-lijst label.vink { margin: 6px 0; }
.oz-tips:not(:empty) { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--mut); }
.oz-tips li { margin-bottom: 6px; }
.oz-tips b { color: var(--matig); font-weight: 600; }
.waarschuw-tekst:not(:empty) { color: var(--matig); margin: 6px 0 0; }
#dNaarVeilig { margin-top: 10px; }
.zoek-knoppen { margin-top: 10px; }
.zoekwoorden:not(:empty) { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.zoekwoord-groep { margin-top: 8px; }
.zoekwoord-groep .chips { margin-top: 4px; padding-top: 0; }
.chip-knop {
  font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--ac-zacht); color: var(--tx); border: 1px solid rgba(31, 209, 165, 0.4);
}
.chip-knop:hover { border-color: var(--ac); }
.zoek-stappen { margin-top: 10px; font-size: 14px; color: var(--mut); }
.zoek-stappen summary { cursor: pointer; color: var(--ac); font-weight: 500; padding: 6px 0; }
.zoek-stappen ol { margin: 6px 0 0; padding-left: 20px; }
.zoek-stappen li { margin-bottom: 4px; }
#ozVondstErbij { margin-top: 4px; }

/* --- Te beoordelen (mail) --- */
.teller { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--ac); color: #06221c; font-size: 12px; font-weight: 700; text-align: center; }
.w-status { justify-content: space-between; }
.w-item { display: grid; gap: 8px; }
.w-kop { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.w-kop b { overflow-wrap: anywhere; }
.w-item .kleur-label { justify-self: start; }
.w-uitklap summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.w-lijst { margin: 10px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 8px; }
.w-lijst b { overflow-wrap: anywhere; }
.i-mail-knoppen { margin-top: 12px; }

/* --- Geld --- */
.geld-balk { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 14px; }
.geld-balk .tabs { margin-bottom: 0; }
.geld-periode { display: flex; align-items: center; gap: 10px; }
.geld-periode b { min-width: 0; }
.geld-schakelaar { margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.voorbeeld-band {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; text-align: center; font-weight: 800; letter-spacing: 0.5px;
  max-width: 100%; overflow-wrap: anywhere;
  background: rgba(242, 84, 91, 0.92); color: #fff;
}
#p-geld.is-voorbeeld .geld-tegel, #p-geld.is-voorbeeld .btw-blok { border-style: dashed; border-color: rgba(242, 84, 91, 0.6); }
.geld-sync { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.geld-waarschuwingen { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.geld-waarschuwingen li { padding: 10px 14px; border-radius: 10px; background: rgba(245, 165, 36, 0.1); border: 1px solid rgba(245, 165, 36, 0.45); color: #ffd28a; font-size: 14px; }
.geld-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.geld-tegel { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rond); background: var(--panel); }
.geld-label { font-size: 13px; color: var(--mut); font-weight: 500; }
.geld-waarde { font-size: 22px; font-weight: 600; color: var(--tx); font-variant-numeric: tabular-nums; }
.geld-winst { border-color: rgba(31, 209, 165, 0.45); }
.geld-teken { justify-self: start; min-width: 0; }
.geld-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; }
.btw-blok { border-color: rgba(31, 209, 165, 0.45); }
.geld-held { font-size: 48px; font-weight: 800; line-height: 1.1; color: var(--tx); font-variant-numeric: tabular-nums; margin: 4px 0 10px; }
.geld-tarieven { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.geld-aangifte { margin: 10px 0 0; font-weight: 600; }
#gReserveForm input { flex: 1 1 140px; }
#gDagKaart { margin-top: 18px; }
.dag-kop { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.dag-kop h2 { margin-bottom: 4px; }
.basis-label { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--tx); background: var(--bg); }
.basis-met { border-color: rgba(25, 184, 216, 0.6); }
.basis-zonder { border-color: rgba(31, 209, 165, 0.6); }
.dag-legenda { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--mut); }
.dag-tabel { font-size: 13.5px; }
.dag-tabel th, .dag-tabel td { white-space: nowrap; padding: 8px 6px; }
.dag-tabel td:first-child, .dag-tabel td:nth-child(2) { white-space: normal; }
.dag-waarde { min-width: 0; font-variant-numeric: tabular-nums; }

/* --- Lijsten (Fase 5) --- */
.lijst-balk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.lijst-balk input[type=search] { flex: 1 1 220px; }
.lijst-balk select { flex: 0 1 200px; }
.l-items { display: grid; gap: 14px; }
.l-kaart { display: grid; gap: 10px; margin-bottom: 0; }
.l-genegeerd { opacity: 0.75; border-style: dashed; }
.l-kop { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-weight: 600; font-size: 16px; }
.l-kop a { overflow-wrap: anywhere; }
.l-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 16px; margin: 0; font-size: 14px; }
.l-velden dt { color: var(--mut); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.l-velden dd { margin: 0 0 4px; overflow-wrap: anywhere; }
.l-notitie p { margin: 2px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.l-acties { margin-top: 2px; }
.l-zoeklink { justify-self: start; }
.l-titelknop { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ac); cursor: pointer; text-align: left; text-decoration: underline; min-height: 44px; }
.l-berekend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.l-berekend b { font-size: 18px; color: var(--ac); }
.l-voorstel { color: var(--ac); font-weight: 600; }
.l-formberekend { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.l-formberekend .l-groot { font-size: 22px; font-weight: 700; color: var(--ac); margin: 4px 0 0; }
.l-ladder { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.l-ladder .l-nu { border-color: var(--tx); color: var(--tx); }
.l-ladder .l-volgende { background: var(--ac-zacht); border-color: var(--ac); color: var(--ac); font-weight: 700; }
.l-label { display: block; color: var(--mut); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
#lKoppelVak .chips { margin-top: 8px; }
#lNegeerVak { margin-top: 12px; display: grid; gap: 8px; }
.l-knoppen { margin-top: 16px; }
.oz-gezien { margin-bottom: 8px; }
.oz-gezien-rij { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.oz-gezien-rij a { overflow-wrap: anywhere; }

/* --- Klantvragen (Fase 6) --- */
.teller.rood { background: var(--slecht); color: #fff; }
.kv-filter { margin-bottom: 0; }
.kv-lijst { display: grid; gap: 12px; }
.kv-kaart { display: grid; gap: 6px; width: 100%; margin: 0; text-align: left; font: inherit; color: var(--tx); cursor: pointer; border-left-width: 4px; }
.kv-kaart:hover { border-color: rgba(31, 209, 165, 0.5); }
.kv-kaart.kv-rood { border-left-color: var(--slecht); }
.kv-kaart.kv-oranje { border-left-color: var(--matig); }
.kv-kaart.kv-groen { border-left-color: var(--goed); }
.kv-kop { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.kv-onderwerp { font-size: 16px; overflow-wrap: anywhere; }
.kv-kaart .hint { overflow-wrap: anywhere; }
.kv-voorproefje { font-size: 14px; color: var(--mut); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.kv-status { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--mut); }
.kv-st-nieuw { color: var(--ac); border-color: rgba(31, 209, 165, 0.5); }
.kv-st-opgelost { color: var(--goed); }
.kv-termijn { font-size: 14px; font-weight: 600; }
.kv-termijn.k-groen { color: var(--goed); }
.kv-termijn.k-oranje { color: var(--matig); }
.kv-termijn.k-rood { color: var(--slecht); }
#kvDetail { display: grid; gap: 14px; }
#kvDetail > .knop { justify-self: start; }
.kv-detail-kop, .kv-acties { display: grid; gap: 8px; margin-bottom: 0; }
.kv-detail-kop h2 { margin: 0; overflow-wrap: anywhere; }
.kv-detail-kop .hint { overflow-wrap: anywhere; }
.kv-rij { display: grid; gap: 6px; }
.kv-rij.rij-knoppen { display: flex; }
.kv-rij input { flex: 1 1 140px; max-width: 220px; }
.kv-keuze { margin: 0; }
.kv-bestelling { overflow-wrap: anywhere; }
.kv-berichten { display: grid; gap: 12px; }
.kv-bericht { display: grid; gap: 8px; margin-bottom: 0; }
.kv-tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.kv-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-fotos a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.kv-fotos img { display: block; width: 120px; height: 120px; object-fit: cover; }
.kv-overgeslagen { margin: 0; padding-left: 18px; }
#kvDetail > .knop.gevaar { justify-self: start; }
.kv-privacy { margin-top: 18px; }
.kv-uit { border-color: rgba(31, 209, 165, 0.45); background: var(--ac-zacht); margin-left: 24px; }
.kv-antwoord { display: grid; gap: 10px; margin-bottom: 0; }
.kv-antwoord h2 { margin: 0; overflow-wrap: anywhere; }
.kv-antwoord select { flex: 1 1 220px; max-width: 360px; }
.kv-antwoord textarea { width: 100%; font: inherit; font-size: 15px; line-height: 1.5; }
.kv-aftellen { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px; border-radius: 10px; border: 1px solid var(--matig); color: var(--matig); }
.i-sjabloon { margin-top: 14px; }
.i-sjabloon .rij-knoppen { justify-content: space-between; }
.i-sjabloon label { margin: 0; }
.i-sjabloon textarea { width: 100%; margin-top: 6px; }
@media (max-width: 700px) { .kv-uit { margin-left: 10px; } }
#kvTabs { margin-bottom: 16px; }
.kv-register { border-top: 1px solid var(--line); padding-top: 10px; }
.kv-register .knop { justify-self: start; }
.kr-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kr-tegel { display: grid; gap: 4px; margin-bottom: 0; }
.kr-tegel b { font-size: 26px; color: var(--ac); }
.kr-tegel.kr-rood b { color: var(--slecht); }
.kr-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kr-top { margin-bottom: 0; }
.kr-top ol { margin: 8px 0 0; padding-left: 20px; font-size: 14px; display: grid; gap: 4px; overflow-wrap: anywhere; }
#krDetail { display: grid; gap: 14px; }
#krDetail > .knop { justify-self: start; }
.kr-form { display: grid; gap: 10px; margin-bottom: 0; }
.kr-form h2 { margin: 0; }
.kr-form textarea { width: 100%; }
.waarschuwing.klachten { color: var(--matig); }
#kvTabPakketten.pk-alarm { color: var(--slecht); border-color: rgba(242, 84, 91, 0.5); }
.pk-groep { margin-bottom: 14px; }
.pk-groep > summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: 8px 0; min-height: 44px; }
.pk-groep > .pk-kaart { margin-bottom: 12px; }
.pk-kaart { cursor: default; }
.pk-kaart .hint { overflow-wrap: anywhere; }
.pk-tekst { display: grid; gap: 8px; }
.pk-tekst textarea { width: 100%; font: inherit; font-size: 15px; }
.pk-tekst .knop { justify-self: start; }
.d-levertijd { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.d-levertijd input { width: 9em; max-width: 100%; }
.d-levertijd .hint { flex-basis: 100%; }
/* Retouren (onderdeel 5) */
.rt-regels { margin-bottom: 14px; }
.rt-regels h2 { margin-top: 0; }
.rt-regels ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.rt-knop-herinnering { margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--matig); color: var(--matig); font-size: 14px; }
.rt-formulier { display: grid; gap: 10px; }
.rt-formulier h2 { margin: 0; }
.rt-modeltekst { font-size: 14px; }
#rtDetail { display: grid; gap: 14px; }
#rtDetail > .knop { justify-self: start; }
.rt-form { display: grid; gap: 12px; margin-bottom: 0; }
.rt-form h2 { margin: 0; }
.rt-stap { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.rt-stap .hint { margin: 0; }
.rt-stap input[type=date] { max-width: 12em; }
.rt-stap .rij-knoppen input:not([type=date]) { flex: 1 1 160px; }
.rt-stap textarea { width: 100%; }
/* Teksten maken */
.t-info { display: grid; gap: 4px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.t-info .hint { overflow-wrap: anywhere; }
#tTekst { width: 100%; font: inherit; font-size: 16px; }
#tUitslag { display: grid; gap: 10px; margin-top: 12px; }
.t-uitkomst { margin-bottom: 0; display: grid; gap: 6px; }
.t-uitkomst .kleur-label { justify-self: start; font-size: 15px; }
.t-checks { display: grid; gap: 8px; }
.t-check { padding: 8px 0; border-top: 1px solid var(--line); }
.t-check ul { margin: 6px 0 0; padding-left: 20px; font-size: 14px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.k-tekst-rood { color: var(--slecht); }
.k-tekst-oranje { color: var(--matig); }
.t-bewaard { border-top: 1px solid var(--line); padding: 8px 0; }
.t-bewaard summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.t-bewaard pre { margin: 8px 0; }
/* Meldingen (onderdeel 6) */
.m-let-op p { margin: 0 0 8px; }
.m-lijst { display: grid; gap: 10px; margin-bottom: 14px; }
.m-kaart { display: grid; gap: 6px; margin-bottom: 0; }
.m-kaart.m-nieuw { border-left: 4px solid var(--ac); }
.m-soorten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.m-soort { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; margin: 0; display: grid; gap: 6px; }
.m-soort legend { font-weight: 600; padding: 0 6px; }
.m-vinkjes { display: grid; gap: 2px; }
.m-tijd { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.m-tijd label { margin: 0; }
.m-tijd input { width: 8.5em; }
.mobiel-bel { display: none; }
@media (max-width: 760px) {
  .mobiel-bel:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 10px;
    border-radius: 10px; border: 1px solid var(--ac); background: var(--ac-zacht); color: var(--tx); font: inherit; font-weight: 700; cursor: pointer; }
}
.print-alleen { display: none; }
@media print {
  body.print-modelformulier > *:not(#rtPrint) { display: none !important; }
  body.print-modelformulier #rtPrint { display: block; color: #000; background: #fff; }
  body.print-modelformulier #rtPrint pre { white-space: pre-wrap; font-family: Arial, sans-serif; font-size: 12pt; line-height: 1.6; }
  body.print-modelformulier { background: #fff; }
}

/* --- Inlogpagina --- */
.inlog-pagina { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.inlog { width: 100%; max-width: 400px; }
.inlog .logo { text-align: center; margin-bottom: 22px; }
.inlog .logo img { width: 120px; height: 120px; filter: drop-shadow(0 0 24px rgba(31, 209, 165, 0.25)); }
.inlog .logo .merk-naam { font-size: 30px; margin-top: 6px; }
.inlog .logo .tagline { justify-content: center; margin-top: 6px; }
.inlog .kaart { padding: 24px; box-shadow: var(--gloed); }

/* Alleen op een telefoon: balk bovenin met menuknop (op een groot scherm verborgen) */
.mobiel-balk, .menu-achtergrond, .menu-sluit { display: none; }
img { max-width: 100%; }

/* --- Telefoon / smal scherm --- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .app { display: block; }
  .app > *, .zijbalk > * { min-width: 0; }

  /* Balk bovenin */
  .mobiel-balk {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 20;
    padding: 8px 16px; min-height: 60px; background: rgba(11, 18, 32, 0.96); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
  }
  .menu-knop {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; flex: none;
    border-radius: 10px; border: 1px solid rgba(31, 209, 165, 0.5); background: var(--ac-zacht);
    color: var(--tx); font: inherit; font-weight: 600; cursor: pointer;
  }
  .streepjes { display: grid; gap: 4px; width: 18px; }
  .streepjes i { display: block; height: 2px; border-radius: 2px; background: var(--ac); }
  .mobiel-balk .merk { flex: none; }
  .mobiel-balk .merk img { width: 32px; height: 32px; }
  .mobiel-balk .merk-naam { display: none; } /* weinig ruimte: alleen het logo, met de naam van de winkel ernaast */
  .mobiel-ws { min-width: 0; font-size: 15px; font-weight: 600; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Het menu schuift van links in beeld */
  .zijbalk {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(310px, 86vw); height: 100%;
    overflow-y: auto; padding: 18px 16px 24px; gap: 16px; background: var(--panel);
    border-right: 1px solid var(--line); box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
    transform: translateX(-105%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s;
  }
  body.menu-open .zijbalk { transform: none; visibility: visible; }
  body.menu-open { overflow: hidden; }
  .menu-achtergrond { position: fixed; inset: 0; z-index: 25; background: rgba(5, 9, 18, 0.65); }
  body.menu-open .menu-achtergrond { display: block; }
  .menu-sluit { display: block; position: absolute; top: 14px; right: 14px; }
  .menu button { min-height: 48px; font-size: 16px; }
  .wie { margin-top: auto; }
  .wie .knoppen { flex-wrap: wrap; }
  .wie span { overflow-wrap: anywhere; }

  /* Inhoud */
  .inhoud { padding: 20px 16px 48px; }
  h1 { font-size: 25px; }
  .kaart { padding: 16px; }
  label { font-size: 12.5px; }
  .raster { grid-template-columns: 1fr; }
  .hint, .intro, .melding { overflow-wrap: anywhere; }

  /* Groot genoeg voor een vinger, en 16 px tekst zodat de telefoon niet inzoomt */
  .app :is(input, select, textarea), .inlog :is(input, select, textarea), dialog :is(input, select, textarea) {
    font-size: 16px; min-height: 48px; padding: 10px 12px;
  }
  .app :is(input[type=checkbox]), dialog :is(input[type=checkbox]) { min-height: 0; width: 22px; height: 22px; padding: 0; }
  .app .knop, .inlog .knop, dialog .knop { min-height: 48px; }
  .app .knop.klein, dialog .knop.klein { min-height: 44px; padding: 8px 14px; font-size: 14px; }
  .sluit { width: 44px; height: 44px; }
  .tabs { gap: 8px; }
  .tabs button { min-height: 44px; padding: 8px 14px; }
  label.vink { min-height: 44px; }
  .rij-knoppen > * { flex: 1 1 auto; }
  .rij-knoppen select { min-width: 0; }

  /* Productkaarten onder elkaar: foto links, gegevens rechts */
  .kaarten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pkaart { flex-direction: row; }
  .pkaart:hover, .pkaart:focus-visible { transform: none; }
  .pkaart .foto { width: 112px; flex: none; aspect-ratio: auto; min-height: 140px; }
  .pkaart .info { min-width: 0; padding: 12px; }
  .pkaart .titel { overflow-wrap: anywhere; }
  .pkaart .demo-band { width: 112px; top: 0; font-size: 9.5px; letter-spacing: 0.5px; padding: 4px; }

  /* Detailscherm vult het hele scherm */
  dialog { inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; padding: 0 16px 16px; border: 0; border-radius: 0; }
  /* De kop met de sluitknop blijft bovenaan staan als je naar beneden scrolt */
  .detail-kop { position: sticky; top: 0; z-index: 3; background: var(--panel); padding: 14px 0 10px; border-bottom: 1px solid var(--line); }
  .detail-kop h2 { font-size: 20px; overflow-wrap: anywhere; }
  .detail-raster, .checklist, .foto-rij { grid-template-columns: minmax(0, 1fr); }
  .detail-foto { aspect-ratio: 4 / 3; }
  .gegevens { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gegevens dd { margin-bottom: 8px; overflow-wrap: anywhere; }
  .checklist label { min-height: 48px; }
  .detail-acties { flex-direction: column; align-items: stretch; }
  .detail-acties .ruimte { display: none; }
  .detail-acties .hint { text-align: center; }
  .duimpjes button { width: 56px; height: 70px; }

  /* Tabellen worden kaartjes: elke regel een blokje, met de kolomnaam ervoor */
  .lijst.stapel thead { display: none; }
  .lijst.stapel, .lijst.stapel tbody, .lijst.stapel tr, .lijst.stapel td { display: block; width: 100%; }
  .lijst.stapel tr { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; background: var(--bg); }
  /* Label links (zwevend), de inhoud rechts ernaast: zo blijft tekst in één cel bij elkaar */
  .lijst.stapel td { border: 0; padding: 7px 0; text-align: right; overflow-wrap: anywhere; min-width: 0; display: flow-root; }
  .lijst.stapel td[data-label]:not([data-label=""])::before {
    content: attr(data-label); float: left; max-width: 45%; margin-right: 12px; padding-top: 3px; text-align: left;
    color: var(--mut); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  }
  .lijst.stapel td > select { width: 60%; }
  .lijst.stapel td.acties { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .lijst.stapel td.acties .knop { margin-left: 0; }
  .lijst.stapel td.leeg { display: block; text-align: center; }
  .lijst.stapel tr:last-child td { border-bottom: 0; }

  /* Kolommen koppelen: per veld een blokje met de keuzelijst over de hele breedte */
  .koppel.stapel td { display: block; text-align: left; }
  .koppel.stapel td[data-label]:not([data-label=""])::before { display: block; float: none; max-width: none; margin: 0 0 4px; }
  .koppel.stapel td > select { width: 100%; }
  .koppel.stapel td:first-child { white-space: normal; font-weight: 600; font-size: 16px; }
  .koppel.stapel td:first-child::before { content: none !important; }
  .koppel .voorbeeld { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .koppel.stapel td.voorbeeld:empty, .koppel.stapel td.hoe:empty { display: none; }
  .koppel .hoe { white-space: normal; }

  /* Lijsten in Instellingen */
  .lijst-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .geheim-rij { flex-wrap: wrap; }
  .geheim-status { min-width: 0; width: 100%; }
  .opslaan-balk { bottom: 8px; padding: 8px; gap: 6px; }
  .opslaan-balk .knop { width: 100%; }
  .opslaan-balk .melding:empty { display: none; }

  /* Score */
  .uitslag { gap: 16px; }
  .prijs { font-size: 16px; }

  .toast { left: 16px; right: 16px; transform: none; bottom: 16px; flex-wrap: wrap; }
  .chip-knop { min-height: 44px; font-size: 15px; padding: 8px 14px; }
  .oz-risico-lijst { grid-template-columns: minmax(0, 1fr); }
  .w-uitklap summary { min-height: 44px; display: flex; align-items: center; }
  .geld-raster { grid-template-columns: minmax(0, 1fr); }
  .geld-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .geld-tegel { padding: 12px; }
  .geld-waarde { font-size: 19px; }
  .geld-held { font-size: 40px; }
  .geld-schakelaar { min-height: 44px; }
  .dag-tabel th, .dag-tabel td { white-space: normal; }
  .lijst.stapel.dag-tabel tr { margin-bottom: 12px; }
  .w-item .kleur-label { white-space: normal; }
  /* Calculator op een telefoon: elke regel onder elkaar, de twee kolommen naast elkaar */
  .calc-tabel { font-size: 14px; }
  .calc-tabel th, .calc-tabel td { padding: 7px 6px; }
  .calc-tabel thead th:first-child { width: 34%; }
  .vergelijk td { white-space: normal; }
  .zoek-stappen summary { min-height: 44px; display: flex; align-items: center; }
  .app a.knop, dialog a.knop { min-height: 44px; }
  pre.opdracht { overflow-wrap: anywhere; }
}

/* --- Openingsscherm (public/opening.js): logo-animatie van ongeveer 3,3 seconde ---
   Tijdlijn:
     0,0 - 1,4 s  lichtdeeltjes zweven van de randen naar het logo; de gloed komt op en ademt daarna rustig (1,3 s per adem)
     0,2 - 1,2 s  het logo komt in beeld
     0,65 - 2,2 s printplaatbanen tekenen zich rond het logo en eindigen in lichtpuntjes
     1,1 - 2,2 s  de naam verschijnt letter voor letter, daarna AI Product Hunter
     1,55 - 2,45 s één zachte glans glijdt over het logo
     2,5 - 3,35 s een lichtring dijt uit; logo en tekst vervagen (2,6 s) en het scherm opent naar de app (2,85 - 3,35 s)
   Alleen transform en opacity bewegen (de telefoon doet dat zonder haperen; de test controleert dat).
   Geen knipperen: elk effect gebeurt één keer of ademt langzaam. Klikken gaan er dwars doorheen. */
.opening {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #10233a 0%, var(--bg) 62%);
  pointer-events: none;
  animation: opening-weg 0.5s ease-in-out 2.85s forwards;
}
.opening-midden { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.opening-beeld { position: relative; width: 132px; height: 132px; }
.opening-kern, .opening-tekst { animation: opening-inhoud-weg 0.45s ease-in 2.6s forwards; }
.opening-kern { position: absolute; inset: 0; }
.opening-tekst { text-align: center; }

/* Lichtdeeltjes: elk in een vaste richting (--hoek). Het vak <b> is precies de afstand lang; het puntje zit aan het
   buiteneinde en schuift met het hele vak naar het logo (translateX -100%). Zo staan er geen variabelen in de beweging zelf,
   en kan de telefoon die aan de grafische chip overlaten. */
.opening-deeltjes { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.opening-deeltje { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--hoek)); }
.opening-deeltje b {
  position: absolute; left: 74px; top: 0; width: var(--afstand); height: 0;
  animation: opening-deeltje 1.1s cubic-bezier(0.3, 0.1, 0.3, 1) var(--wacht) both;
}
.opening-deeltje b::after {
  content: ''; position: absolute; right: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ac); box-shadow: 0 0 8px 2px rgba(31, 209, 165, 0.6);
  animation: opening-deeltje-licht 1.1s linear var(--wacht) both;
}
.opening-deeltje:nth-child(even) b::after { background: var(--ac-2); box-shadow: 0 0 8px 2px rgba(25, 184, 216, 0.6); }

/* Gloed achter het logo: komt op en ademt daarna rustig mee */
.opening-gloed {
  position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 209, 165, 0.42) 0%, rgba(25, 184, 216, 0.16) 42%, transparent 68%);
  animation: opening-gloed-in 0.9s ease-out 0.15s both, opening-adem 1.3s ease-in-out 1.05s infinite alternate;
}

/* Printplaatbanen: recht stuk (1), knik (2) en een lichtpuntje aan het eind */
.opening-baan { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--hoek)); }
.opening-baan-1, .opening-baan-2 {
  position: absolute; top: -1px; height: 2px; border-radius: 1px; transform-origin: 0 50%;
  background: var(--ac); box-shadow: 0 0 6px rgba(31, 209, 165, 0.7);
}
.opening-baan-1 {
  left: 70px; width: 34px; background: linear-gradient(90deg, rgba(31, 209, 165, 0.1), var(--ac));
  animation: opening-baan-1 0.28s ease-out var(--wacht) both;
}
.opening-baan-knik { position: absolute; left: 104px; top: 0; width: 0; height: 0; transform: rotate(var(--knik)); }
.opening-baan-2 { left: 0; width: 26px; animation: opening-baan-2 0.24s ease-out calc(var(--wacht) + 280ms) both; }
.opening-baan-punt {
  position: absolute; left: 22.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%;
  background: #dffcf4; box-shadow: 0 0 0 2px var(--ac), 0 0 10px 3px rgba(31, 209, 165, 0.7);
  animation: opening-baan-punt 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--wacht) + 500ms) both;
}
.opening-baan:nth-child(odd) .opening-baan-2 { background: var(--ac-2); box-shadow: 0 0 6px rgba(25, 184, 216, 0.7); }
.opening-baan:nth-child(odd) .opening-baan-punt { box-shadow: 0 0 0 2px var(--ac-2), 0 0 10px 3px rgba(25, 184, 216, 0.7); }

.opening-logo { position: relative; display: block; width: 100%; height: 100%; animation: opening-logo 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }

/* Eén glans over het logo: een lichte band die alleen op het logo zelf te zien is (het logo is ook het masker) */
.opening-glans {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url(/icon-256.png) center / contain no-repeat; mask: url(/icon-256.png) center / contain no-repeat;
}
.opening-glans::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  animation: opening-glans 0.9s ease-in-out 1.55s both;
}

/* Lichtring aan het eind: dijt uit terwijl het scherm opengaat */
.opening-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(31, 209, 165, 0.55);
  box-shadow: 0 0 30px rgba(31, 209, 165, 0.35), inset 0 0 30px rgba(25, 184, 216, 0.25);
  animation: opening-ring 0.9s cubic-bezier(0.2, 0.6, 0.3, 1) 2.5s both;
}

/* De naam letter voor letter (de kleuren van "Sales" zet opening.js) */
.opening .merk-naam { font-size: 28px; }
.opening .merk-naam .opening-letter {
  display: inline-block; color: var(--tx); background: none; -webkit-background-clip: border-box; background-clip: border-box;
  animation: opening-letter 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) var(--wacht) both;
}
.opening .tagline { justify-content: center; margin-top: 8px; animation: opening-tekst 0.7s ease-out 1.75s both; }

@keyframes opening-deeltje { 0% { transform: translateX(0); } 85%, 100% { transform: translateX(-100%); } }
@keyframes opening-deeltje-licht {
  0% { opacity: 0; transform: scale(0.6); }
  25% { opacity: 1; }
  85% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3); }
}
@keyframes opening-gloed-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 0.85; transform: scale(1); } }
@keyframes opening-adem { from { opacity: 0.85; transform: scale(1); } to { opacity: 1; transform: scale(1.12); } }
@keyframes opening-baan-1 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes opening-baan-2 { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes opening-baan-punt { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes opening-logo { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes opening-glans { from { transform: translateX(-120%); } to { transform: translateX(330%); } }
@keyframes opening-ring {
  0% { opacity: 0; transform: scale(0.6); }
  20% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(7); }
}
@keyframes opening-letter { from { opacity: 0; transform: translateY(10px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes opening-tekst { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes opening-inhoud-weg { to { opacity: 0; transform: scale(1.05); } }
@keyframes opening-weg { to { opacity: 0; visibility: hidden; } }

/* Minder beweging gewenst: alleen kort het stilstaande logo, zonder animatie */
@media (prefers-reduced-motion: reduce) {
  .opening { animation: opening-weg 0.01s linear 0.6s forwards; }
  .opening-kern, .opening-tekst, .opening-logo, .opening-gloed, .opening .merk-naam .opening-letter, .opening .tagline { animation: none; }
  .opening-deeltjes, .opening-baan, .opening-glans, .opening-ring { display: none; }
  .opening-gloed { opacity: 0.5; }
}