/*
 * Kleuren, letter en maten komen uit /huisstijl.css (server/stijl.js): de look
 * van de gemeenschap, met zand als accent. Hier worden alleen vormen gezet.
 *
 * Twee lijnen, zoals in de gemeenschap:
 *   var(--kader)  zwak, voor scheidingen tussen blokken
 *   var(--rand)   sterker, voor alles waar je op klikt of in typt
 *
 * Telefoon eerst. De brede schermen staan onderaan.
 */

[hidden] { display: none !important; }
.teken { display: inline-block; vertical-align: -0.18em; flex: none; }
.met { display: inline-flex; align-items: center; gap: 6px; }
.groei { flex: 1; min-width: 0; }
.scheider { display: inline-block; width: 1px; height: 11px; background: var(--rand); margin: 0 8px; vertical-align: -1px; }
.dim { opacity: .25; }

/* ── de balk bovenaan en onderaan ── */
.balk {
  position: sticky; top: 0; z-index: 30; background: var(--wit);
  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom: var(--dikte) var(--lijnsoort) var(--kader);
}
.merk { font-size: 16px; font-weight: 600; color: var(--zwart); text-decoration: none; margin-right: auto; }
.bovenmenu { display: none; }
.raam { display: block; max-width: 1080px; margin: 0 auto; padding: 22px 16px 110px; }
.raam.smal { max-width: 420px; padding-top: 56px; }
.voet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--wit); display: flex;
  border-top: var(--dikte) var(--lijnsoort) var(--kader); padding-bottom: env(safe-area-inset-bottom);
}
.voet a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 10px;
  font-size: 11px; color: var(--grijs-stil); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.voetteken { display: block; color: var(--grijs-cijfer); line-height: 0; }
.voet a { position: relative; }
.voet .teller { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }
.voet a[aria-current=page], .bovenlink[aria-current=page] { color: var(--tekst); font-weight: var(--vet); }
.voet a[aria-current=page] .voetteken { color: var(--structuur); }
.teller { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: var(--rond);
  background: var(--accent); border: 1px solid var(--accentlijn); color: var(--tekst); font-size: 10px; line-height: 16px; text-align: center; font-weight: var(--vet); }

/* ── koppen ── */
.schermkop { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 18px; }
.schermkop p { margin: 0; max-width: 62ch; }
.kopknoppen { margin: 0; }
.kopje { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 34px 0 12px; }
.kopje h2 { flex: 1; min-width: 0; }
.terug { display: inline-flex; align-items: center; gap: 6px; font-size: var(--klein); color: var(--grijs-stil); text-decoration: none; margin: 0 0 14px; }
.terug:hover { color: var(--tekst); }
.leegte { color: var(--grijs-stil); margin: 0 0 12px; }
.melding { display: flex; align-items: center; gap: 10px; background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--rand);
  border-radius: var(--bol); padding: 12px 16px; margin: 0 0 16px; text-decoration: none; font-weight: var(--vet); }
.melding.stil { font-weight: 400; background: var(--wit); }

/* ── knoppen ── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit;
  font-size: var(--gewoon); font-weight: var(--vet); letter-spacing: var(--tracking);
  border: var(--dikte) solid var(--knop-rand); background: var(--knop); color: var(--knop-tekst);
  padding: var(--knop-py) var(--knop-px); cursor: pointer; border-radius: var(--pil); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: transform .1s, background .12s; white-space: nowrap;
}
.knop:hover { background: var(--knop-op); }
.knop:active { transform: scale(.97); }
.knop.stil { background: var(--wit); color: var(--tekst); border-color: var(--rand); font-weight: 400; }
.knop.stil:hover { background: var(--vlak); }
.knop.aan { background: var(--accent); color: var(--tekst); border-color: var(--accentlijn); }
.knop.klein { font-size: var(--klein); padding: calc(var(--knop-py) * .6) calc(var(--knop-px) * .7); }
.knop.groot { width: 100%; padding: calc(var(--knop-py) + 4px) var(--knop-px); }
.kaal { border: 0; background: transparent; color: var(--grijs-stil); font: inherit; font-size: var(--klein); padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kaal:hover { color: var(--tekst); }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 8px; }

/* ── kaarten en blokken ── */
.kaart { display: block; background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol);
  padding: 16px; margin: 0 0 14px; text-decoration: none; color: inherit; }
a.kaart:hover { border-color: var(--accentlijn); }
.kaartkop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.kaartkop h2, .kaartkop h3 { min-width: 0; overflow-wrap: anywhere; }
.merker { font-size: var(--klein); color: var(--grijs-stil); white-space: nowrap; }
.pandkaart p { margin: 0 0 10px; }
.band { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 16px; }
.band p { margin: 0; }
.band h3 { margin: 0 0 6px; }
.merkje { display: inline-block; font-size: var(--klein); background: var(--accent); border: 1px solid var(--accentlijn);
  padding: 1px 9px; border-radius: var(--rond); font-weight: var(--vet); margin: 2px 0 6px; align-self: flex-start; }

/* ── cijfers ── */
.cijferrij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.telblok { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol);
  padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; }
.pandkaart .telblok { background: var(--grond); }
.telblok b { font-size: 15px; line-height: 1.3; margin: 2px 0; white-space: nowrap; }
.budget { margin: 6px 0 4px; }
.budgetregel { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.balkje { height: 6px; background: var(--vlak); border-radius: var(--rond); overflow: hidden; border: 1px solid var(--rand); }
.balkje > i { display: block; height: 100%; background: var(--accentlijn); }
.balkje.dun { display: block; height: 4px; border: 0; margin: 6px 0 0; max-width: 320px; }
.balkje.over > i { background: var(--zwart); }

/* ── voortgang: één rustige balk ── */
.voortgang { display: flex; align-items: center; gap: 12px; margin: 8px 0 10px; }
.voortgang .balkje { flex: 1; }

/* ── tabbladen van een pand ── */
.tabs { display: flex; gap: 4px; border-bottom: var(--dikte) var(--lijnsoort) var(--rand); margin: 18px 0 18px; overflow-x: auto; }
.tabs a { padding: 9px 14px; text-decoration: none; color: var(--grijs-stil); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-current=page] { color: var(--tekst); font-weight: var(--vet); border-bottom-color: var(--accentlijn); }

/* ── een pand: grote stappen met hun categorieën ── */
.fase { margin: 0 0 26px; }
.fasekop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.categorierij { gap: 16px; }
.categorienaam { font-weight: var(--vet); display: flex; align-items: center; gap: 8px; }
.isklaar .categorienaam { color: var(--grijs-stil); }
.vinkje { font-size: var(--klein); color: var(--structuur); }
.samenvatting { text-align: right; color: var(--structuur); }
.samenvatting b { color: var(--tekst); font-size: var(--gewoon); }
.pijl { color: var(--grijs-cijfer); font-size: 20px; line-height: 1; }
a.categorierij:hover .categorienaam { text-decoration: underline; }

.standkiezer { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.standknop { font: inherit; font-size: var(--klein); padding: 7px 12px; border: 1px solid var(--rand); border-radius: var(--pil);
  cursor: pointer; color: var(--grijs-stil); background: var(--wit); }
.standknop[aria-pressed=true] { color: var(--tekst); border-color: var(--accentlijn); background: var(--accent); font-weight: var(--vet); }
.standknop:hover { color: var(--tekst); }
.stand { display: inline-block; font-size: var(--klein); padding: 1px 9px; border-radius: var(--rond); border: 1px solid var(--rand);
  white-space: nowrap; color: var(--structuur); background: var(--wit); }
.stand.aan { background: var(--accent); border-color: var(--accentlijn); color: var(--tekst); }

/* ── budget en indeling ── */
.budgetcat { border-bottom: var(--dikte) var(--lijnsoort) var(--kader); }
.budgetcat:last-child { border-bottom: 0; }
.budgetcat > summary { list-style: none; border-bottom: 0 !important; }
.budgetcat > summary::-webkit-details-marker { display: none; }
.budgetcat[open] > summary .categorienaam { text-decoration: underline; text-underline-offset: 3px; }
.budgetbinnen { padding: 0 0 18px; }
.budgetbinnen .knoppen { margin: 0 0 12px; }
.budgetbinnen .lijst { background: var(--grond); }
.budgetrij { width: 100%; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: var(--dikte) var(--lijnsoort) var(--kader);
  text-align: left; cursor: pointer; }
.budgetrij:last-child { border-bottom: 0; }
.budgetrij:hover .categorienaam { text-decoration: underline; }
.verschil { white-space: nowrap; color: var(--structuur); }
.verschil.boven { font-weight: var(--vet); color: var(--tekst); }
.indelingkop { align-items: center; }
.schuif { width: 30px; height: 30px; border: 1px solid var(--rand); background: var(--wit); border-radius: var(--bolletje);
  cursor: pointer; color: var(--structuur); font: inherit; padding: 0; flex: none; }
.schuif:hover { border-color: var(--accentlijn); }

/* ── de rekensom van het budget ── */
.rekensom { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 4px 14px; margin: 0 0 12px; }
.somregel { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: var(--dikte) var(--lijnsoort) var(--kader);
  width: 100%; font: inherit; color: inherit; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; text-decoration: none; }
.somregel.klikbaar { cursor: pointer; }
.somregel.klikbaar:hover > span:first-child { text-decoration: underline; }
.somregel.totaal { border-bottom: 0; border-top: 2px solid var(--accentlijn); font-weight: var(--vet); }
.somregel.totaal b { font-size: 15px; }
@media (max-width: 699px) {
  .somregel { flex-wrap: wrap; }
  .somregel > span:first-child { flex: 1; }
  .somregel > .groei { order: 3; flex-basis: 100%; margin-top: -4px; }
}

/* ── planning: een tijdlijn per maand ── */
.tijdlijn { display: grid; min-width: max-content; font-size: var(--klein); }
.tlkop { padding: 8px 4px; border-bottom: var(--dikte) var(--lijnsoort) var(--kader); white-space: nowrap; }
.tlnaam { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 10px; border: 0; background: var(--wit);
  border-bottom: var(--dikte) var(--lijnsoort) var(--kader); font: inherit; text-align: left; cursor: pointer; position: sticky; left: 0; z-index: 1; }
.tlnaam:hover b { text-decoration: underline; }
.tlrij { position: relative; border-bottom: var(--dikte) var(--lijnsoort) var(--kader); min-height: 44px; }
.tlbalk { position: absolute; top: 50%; height: 14px; margin-top: -7px; background: var(--accent); border: 1px solid var(--accentlijn); border-radius: var(--rond); }
.tlbalk.klaar { background: var(--accentlijn); }

.docrij { align-items: flex-start; }
.docrij .bestanden { margin: 0; justify-content: flex-end; }
.pandkiezer { margin: 0 0 14px; }
.bovenlink.instellinglink { margin-left: 4px; }
.schijfrij input[type=date] { padding: 8px 10px; font-size: var(--klein); }
@media (min-width: 700px) { .postrij.schijfrij { grid-template-columns: 1.3fr 110px 150px 24px; } }

/* ── alle offertes ── */
.offerteblok { margin: 0 0 16px; }
.offertebloktitel { display: flex; align-items: baseline; gap: 12px; text-decoration: none; padding: 0 2px 6px; }
.offertebloktitel:hover b { text-decoration: underline; }
.offerterij { width: 100%; font: inherit; color: inherit; background: transparent; border: 0;
  border-bottom: var(--dikte) var(--lijnsoort) var(--kader); text-align: left; cursor: pointer; }
.offerterij:last-child { border-bottom: 0; }
.offerterij:hover b { text-decoration: underline; }
.offerterij.afgewezen { opacity: .5; }
.offerterij.wacht b { font-weight: 400; }
.groepkop { padding: 10px 0 0; }
.rijnotitie { color: var(--structuur); margin-top: 3px; }
.richt { font-size: var(--klein); color: var(--structuur); white-space: nowrap; }
.taaknieuw { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 8px 0 0; }
.taaknieuw input { padding: 9px 12px; font-size: var(--klein); }
.taakrij.isklaar .taaktekst { text-decoration: line-through; color: var(--grijs-stil); }
.telaat { color: var(--tekst); font-weight: var(--vet); }
.takenoverzicht { margin: 0 0 22px; }
@media (min-width: 700px) { .taaknieuw { grid-template-columns: 1fr 160px auto; } }
.voorstel.herkend { border-width: 2px; background: var(--accent); }
.voorstel.herkend h2 { font-size: 15px; }
.offerterij .rechts { min-width: 110px; }
.offerterij .merkje { margin: 2px 0 0; align-self: flex-end; }

/* ── lijsten ── */
.lijst { display: flex; flex-direction: column; background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader);
  border-radius: var(--bol); padding: 0 14px; }
.rij { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: var(--dikte) var(--lijnsoort) var(--kader);
  text-decoration: none; color: inherit; }
.rij:last-child { border-bottom: 0; }
a.rij:hover b { text-decoration: underline; }
.rechts { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.notitie { white-space: pre-wrap; background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 12px 14px; }
.kostrij { align-items: flex-start; }
.betaalvink { flex: none; width: 22px; height: 22px; margin-top: 2px; border: 1.5px solid var(--accentlijn); border-radius: 50%;
  background: var(--wit); cursor: pointer; padding: 0; }
.betaalvink.aan { background: var(--accentlijn); }
.betaalvink.aan::after { content: ""; display: block; width: 6px; height: 10px; margin: 2px auto 0; border: solid var(--accentlijn);
  border-width: 0 2px 2px 0; transform: rotate(45deg); border-color: var(--wit); }
.gezicht { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
  border-radius: 50%; background: var(--vlak); border: 1px solid var(--rand); font-size: var(--klein); font-weight: var(--vet); }
.sterren { font-size: 10px; letter-spacing: 2px; color: var(--structuur); }
.bol { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--accentlijn); }
.verdeling { display: flex; height: 26px; border-radius: var(--bolletje); overflow: hidden; border: 1px solid var(--accentlijn); margin: 0 0 10px; }
.verdeling i { display: block; height: 100%; border-right: 1px solid var(--accentlijn); }
.verdeling i:last-child { border-right: 0; }
.mailrij.nieuw b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--accentlijn); margin-right: 8px; vertical-align: 1px; }
.gegevens { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 16px 0; font-size: var(--klein); }
.gegevens dt { color: var(--grijs-stil); } .gegevens dd { margin: 0; }
.zoekveld { margin: 0 0 8px; }

/* ── offertes naast elkaar ── */
.vergelijk { display: grid; grid-template-columns: 1fr; gap: 10px; }
.offerte { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--rand); border-radius: var(--bol); padding: 14px; display: flex; flex-direction: column; }
.offerte.gekozen { border: 2px solid var(--accentlijn); }
.offerte.afgewezen { opacity: .55; }
.offerte p { margin: 0 0 6px; }
.offerte .knoppen { margin-top: auto; padding-top: 8px; }
.bedrag { font-size: var(--groot); line-height: 1.3; margin: 4px 0 2px; }

/* ── de vergelijkingstabel: een kolom per aannemer, een rij per onderdeel ── */
.tabelrol { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--wit);
  border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); }
.vergelijktabel { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; font-size: var(--klein); }
.vergelijktabel th, .vergelijktabel td { text-align: left; vertical-align: top; padding: 10px 12px; min-width: 150px; max-width: 240px;
  border-bottom: var(--dikte) var(--lijnsoort) var(--kader); }
.vergelijktabel thead th { font-size: var(--gewoon); font-weight: 400; background: var(--wit); }
.vergelijktabel thead th b { display: block; margin: 0 0 4px; }
.vergelijktabel thead th.gekozen { box-shadow: inset 0 3px 0 var(--accentlijn); }
.vergelijktabel th.afgewezen, .vergelijktabel thead th.afgewezen { opacity: .55; }
.vergelijktabel .rijkop { position: sticky; left: 0; z-index: 1; background: var(--wit); font-weight: var(--vet);
  min-width: 140px; max-width: 180px; border-right: var(--dikte) var(--lijnsoort) var(--rand); }
.vergelijktabel td.laagste { background: var(--accent); }
.vergelijktabel td.ontbreekt { color: var(--grijs-stil); font-style: italic; }
.vergelijktabel td b { font-size: var(--gewoon); }
.vergelijktabel tr.totaal th, .vergelijktabel tr.totaal td { border-top: 2px solid var(--accentlijn); }
.vergelijktabel tr.totaal td b { font-size: 15px; }
.vergelijktabel tr.knoprij td, .vergelijktabel tr.knoprij th { border-bottom: 0; }
.vergelijktabel tr.omschrijving td { color: var(--structuur); }
.celnotitie { color: var(--structuur); margin-top: 3px; }
.celknoppen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vergelijking > p { margin: 0 0 8px; }
.veeg { display: block; }
@media (max-width: 699px) {
  .vergelijktabel .rijkop { min-width: 104px; max-width: 120px; padding: 10px 8px; }
  .vergelijktabel th, .vergelijktabel td { min-width: 138px; }
}

/* ── onderdelen invullen ── */
.postrij { display: grid; grid-template-columns: 1fr 96px 24px; gap: 6px; margin: 0 0 8px; align-items: center; }
.postrij input:nth-child(3) { grid-column: 1 / 3; }
.postrij .wegje { grid-row: 1; grid-column: 3; }
.postrij input { padding: 8px 10px; font-size: var(--klein); }
.postensom { margin: 2px 0 0; }
.posten .knoppen { margin-top: 6px; }

/* ── bestanden ── */
.bestanden { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0 0; }
.bestanden.klein { margin: 6px 0 2px; }
.bestandje { display: inline-flex; align-items: center; gap: 4px; background: var(--vlak); border-radius: var(--bolletje);
  padding: 3px 4px 3px 9px; font-size: var(--klein); max-width: 100%; }
.bestandje a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wegje { border: 0; background: transparent; cursor: pointer; color: var(--grijs-stil); font-size: 15px; line-height: 1; padding: 0 4px; }
.wegje:hover { color: var(--tekst); }

/* ── de gids ── */
.gids { margin: 40px 0 0; background: var(--wit); border: 1px solid var(--accentlijn); border-radius: var(--bol); padding: 0 16px; }
.gids[open] { padding-bottom: 18px; }
.gids > summary { list-style: none; cursor: pointer; padding: 16px 28px 16px 0; position: relative; margin: 0; }
.gids > summary::-webkit-details-marker { display: none; }
.gids > summary::after { content: "+"; position: absolute; right: 0; top: 14px; font-size: 22px; color: var(--structuur); }
.gids[open] > summary::after { content: "−"; }
.gids .band, .gids .optie, .gids .woorden { background: var(--grond); }
.gidskop { margin: 0 0 14px; }
.gidskop h2 { font-size: 15px; line-height: 1.35; }
.gidskop p { margin: 4px 0 0; }
.gidsdrie, .gidstwee { display: grid; grid-template-columns: 1fr; gap: 10px; }
.gidstwee { margin: 26px 0 0; }
.bouwwijze { background: var(--wit); border: 1px solid var(--accentlijn); border-radius: var(--bol); padding: 14px 16px; margin: 14px 0 0; }
.bouwwijze h3 { margin: 0 0 8px; }
.bouwwijze ul { margin: 6px 0 0; padding-left: 18px; }
.bouwwijze li { margin: 0 0 6px; }
.bouwwijze p { margin: 10px 0 0; }
.bouwkolommen { display: grid; grid-template-columns: 1fr; gap: 14px; }
.opties { display: grid; grid-template-columns: 1fr; gap: 10px; }
.optie { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--rand); border-radius: var(--bol); padding: 14px; display: flex; flex-direction: column; }
.optie.anders { opacity: .5; }
.alleen { align-self: flex-start; background: var(--vlak); border-radius: var(--rond); padding: 1px 9px; margin: 0 0 8px; color: var(--structuur); }
.optiekop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.prijs { white-space: nowrap; font-weight: var(--vet); letter-spacing: 1px; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.prijs .tekens { white-space: nowrap; }
.prijs .klein { font-weight: 400; letter-spacing: var(--tracking); }
.optie > p { margin: 0 0 10px; }
.voor, .tegen { font-size: var(--klein); margin: 0 0 8px; }
.voor ul, .tegen ul { margin: 4px 0 0; padding-left: 16px; }
.voor li, .tegen li { margin: 0 0 3px; }
.vinklijst, .vraaglijst { margin: 0; padding: 0; list-style: none; }
.vinklijst li, .vraaglijst li { position: relative; padding: 0 0 8px 26px; }
.vinklijst li::before { content: "!"; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--wit); border: 1px solid var(--accentlijn); font-size: 11px; font-weight: var(--vet); text-align: center; line-height: 16px; }
.vraaglijst li::before { content: "?"; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--wit); border: 1px solid var(--accentlijn); font-size: 11px; font-weight: var(--vet); text-align: center; line-height: 16px; }
.woorden { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; background: var(--wit);
  border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 4px 14px; }
.woorden dt { font-weight: var(--vet); padding: 10px 0 0; }
.woorden dd { margin: 0; padding: 0 0 10px; border-bottom: var(--dikte) var(--lijnsoort) var(--kader); color: var(--structuur); }
.woorden dd:last-child { border-bottom: 0; }

/* ── binnengekomen ── */
.adresblok { display: inline-flex; flex-direction: column; background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--rand);
  border-radius: var(--bol); padding: 10px 14px; margin: 0 0 14px; max-width: 100%; overflow-wrap: anywhere; }
.voorstel { background: var(--wit); border: 1px solid var(--accentlijn); border-radius: var(--bol); padding: 16px; margin: 0 0 8px; }
.voorstel p { margin: 2px 0 12px; }
.drieveld { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.mailtekst { white-space: pre-wrap; font: inherit; background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader);
  border-radius: var(--bol); padding: 14px; margin: 0; overflow-wrap: anywhere; }

/* ── velden en het venster ── */
.veld { margin: 0 0 14px; }
.veld > label { display: block; margin: 0 0 5px; font-size: var(--klein); color: var(--grijs-stil); }
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select {
  width: 100%; font: inherit; color: var(--tekst); background: var(--vlak); border: var(--dikte) solid var(--rand);
  border-radius: var(--bolletje); padding: 10px 12px; line-height: var(--ritme); font-size: var(--gewoon); letter-spacing: var(--tracking);
}
input:focus, textarea:focus, select:focus { outline: 0; background: var(--wit); border-color: var(--accentlijn); box-shadow: inset 0 0 0 1px var(--accentlijn); }
textarea { resize: vertical; }
.vinkveld { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; cursor: pointer; }
.vinkveld input { width: 18px; height: 18px; accent-color: var(--structuur); }
.foutregel { color: var(--tekst); background: var(--roze); border-radius: var(--bolletje); padding: 8px 12px; font-size: var(--klein); margin: 8px 0 0; }
.venster { border: 1px solid var(--accentlijn); border-radius: var(--bol); padding: 22px 20px; width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 40px); overflow: auto; background: var(--wit); color: var(--tekst); }
.venster::backdrop { background: rgba(17, 17, 17, .35); }
.venster h2 { font-size: var(--groot); margin: 0 0 16px; }
.toegang h1 { margin-bottom: 6px; }
.toegang .knop { margin-top: 8px; }

/* ── brede schermen ── */
@media (min-width: 700px) {
  .raam { padding: 34px 28px 80px; }
  .voet { display: none; }
  .bovenmenu { display: flex; gap: 22px; align-items: center; }
  .veeg { display: none; }
  .bovenlink { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--grijs-stil); font-size: var(--gewoon); white-space: nowrap; }
  .bovenmenu { gap: 18px; }
  .bovenlink .voetteken { display: inline-block; }
  .bovenlink:hover { color: var(--tekst); }
  .balk { padding: 14px 28px; }
  .cijferrij { grid-template-columns: repeat(4, 1fr); }
  .telblok b { font-size: 17px; }
  .pandkaart .cijferrij { grid-template-columns: repeat(3, 1fr); }
  .vergelijk { grid-template-columns: repeat(2, 1fr); }
  .gidsdrie { grid-template-columns: repeat(3, 1fr); }
  .gidstwee { grid-template-columns: 1fr 1fr; }
  .opties { grid-template-columns: repeat(2, 1fr); }
  .bouwkolommen.n2 { grid-template-columns: 1fr 1fr; }
  .drieveld { grid-template-columns: repeat(3, 1fr); }
  .postrij { grid-template-columns: 1.3fr 110px 1fr 24px; }
  .postrij input:nth-child(3) { grid-column: auto; }
  .postrij .wegje { grid-row: auto; grid-column: auto; }
  .woorden { grid-template-columns: minmax(160px, 220px) 1fr; padding: 4px 16px; }
  .woorden dt { padding: 10px 16px 10px 0; border-bottom: var(--dikte) var(--lijnsoort) var(--kader); }
  .woorden dd { padding: 10px 0; }
  .woorden dt:nth-last-of-type(1) { border-bottom: 0; }
}
@media (min-width: 700px) and (max-width: 1099px) { .bovenlink:not(.instellinglink) .voetteken { display: none; } .bovenmenu { gap: 14px; } }
@media (min-width: 1000px) {
  .vergelijk { grid-template-columns: repeat(3, 1fr); }
  .opties { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/*
 * ── Rustiger en ruimtelijker (haar vraag, 23 oktober 2026) ──
 * Titels krijgen een zachte band over de hele breedte, zoals in Notion, in het
 * accent zand. Bedragen zijn niet langer vet: alleen het eindtotaal van de
 * rekensom blijft het. Meer ruimte tussen blokken en rijen.
 */
.fasekop, .kopje {
  background: var(--accent); border-radius: 4px; padding: 7px 12px; align-items: baseline;
}
.fasekop { margin: 0 0 12px; }
.kopje { margin: 44px 0 14px; }
.fasekop h2, .kopje h2 { font-weight: var(--vet); }
.fasekop b, .fasekop .klein, .kopje .klein { font-weight: 400; color: var(--structuur); }
.fase { margin: 0 0 40px; }
.raam { padding-top: 30px; }
.schermkop { margin: 0 0 26px; }
.rij { padding: 16px 0; }
.lijst { padding: 0 18px; }
.cijferrij { gap: 12px; margin: 14px 0 18px; }
.telblok { padding: 14px 16px; }
.telblok b, .samenvatting b, .rechts b, .bedrag, .somregel b, .vergelijktabel td b,
.vergelijktabel tr.totaal td b, .budgetregel b, .offertebloktitel b ~ *, .tlnaam b { font-weight: 400; }
.somregel.totaal, .somregel.totaal b { font-weight: var(--vet); }
.samenvatting b { font-size: var(--gewoon); }
.verschil.boven { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.offerteblok { margin: 0 0 24px; }
.offerteblok.leeg { margin: 0; padding: 12px 2px; border-bottom: var(--dikte) var(--lijnsoort) var(--kader); }
.offerteblok.leeg .offertebloktitel { padding: 0; align-items: center; gap: 16px; }
.offerteblok.leeg b { font-weight: 400; }
.offertebloktitel { padding: 0 2px 10px; }
.melding { font-weight: 400; }
.legende, .pandkiezer { margin-bottom: 20px; }

.kijkna { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: var(--rond); border: 1px solid var(--accentlijn); color: var(--tekst); }

/* Het bovenste menu zonder tekentjes: rustiger, en alles past op één regel (23 oktober). */
.bovenlink:not(.instellinglink) .voetteken { display: none !important; }
@media (min-width: 700px) { .bovenmenu { gap: 18px; } .bovenlink { font-size: 14px; } }
.offerteblok.leeg + .offerteblok:not(.leeg) { margin-top: 20px; }

.bovenmenu { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bovenmenu::-webkit-scrollbar { display: none; }


/*
 * ── Kleiner en niet vet buiten titels (haar vraag, 23 oktober 2026) ──
 * Vet is alleen nog voor titels (h1, h2, h3). Namen, bedragen, knoppen en het
 * gekozen menu-item staan in gewoon gewicht; wat gekozen is, krijgt een lijn eronder.
 */
b, strong, .vet, .categorienaam, .knop, .stand, .merkje, .teller, .gezicht, .prijs, .woorden dt,
.vergelijktabel .rijkop, .standknop[aria-pressed=true], .telaat, .tabs a[aria-current=page],
.voet a[aria-current=page], .bovenlink[aria-current=page], .somregel.totaal, .somregel.totaal b { font-weight: 400; }
h1, h2, h3, .fasekop h2, .kopje h2, .gidskop h2, .venster h2 { font-weight: var(--vet); }
.bovenlink[aria-current=page] { text-decoration: underline; text-decoration-color: var(--accentlijn); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.telaat { text-decoration: underline; text-decoration-color: var(--accentlijn); text-underline-offset: 3px; }
.knop { font-size: 13px; }
.knop.klein { font-size: 12px; }
.balkje > i, .tlbalk.klaar, .betaalvink.aan { background: var(--accentlijn); }
.knop.aan, .standknop[aria-pressed=true], .stand.aan, .teller, .merkje, .kijkna { border-color: var(--accentlijn); }
.balkje.over > i { background: var(--accentlijn); }
.balkje { border-color: var(--rand); }

/* Een grote stap hernoemen door op de naam te klikken; een categorie erbij onder elke stap. */
.stapnaam { cursor: text; display: inline-flex; align-items: baseline; gap: 8px; }
.potlood { border: 0; background: transparent; padding: 0 2px; cursor: pointer; color: var(--grijs-stil); font-size: 13px; opacity: .6; }
.stapnaam:hover .potlood { opacity: 1; color: var(--tekst); }
.naambewerk { display: flex; align-items: center; gap: 8px; flex: 1; }
.naamveld { padding: 4px 8px !important; font-weight: var(--vet); background: var(--wit) !important; }
.erbij { padding: 10px 0; }
.fasekoprechts { display: inline-flex; align-items: baseline; gap: 14px; margin-left: auto; }
.pluscat { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: var(--klein); color: var(--structuur); white-space: nowrap; }
.pluscat:hover { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.indelingknoppen { margin: 0 0 22px; }
.erbijveld { display: flex; gap: 8px; align-items: center; width: 100%; flex-wrap: wrap; }
.erbijveld input { flex: 1; min-width: 180px; padding: 8px 10px; font-size: var(--klein); }
.fase:has(> .erbijlijst) { display: flex; flex-direction: column; }
.erbijlijst { margin: 10px 0 0; order: 99; }
.afgetrokken { white-space: nowrap; }

/* Wat nu, op het overzicht (24 oktober) */
.pandlink { text-decoration: none; }
.pandlink:hover h2 { text-decoration: underline; text-underline-offset: 3px; }
.watnu { margin: 16px 0 0; padding: 14px 16px; background: var(--grond); border-radius: var(--bolletje); }
.watnu h3 { margin: 0 0 8px; }
.watnu ul { margin: 0; padding: 0 0 0 18px; }
.watnu li { margin: 0 0 6px; }
.watnu li::marker { color: var(--accentlijn); }
.watnu a { text-decoration: none; }
.watnu a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Premies, visueel (24 oktober) ──
 * Tinten van het accent zand: d0 het lichtst (nog te bekijken), d4 het diepst (ontvangen). */
.d0 { background: var(--vlak); } .d1 { background: var(--accent); }
.d2 { background: color-mix(in srgb, var(--accent) 60%, var(--accentlijn)); }
.d3 { background: color-mix(in srgb, var(--accent) 25%, var(--accentlijn)); }
.d4 { background: var(--accentlijn); }
.premiekop { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 16px 18px; margin: 0 0 22px; }
.premietotaal { display: flex; flex-direction: column; margin: 0 0 12px; }
.premietotaal .groot { font-size: var(--groot); }
.premiebalk { display: flex; height: 12px; border-radius: var(--rond); overflow: hidden; background: var(--vlak); gap: 2px; }
.premiebalk i { display: block; height: 100%; }
.premielegende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; }
.premielegende span { display: inline-flex; align-items: center; gap: 6px; }
.premielegende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.premies { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 18px; }
@media (min-width: 900px) { .premies { grid-template-columns: 1fr 1fr; } }
.premie { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 16px 18px; cursor: pointer; }
.premie:hover { border-color: var(--accentlijn); }
.premie.afgewezen { opacity: .55; }
.premiebovenaan { display: flex; gap: 12px; align-items: baseline; }
.premiebovenaan h3 { margin: 0; }
.premiebedrag { font-size: 17px; white-space: nowrap; }
.premieweg { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 16px 0 12px; padding: 0; }
.premieweg li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; color: var(--grijs-stil); text-align: center; }
.premieweg li::before { content: ""; position: absolute; top: 5px; left: -50%; right: 50%; height: 2px; background: var(--rand); }
.premieweg li:first-child::before { display: none; }
.premieweg li.gedaan::before, .premieweg li.nu::before { background: var(--accentlijn); }
.premieweg i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--wit); border: 2px solid var(--rand); }
.premieweg li.gedaan i { background: var(--accentlijn); border-color: var(--accentlijn); }
.premieweg li.nu i { background: var(--accent); border-color: var(--accentlijn); width: 14px; height: 14px; margin-top: -1px; }
.premieweg li.nu { color: var(--tekst); }
.premieweg.afgewezen { text-decoration: line-through; }
.premieonderaan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.deadline { font-size: var(--klein); padding: 2px 10px; border-radius: var(--rond); background: var(--grond); color: var(--structuur); }
.deadline.krap { background: var(--accent); color: var(--tekst); border: 1px solid var(--accentlijn); }
.schakel { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: var(--klein); color: var(--structuur); padding: 4px 0; }
.schakel i { position: relative; width: 32px; height: 18px; border-radius: var(--rond); background: var(--rand); transition: background .15s; flex: none; }
.schakel i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--wit); transition: transform .15s; }
.schakel.aan i { background: var(--accentlijn); }
.schakel.aan i::after { transform: translateX(14px); }
.schakel.aan { color: var(--tekst); }
.schakel:disabled { opacity: .5; cursor: default; }

/* ── De hele mail en het gesprek per categorie (24 oktober) ── */
.mailinhoud { margin: 0 0 8px; }
.mailvenster { width: 100%; min-height: 420px; border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); background: #fff; }
.bijlagen { margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.bijlagen h3 { margin: 0; }
.bijlage { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bolletje); padding: 8px 12px; }
.bijlage > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: var(--klein); }
.pdfvenster { width: 100%; height: 70vh; border: 0; margin: 10px 0 6px; background: var(--vlak); }
.fotobijlage { max-width: 100%; border-radius: var(--bolletje); margin: 10px 0 6px; display: block; }
.gesprek { display: flex; flex-direction: column; gap: 8px; }
.mailgesprek { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 12px 16px; }
.mailgesprek > summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; }
.mailgesprek > summary::-webkit-details-marker { display: none; }
.mailgesprek[open] > summary { margin: 0 0 12px; padding: 0 0 10px; border-bottom: var(--dikte) var(--lijnsoort) var(--kader); }
.mailgesprek .mailtekst { border: 0; padding: 0; background: transparent; }
.mailvan { font-weight: 400; }

/* Overal dezelfde indeling: per categorie een kleine titel onder de band (24 oktober). */
.catblok { margin: 0 0 18px; }
.cattitel { display: inline-block; margin: 0 0 8px 2px; text-decoration: none; color: var(--structuur); font-size: var(--klein); text-transform: none; }
.cattitel:hover { color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }

/* ── Visueler (24 oktober): bolletjes, balkjes en staafjes in tinten zand ── */
.standbol { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--accentlijn); flex: none; }
.prijsbalk { display: block; height: 6px; margin: 8px 0 0; max-width: 260px; background: var(--vlak); border-radius: var(--rond); overflow: hidden; }
.prijsbalk i { display: block; height: 100%; border-radius: var(--rond); }
.prijsbalk.smal { width: 140px; margin: 6px 0 0 auto; }
.prijsbalk.over i { background: var(--accentlijn); }
.maandstaven { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin: 0 0 18px; padding: 14px 16px 10px;
  background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); overflow-x: auto; }
.maandstaaf { flex: 1; min-width: 54px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.maandstaaf i { display: block; width: 60%; max-width: 46px; border-radius: 6px 6px 2px 2px; }

/* De stand als labeltje (24 oktober): duidelijk, in tinten van zand, Klaar donker met witte letters. */
.standregel { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.standpil { display: inline-block; font-size: 11px; line-height: 1; padding: 5px 10px; border-radius: var(--rond); color: var(--tekst);
  border: 1px solid color-mix(in srgb, var(--accentlijn) 45%, transparent); white-space: nowrap; }
.standpil.d0 { background: var(--wit); color: var(--grijs-stil); border-color: var(--rand); }
.standpil.d4 { color: var(--wit); border-color: var(--accentlijn); }
.standknop.d0, .standknop.d1, .standknop.d2, .standknop.d3, .standknop.d4 { background: var(--wit); }
.standknop[aria-pressed=true].d1 { background: var(--accent); }
.standknop[aria-pressed=true].d2 { background: color-mix(in srgb, var(--accent) 60%, var(--accentlijn)); }
.standknop[aria-pressed=true].d3 { background: color-mix(in srgb, var(--accent) 25%, var(--accentlijn)); }
.standknop[aria-pressed=true].d4 { background: var(--accentlijn); color: var(--wit); }
.isklaar .categorienaam { color: var(--tekst); }

/*
 * ── De vier hoofdkleuren van haar branding, met een vaste betekenis (25 oktober) ──
 * Pastel als vlak, met een dunne grijze rand zodat ook een klein vlak zichtbaar blijft
 * (de huisstijl: een kleine pastelvorm verdwijnt anders).
 */
.kl-wit { background: var(--wit); }
.kl-geel { background: var(--geel); } .kl-paars { background: var(--paars); }
.kl-roze { background: var(--roze); } .kl-groen { background: var(--groen); }
.standpil { border-color: color-mix(in srgb, var(--structuur) 35%, transparent); }
.standpil.kl-wit { color: var(--grijs-stil); border-color: var(--rand); }
.standpil.kl-groen { color: var(--tekst); }
.standknop[aria-pressed=true].kl-geel { background: var(--geel); }
.standknop[aria-pressed=true].kl-paars { background: var(--paars); }
.standknop[aria-pressed=true].kl-roze { background: var(--roze); }
.standknop[aria-pressed=true].kl-groen { background: var(--groen); color: var(--tekst); }
.standknop.kl-wit, .standknop.kl-geel, .standknop.kl-paars, .standknop.kl-roze, .standknop.kl-groen { border-color: var(--rand); }
.standknop[aria-pressed=true] { border-color: var(--structuur); }
.premiebalk i, .premielegende i, .prijsbalk i, .maandstaaf i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--structuur) 30%, transparent); }
.premiebalk i.kl-wit, .premielegende i.kl-wit { background: var(--wit); }
.premieweg li.gedaan i { border-color: var(--structuur); }
.premieweg li.nu i { border-color: var(--structuur); }
.premieweg li.gedaan.kl-geel i { background: var(--geel); } .premieweg li.gedaan.kl-paars i { background: var(--paars); }
.premieweg li.gedaan.kl-roze i { background: var(--roze); } .premieweg li.gedaan.kl-groen i { background: var(--groen); }
.premieweg li.gedaan.kl-wit i { background: var(--wit); }
.premieweg li.nu.kl-geel i { background: var(--geel); } .premieweg li.nu.kl-paars i { background: var(--paars); }
.premieweg li.nu.kl-roze i { background: var(--roze); } .premieweg li.nu.kl-groen i { background: var(--groen); }
.premieweg li.nu.kl-wit i { background: var(--wit); }
.premieweg li.gedaan::before, .premieweg li.nu::before { background: color-mix(in srgb, var(--structuur) 40%, transparent); }
.schakel.aan i { background: var(--groen); box-shadow: inset 0 0 0 1px var(--structuur); }
.schakel.aan i::after { box-shadow: 0 0 0 1px color-mix(in srgb, var(--structuur) 40%, transparent); }
.balkje > i { background: var(--groen); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--structuur) 30%, transparent); }
.balkje.over > i { background: var(--roze); }

/* Hoe werkt deze pagina: dichtgeklapt bovenaan elke pagina (25 oktober). */
.hulpblok { margin: 0 0 20px; background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 0 16px; }
.hulpblok > summary { list-style: none; cursor: pointer; padding: 11px 0; display: flex; align-items: center; gap: 10px; font-size: var(--klein); color: var(--structuur); }
.hulpblok > summary::-webkit-details-marker { display: none; }
.hulpblok[open] > summary { color: var(--tekst); }
.hulpteken { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--geel); border: 1px solid color-mix(in srgb, var(--structuur) 40%, transparent); font-size: 11px; color: var(--tekst); }
.hulpblok ul { margin: 0 0 14px; padding: 0 0 0 20px; font-size: var(--klein); color: var(--structuur); line-height: 1.6; }
.hulpblok li { margin: 0 0 6px; }

/*
 * ── Overal dezelfde kleurbetekenis (25 oktober) ──
 * groen: goed of gekozen (gekozen offerte, goedkoopst, laagste per rij, telt mee, betaald, gedaan)
 * geel: hier moet je iets doen of naar kijken (kijk na, nog niet binnen, nog geen bedrag, vanzelf herkend)
 * roze: let op (te laat, deadline dichtbij, boven het budget, nieuwe mails)
 */
.pil { display: inline-block; font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: var(--rond); color: var(--tekst); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--structuur) 30%, transparent); }
.pil.groen { background: var(--groen); } .pil.geel { background: var(--geel); } .pil.roze { background: var(--roze); }
.stand.kl-groen { background: var(--groen); border-color: color-mix(in srgb, var(--structuur) 30%, transparent); color: var(--tekst); }
.stand.kl-geel { background: var(--geel); } .stand.kl-paars { background: var(--paars); } .stand.kl-roze { background: var(--roze); }
.stand.afgewezenpil { color: var(--grijs-stil); text-decoration: line-through; }
.merkje { background: var(--groen); border-color: color-mix(in srgb, var(--structuur) 30%, transparent); }
.vergelijktabel td.laagste { background: var(--groen); }
.vergelijktabel thead th.gekozen { background: var(--groen); box-shadow: none; }
.voorstel.herkend { background: var(--geel); border-color: color-mix(in srgb, var(--structuur) 40%, transparent); }
.kijkna { background: var(--geel); border-color: color-mix(in srgb, var(--structuur) 30%, transparent); }
.deadline.krap { background: var(--roze); border-color: color-mix(in srgb, var(--structuur) 30%, transparent); }
.teller { background: var(--roze); border-color: color-mix(in srgb, var(--structuur) 40%, transparent); }
.mailrij.nieuw b::before { background: var(--geel); border-color: color-mix(in srgb, var(--structuur) 40%, transparent); }
.telaat { background: var(--roze); text-decoration: none; padding: 1px 7px; border-radius: var(--rond); color: var(--tekst); }
.verschil.boven { background: var(--roze); text-decoration: none; padding: 1px 7px; border-radius: var(--rond); }
.betaalvink.aan { background: var(--groen); border-color: var(--structuur); }
.betaalvink.aan::after { border-color: var(--tekst); }
.tlbalk { border-color: color-mix(in srgb, var(--structuur) 35%, transparent); }
.tlbalk.kl-wit { background: var(--wit); }
.tlbalk.kl-geel { background: var(--geel); } .tlbalk.kl-paars { background: var(--paars); }
.tlbalk.kl-roze { background: var(--roze); } .tlbalk.kl-groen { background: var(--groen); }
.standpil.kl-groen { background: var(--groen); }
.tlbalk.isklaar::after { content: "✓"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--tekst); }

/* Gmail koppelen (25 oktober) */
.gmailblok { background: var(--wit); border: var(--dikte) var(--lijnsoort) var(--kader); border-radius: var(--bol); padding: 16px 18px; }
.gmailblok .hulpblok { background: var(--grond); }
.gmailblok .hulpblok ol { margin: 0 0 14px; padding: 0 0 0 20px; font-size: var(--klein); color: var(--structuur); line-height: 1.6; }
.gmailblok .hulpblok li { margin: 0 0 6px; }

/* De mailbox (25 oktober) */
.mailrij.uit b { font-weight: 400; color: var(--structuur); }
.gezicht.ik { background: var(--groen); }
.pandtitel { font-size: var(--groot); margin: 28px 0 14px; }
.antwoordknoppen { margin: 0 0 16px; }
.knop .teller { margin-left: 6px; }

/* Het mailtekentje en de lezer zoals in Gmail (25 oktober) */
.mailknop { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rand); background: var(--wit); border-radius: var(--rond);
  padding: 3px 9px; font: inherit; font-size: 11px; color: var(--structuur); cursor: pointer; flex: none; }
.mailknop:hover { border-color: var(--structuur); color: var(--tekst); }
.mailknop.nieuw { background: var(--geel); }
.vergelijktabel thead .mailknop { margin-top: 6px; }
.lezer { width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; }
.lezerkop { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px 12px; background: var(--wit);
  border-bottom: var(--dikte) var(--lijnsoort) var(--kader); }
.lezerkop h2 { margin: 0 0 2px; font-size: 17px; }
.lezersluit { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--structuur); padding: 0 4px; }
.lezermail { padding: 12px 20px; border-bottom: var(--dikte) var(--lijnsoort) var(--kader); }
.lezermail > summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; }
.lezermail > summary::-webkit-details-marker { display: none; }
.lezermail[open] > summary { margin: 0 0 12px; }
.lezermail .mailinhoud { margin-left: 46px; }
.lezermail .knoppen { margin-left: 46px; }
.nieuwbinnen .fasekop { background: var(--geel); }
.nieuwbinnen .mailrij b { font-weight: var(--vet); }
@media (max-width: 699px) { .lezermail .mailinhoud, .lezermail .knoppen { margin-left: 0; } }

/* Een nieuwe mail valt op in de lijst zelf: gele achtergrond, labeltje, vet onderwerp (25 oktober). */
/* Een nieuwe mail: het mailtekentje geel ingekleurd, het onderwerp vet; geen bolletje of achtergrond (haar keuze, 26 oktober). */
.mailrij.nieuw b { font-weight: var(--vet); }
.mailrij.nieuw b::before { display: none; }
/* Het geel van de huisstijl is te zacht om een tekentje in te kleuren: een klein geel rondje erachter. */
.mailrij .voetteken { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; }
.mailrij.nieuw .voetteken { color: var(--tekst); background: var(--geel); border: 1.5px solid var(--structuur); }

/* Op Stappen: een categorie met haar offertes eronder, ingesprongen (25 oktober). */
.catgroep { border-bottom: var(--dikte) var(--lijnsoort) var(--kader); padding: 0 0 6px; }
.catgroep:last-child { border-bottom: 0; }
.catgroep .categorierij { border-bottom: 0; padding-bottom: 8px; }
.catoffertes { margin: 0 0 8px 18px; padding: 0 0 0 14px; border-left: 2px solid var(--kader); }
.catoffertes .offerterij { padding: 10px 0; }
.catoffertes .offerterij b { font-weight: 400; }
.catoffertes .offerterij:first-child { padding-top: 2px; }
.catoffertes.leeg { padding: 0 0 6px 14px; }
@media (max-width: 699px) { .catoffertes { margin-left: 4px; padding-left: 10px; } .catoffertes .stand { display: none; } }
/* Een offerte op de telefoon: naam en uitleg over de hele breedte, bedrag en labels eronder. */
@media (max-width: 699px) {
  .offerterij { flex-wrap: wrap; row-gap: 8px; }
  .offerterij > .groei { flex-basis: 100%; }
  .offerterij > .rechts { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
  .kijkna, .pil { white-space: nowrap; }
}

/* Eerste pand: kiezen tussen renovatie en nieuwbouw (26 oktober 2026). */
.welkom h2 { margin-bottom: 6px; }
.keuzekaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.keuzekaart { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; background: var(--wit);
  border: 1px dashed var(--accentlijn); border-radius: 8px; cursor: pointer; font: inherit; color: var(--tekst); }
.keuzekaart:hover, .keuzekaart:focus-visible { background: var(--zand); }
.keuzekaart b { font-weight: 600; }

/* Zo begin je: drie stappen na het aanmelden (26 oktober 2026). */
.startlijst ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.startlijst li { display: flex; gap: 12px; align-items: flex-start; }
.startlijst .nummer { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--accentlijn); font-size: var(--klein); }
.startlijst li.nu .nummer { background: var(--zand); border-style: solid; }
.startlijst li.klaar .nummer { background: var(--groen); border-color: transparent; }
.startlijst li.klaar b { color: var(--stil, #777); font-weight: 400; }
.startlijst .knoppen { margin-top: 8px; align-items: center; }
.startlijst p { margin: 4px 0 0; }