/* Cinewall-designer — eigen opmaak in de huisstijl van het thema.
   Alles onder .cw zodat het niets buiten de tool raakt. */

/* NOG HET PALET VAN DE KEUKENSITE, en dat is bewust.

   MERK.md wil voor cinewallmetsfeerhaard.nl het schemerpaars-met-steenrood
   palet (Schemer #1E1A24, Nachtvilt #2C2631, Kalkwit #F4EFE8, Zandsteen
   #B7A390, Gloed #C9542F, Salie #7E9B84). De TEKENING kan dat al: zet
   `paletVoorTool` in model.js op "sfeerhaard".

   Deze opmaak nog niet. Het omzetten raakt elke kleurregel hieronder,
   inclusief de betekenis van de signaalkleur — bij afraden hoort daar Salie
   en geen rood, want rood is dan de accentkleur. Dat is een eigen ronde, niet
   iets om er in de laatste uren bij te doen.

   Als de tool op de cinewallsite landt, is dit het eerste wat om moet. */
.cw {
  --cw-ink: #100F0E;
  --cw-ink-2: #191715;
  --cw-ink-3: #242120;
  --cw-bone: #F3F1EC;
  --cw-bone-2: #E4E0D7;
  --cw-grey: #9A948B;
  --cw-amber: #EDA31B;
  --cw-amber-d: #C9860C;
  --cw-line: rgba(243, 241, 236, .13);
  --cw-line-2: rgba(243, 241, 236, .07);
  --cw-rood: #E0674A;
  --cw-groen: #7FA86B;

  background: var(--cw-ink);
  color: var(--cw-bone);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; font-weight: 350;
  padding: clamp(22px, 4vw, 52px) 0;
}
.cw *, .cw *::before, .cw *::after { box-sizing: border-box; }
/* Een eigen display-waarde wint van het hidden-attribuut. Zonder deze regel
   blijven de verborgen blokken als lege kaders in beeld staan. */
.cw [hidden] { display: none !important; }
.cw-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.cw h1, .cw h2, .cw h3, .cw h4 { font-family: Archivo, Helvetica, Arial, sans-serif; margin: 0; text-wrap: balance; }
.cw p { margin: 0; }
.cw .num { font-variant-numeric: tabular-nums; }
.cw :focus-visible { outline: 2px solid var(--cw-amber); outline-offset: 3px; }

.cw-titel { font-size: clamp(2rem, 5.4vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.cw-h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.05; }
.cw-h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; margin-top: 26px !important; }
.cw-lbl {
  font-family: Archivo, sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase; color: var(--cw-amber);
  display: block; margin-bottom: 8px;
}
.cw-lead { color: #CFC9BF; font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 64ch; margin-top: 14px; }
.cw-hint { color: var(--cw-grey); font-size: .9rem; line-height: 1.5; }
.cw-hint2 { color: var(--cw-grey); font-size: .84rem; }
.cw-sub {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cw-grey); margin: 16px 0 8px !important;
}

/* ============================================================
   De vijf schermen: belofte, kern, antwoord, verdieping, deuren.
   Wat je moet doen gaat in stappen, wat je mag doen op één pagina.
   Boven 900 px staan de drie kernvragen onder elkaar met de tekening
   ernaast; daaronder één vraag per scherm, tekening vast boven en
   het bedrag vast onder.
   ============================================================ */

.cw-kop { max-width: 68ch; }
.cw-titel {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 800; line-height: 1.03; letter-spacing: -.03em;
}
.cw-belofte {
  margin-top: 20px; padding: 14px 16px;
  background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px;
}
.cw-belofte b { display: block; font-family: Archivo, sans-serif; font-size: 1rem; margin-bottom: 3px; }
.cw-belofte span { display: block; color: var(--cw-bone-2); font-size: .93rem; line-height: 1.5; }
.cw-uitleg { margin-top: 12px !important; color: var(--cw-grey); font-size: .92rem; line-height: 1.5; max-width: 62ch; }

/* ---------------- kern ---------------- */
.cw-kern { display: grid; gap: clamp(14px, 2.4vw, 28px); grid-template-columns: 1fr; margin-top: 24px; }
.cw-vragenkolom { display: grid; gap: 12px; align-content: start; min-width: 0; }
.cw-beeldkolom { min-width: 0; }
@media (min-width: 900px) {
  .cw-kern { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cw-beeldkolom { position: sticky; top: 20px; }
}
/* Op een telefoon is de tekening een vaste strook boven de vraag.
   De kop wordt daar ook compacter: de belofte moet er staan, maar hij mag
   niet het hele eerste scherm opeten voordat je de eerste vraag ziet. */
@media (max-width: 899px) {
  .cw-titel { font-size: 1.65rem; line-height: 1.08; }
  .cw-kop .cw-lead { font-size: .96rem; margin-top: 8px; }
  .cw-belofte { margin-top: 12px; padding: 11px 13px; }
  .cw-belofte span { font-size: .88rem; }
  .cw-uitleg { font-size: .86rem; margin-top: 8px !important; }
  .cw-kern { margin-top: 14px; }
  .cw-kern .cw-h2 { font-size: 1.4rem; }
  .cw-kern .cw-lead { font-size: .92rem; }
}
@media (max-width: 899px) {
  .cw-beeldkolom {
    order: -1; position: sticky; top: 0; z-index: 6;
    background: var(--cw-ink); padding-bottom: 8px;
  }
  .cw-prijszij { display: none; }
}

.cw-beeld { background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px; overflow: hidden; }
.cw-beeld svg { width: 100%; height: auto; display: block; }
.cw-prijszij { margin-top: 10px; }

/* ---------------- de teller ---------------- */
.cw-teller { display: flex; gap: 6px; }
.cw-tel {
  flex: 1 1 0; min-width: 0; cursor: pointer; text-align: left;
  background: var(--cw-ink-2); border: 1px solid var(--cw-line);
  border-top: 2px solid var(--cw-line); border-radius: 4px;
  color: var(--cw-grey); padding: 8px 10px; font: inherit;
}
.cw-tel[disabled] { cursor: default; opacity: .55; }
.cw-tel.gedaan { border-top-color: var(--cw-grey); color: var(--cw-bone-2); }
.cw-tel.aan { border-top-color: var(--cw-amber); color: var(--cw-bone); background: var(--cw-ink-3); }
.cw-telnr { font-family: Archivo, sans-serif; font-weight: 800; font-size: .74rem; display: block; }
.cw-telnaam { display: block; font-size: .8rem; line-height: 1.25; overflow-wrap: anywhere; }
.cw-telantwoord { display: block; font-size: .74rem; color: var(--cw-grey); margin-top: 2px; overflow-wrap: anywhere; }

/* ---------------- maten ---------------- */
.cw-maat { margin-top: 14px; }
.cw-maatlabel { display: block; font-family: Archivo, sans-serif; font-weight: 700; font-size: .96rem; }
.cw-maatrij { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cw-maatknop {
  width: 44px; height: 44px; flex: 0 0 auto; cursor: pointer;
  background: var(--cw-ink-3); border: 1px solid var(--cw-line); border-radius: 5px;
  color: var(--cw-bone); font-size: 1.2rem; line-height: 1;
}
.cw-maatknop:hover { border-color: var(--cw-amber); color: var(--cw-amber); }
.cw-maatvak {
  width: 92px; height: 44px; padding: 0 10px;
  background: var(--cw-ink); border: 1px solid var(--cw-line); border-radius: 5px;
  color: var(--cw-bone); font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.1rem;
}
.cw-eenheid { color: var(--cw-grey); font-size: .9rem; }
.cw-tweerij { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.cw-tekstknop {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--cw-amber); font: inherit; text-decoration: underline;
}

/* ---------------- afraden ----------------
   Een linkerlijn in de signaalkleur, geen icoontje, geen uitroepteken.
   Afraden is bij ons geen alarm maar een advies. */
.cw-afraad {
  margin-top: 14px; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--cw-rood);
}
.cw-afraad b { display: block; font-family: Archivo, sans-serif; font-size: .96rem; margin-bottom: 3px; }
.cw-afraad span { display: block; font-size: .92rem; line-height: 1.5; color: var(--cw-bone-2); }
.cw-afraadknoppen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.cw-afraadknop {
  cursor: pointer; background: var(--cw-ink-3); border: 1px solid var(--cw-line);
  border-radius: 5px; color: var(--cw-bone); padding: 9px 14px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .88rem;
}
.cw-afraadknop:hover { border-color: var(--cw-bone-2); }

/* ---------------- navigatie ---------------- */
.cw-navrij { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cw-tprijs {
  display: block; margin-top: 3px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

/* ---------------- het bedrag ---------------- */
.cw-prijsvak {
  background: var(--cw-ink-2); border: 1px solid var(--cw-amber);
  border-radius: 6px; padding: 14px 16px;
  /* De oude opmaak zette dit vak rechts uit; in de nieuwe kolom hoort het
     gewoon links te beginnen, net als de vraag ernaast. */
  text-align: left;
}
.cw-prijsvak .cw-bedrag,
.cw-prijsvak .cw-ander { text-align: left; }
.cw-delta {
  display: inline-block; margin-top: 6px;
  background: rgba(237, 163, 27, .14); color: var(--cw-amber);
  border-radius: 4px; padding: 3px 8px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .84rem;
}
/* De vaste balk onderaan, alleen op een smal scherm. */
.cw-balk { display: none; }
@media (max-width: 899px) {
  .cw-balk {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
    background: var(--cw-ink); border-top: 1px solid var(--cw-line);
    padding: 8px clamp(12px, 4vw, 20px);
  }
  .cw-balk .cw-prijsvak { border: 0; background: none; padding: 0; }
  .cw-balk .cw-bedrag { font-size: 1.35rem; }
  .cw-balk .cw-tmontage { display: none; }
  .cw { padding-bottom: 120px; }
}

/* ---------------- het antwoord ---------------- */
.cw-antwoord { margin-top: 24px; }
.cw-gerust {
  padding: 2px 0 2px 14px; border-left: 3px solid var(--cw-rood);
  color: var(--cw-bone-2); font-size: .92rem;
}
.cw-samenvatzin {
  margin-top: 18px !important;
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45; max-width: 60ch;
}
.cw-antwoordprijs {
  margin-top: 18px; background: var(--cw-ink-2);
  border: 1px solid var(--cw-amber); border-radius: 6px; padding: clamp(16px, 2.6vw, 24px);
}
.cw-groot {
  display: block; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.03em; line-height: 1.05;
  overflow-wrap: anywhere;
}
.cw-groot.cw-geen { font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--cw-bone-2); }
.cw-nietin { margin-top: 16px; background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px; padding: 16px; }
.cw-nietin ul { margin: 10px 0; padding-left: 18px; }
.cw-nietin li { font-size: .9rem; color: var(--cw-bone-2); margin-bottom: 3px; }
.cw-ophoging b { color: var(--cw-amber); }

/* ---------------- de verdieping ---------------- */
.cw-verdieping { margin-top: 24px; }
/* De tekening in de verdieping: een meelopende strook boven de groepen, niet
   een beeld dat het halve scherm vult voordat je bij de eerste groep bent. */
.cw-beeldstrook {
  position: sticky; top: 0; z-index: 5;
  background: var(--cw-ink); padding: 10px 0;
}
/* Op een breed scherm zou een strook over de volle breedte alsnog een halve
   schermhoogte kosten. Hij mag meekijken, niet in de weg zitten. */
.cw-beeldstrook .cw-beeld { max-width: 460px; margin: 0 auto; }
@media (max-width: 899px) { .cw-beeldstrook .cw-beeld { max-width: none; } }
@media (max-width: 899px) { .cw-beeldstrook { padding-top: 0; } }
.cw-groep { border-top: 1px solid var(--cw-line); }
.cw-groepkop {
  width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
  color: var(--cw-bone); padding: 16px 0;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.1rem;
}
.cw-groepkop::before { content: "+ "; color: var(--cw-amber); }
.cw-groep.open .cw-groepkop::before { content: "− "; }
.cw-groepvak { padding-bottom: 18px; }

/* ---------------- startscherm ---------------- */
.cw-start, .cw-voorbeelden { margin-top: clamp(20px, 3vw, 36px); }
.cw-ingangen {
  display: grid; gap: 12px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cw-ingang {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px;
  color: var(--cw-bone); padding: 20px 18px; min-width: 0; position: relative;
  transition: border-color .16s, background .16s;
}
.cw-ingang:hover { border-color: var(--cw-amber); background: rgba(237, 163, 27, .07); }
.cw-ingang b { display: block; font-family: Archivo, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; }
.cw-ingang i { display: block; font-style: normal; color: var(--cw-grey); font-size: .88rem; line-height: 1.4; margin-top: 4px; }
.cw-ingang.straks { opacity: .55; cursor: default; }
.cw-ingang.straks:hover { border-color: var(--cw-line); background: var(--cw-ink-2); }
.cw-straks {
  position: absolute; top: 12px; right: 12px;
  font-family: Archivo, sans-serif; font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cw-grey);
  border: 1px solid var(--cw-line); border-radius: 3px; padding: 3px 6px;
}

.cw-pakketten, .cw-vgrid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cw-pakket {
  background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px;
  padding: 18px; position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cw-pakket.top { border-color: var(--cw-amber); background: rgba(237, 163, 27, .06); }
.cw-pakket b { font-family: Archivo, sans-serif; font-size: 1.1rem; font-weight: 700; }
.cw-pakket i { font-style: normal; color: var(--cw-grey); font-size: .88rem; line-height: 1.45; }
.cw-pvanaf { font-family: Archivo, sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.cw-vlag {
  position: absolute; top: -9px; left: 16px;
  font-family: Archivo, sans-serif; font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--cw-amber); color: var(--cw-ink); border-radius: 3px; padding: 3px 7px;
}
.cw-voorbeeld {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px;
  color: var(--cw-bone); padding: 16px; min-width: 0;
}
.cw-voorbeeld:hover { border-color: var(--cw-amber); }
.cw-voorbeeld b { display: block; font-family: Archivo, sans-serif; font-size: 1rem; font-weight: 700; }
.cw-voorbeeld i { display: block; font-style: normal; color: var(--cw-grey); font-size: .85rem; margin-top: 3px; }

/* ---------------- werkblad: keuzes links, beeld rechts ---------------- */
.cw-werkblad {
  display: grid; gap: clamp(16px, 2.6vw, 30px);
  grid-template-columns: 1fr; margin-top: clamp(20px, 3vw, 34px);
}
@media (min-width: 1000px) {
  .cw-werkblad { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .cw-beeldkolom { position: sticky; top: 86px; }
}
.cw-keuzes { display: grid; gap: 12px; min-width: 0; }
.cw-beeldkolom { min-width: 0; }
/* Op een smal scherm hoort de tekening bóven de keuzes. */
@media (max-width: 999px) { .cw-beeldkolom { order: -1; } }

.cw-beeld {
  background: var(--cw-ink-2); border: 1px solid var(--cw-line);
  border-radius: 6px; padding: 10px; overflow: hidden;
}
.cw-beeld svg { width: 100%; height: auto; display: block; border-radius: 3px; }

/* De animaties van de tekening staan in tekening.css, omdat de
   presentatiestand op de site ze ook nodig heeft zonder de rest van deze
   opmaak te laden. Laad tekening.css voor designer.css. */


/* ---------------- de stappen ---------------- */
.cw-stap {
  background: var(--cw-ink-2); border: 1px solid var(--cw-line);
  border-radius: 6px; padding: clamp(14px, 2.2vw, 20px); min-width: 0;
}
.cw-stapkop { display: flex; align-items: center; gap: 10px; }
.cw-nr {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 4px; background: var(--cw-ink-3); border: 1px solid var(--cw-line);
  font-family: Archivo, sans-serif; font-weight: 800; font-size: .82rem; color: var(--cw-amber);
}
.cw-stapkop h3 { font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 700; letter-spacing: -.015em; }
.cw-stap > .cw-hint { margin-top: 6px !important; }

.cw-tegels {
  display: grid; gap: 8px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cw-tegels.cw-smal { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.cw-tegels.cw-tv { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.cw-tegel {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  background: var(--cw-ink-3); border: 1px solid var(--cw-line); border-radius: 5px;
  color: var(--cw-bone); padding: 10px 12px; min-width: 0;
  transition: border-color .16s, background .16s;
}
.cw-tegel b {
  display: block; font-family: Archivo, sans-serif; font-size: .94rem; font-weight: 700;
  letter-spacing: -.01em; overflow-wrap: anywhere;
}
.cw-tegel i {
  display: block; font-style: normal; color: var(--cw-grey);
  font-size: .8rem; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere;
}
.cw-tegel:hover { border-color: rgba(243, 241, 236, .3); }
.cw-tegel.aan { background: rgba(237, 163, 27, .12); border-color: var(--cw-amber); }
.cw-tegel.cw-kanniet { opacity: .45; cursor: default; }
.cw-tegel.cw-kanniet:hover { border-color: var(--cw-line); }
.cw-tegel.aan b { color: var(--cw-amber); }
.cw-tvtegel b { font-size: 1.15rem; }
.cw-verschil { color: var(--cw-bone-2) !important; font-variant-numeric: tabular-nums; }

.cw-schuifrij { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cw-schuifwaarde { font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.cw-schuif {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin-top: 8px;
  background: var(--cw-ink-3); border-radius: 2px; outline-offset: 6px;
}
.cw-schuif::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--cw-amber); border: 0; cursor: pointer;
}
.cw-schuif::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--cw-amber); border: 0; cursor: pointer;
}

.cw-kleuren { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-kleur {
  width: 34px; height: 34px; border-radius: 5px; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--cw-line) inset;
}
.cw-kleur.aan { border-color: var(--cw-amber); }
.cw-kleur-wand { background: repeating-linear-gradient(45deg, #4A4642 0 5px, #35322F 5px 10px); }

.cw-sfeer { display: flex; gap: 6px; flex-wrap: wrap; }
.cw-sfeerknop {
  appearance: none; cursor: pointer; font: inherit;
  background: var(--cw-ink-3); border: 1px solid var(--cw-line); border-radius: 5px;
  color: var(--cw-bone); padding: 9px 16px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .9rem;
}
.cw-sfeerknop.aan { background: var(--cw-amber); border-color: var(--cw-amber); color: var(--cw-ink); }

.cw-advies {
  margin-top: 12px !important; font-size: .88rem; line-height: 1.5;
  border-left: 2px solid var(--cw-line); padding-left: 11px; color: #C7C1B8;
}
.cw-advies.goed { border-color: var(--cw-groen); }
.cw-advies.let { border-color: var(--cw-amber); }

/* meelopend totaal onder de tekening */
.cw-totaal {
  margin-top: 10px; background: var(--cw-ink-2);
  border: 1px solid var(--cw-amber); border-radius: 6px; padding: 14px 16px;
}
.cw-tlabel {
  display: block; font-family: Archivo, sans-serif; font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cw-grey);
}
.cw-tbedrag {
  display: block; margin-top: 3px;
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.028em; line-height: 1.1;
  overflow-wrap: anywhere;
}
.cw-tbedrag.cw-geen { font-size: 1.2rem; color: var(--cw-bone-2); }
.cw-tander {
  display: block; margin-top: 2px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .98rem; color: var(--cw-bone-2);
}
.cw-tander .cw-btwlbl { display: inline; }
.cw-tmontage { display: block; margin-top: 6px; font-size: .85rem; color: var(--cw-grey); }

/* ---------------- uitslag ---------------- */
.cw-uitslag { margin-top: clamp(24px, 4vw, 44px); }

.cw-waarschuwing, .cw-bevestiging {
  border-radius: 6px; padding: 14px 16px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.cw-waarschuwing { background: rgba(224, 103, 74, .1); border: 1px solid rgba(224, 103, 74, .45); }
.cw-bevestiging { background: rgba(127, 168, 107, .1); border: 1px solid rgba(127, 168, 107, .4); }
.cw-waarschuwing b { font-family: Archivo, sans-serif; font-size: .98rem; color: var(--cw-rood); }
.cw-bevestiging b { font-family: Archivo, sans-serif; font-size: .98rem; color: var(--cw-groen); }
.cw-waarschuwing span, .cw-bevestiging span { font-size: .92rem; line-height: 1.5; color: #E5DDD6; }
.cw-adviesknop, .cw-budgetknop, .cw-vknop {
  appearance: none; cursor: pointer; margin-top: 8px;
  background: var(--cw-amber); color: var(--cw-ink); border: 0; border-radius: 5px;
  padding: 10px 16px; font-family: Archivo, sans-serif; font-weight: 700; font-size: .9rem;
}
.cw-adviesknop:hover, .cw-budgetknop:hover, .cw-vknop:hover { background: var(--cw-amber-d); }

.cw-kaart { background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px; padding: clamp(16px, 2.6vw, 26px); }
.cw-kaartkop {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--cw-line); padding-bottom: 16px;
}
.cw-nummer { font-family: Archivo, sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.cw-prijsvak { text-align: right; min-width: 0; }
.cw-bedrag {
  display: block; font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -.028em; line-height: 1.1;
  overflow-wrap: anywhere;
}
.cw-bedrag.cw-geen { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--cw-bone-2); }
.cw-ander {
  display: block; font-family: Archivo, sans-serif; font-weight: 700;
  font-size: 1rem; color: var(--cw-bone-2); margin-top: 3px;
}
.cw-btwlbl { display: block; font-size: .76rem; color: var(--cw-grey); line-height: 1.35; }

.cw-samenvatting { margin: 16px 0 0; display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cw-samenvatting dt {
  font-family: Archivo, sans-serif; font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cw-grey);
}
.cw-samenvatting dd { margin: 1px 0 0; font-size: .93rem; line-height: 1.4; }

.cw-opbouw { margin-top: 18px; border-top: 1px solid var(--cw-line); padding-top: 14px; }
.cw-opbouw summary {
  cursor: pointer; font-family: Archivo, sans-serif; font-weight: 700; font-size: .95rem; color: var(--cw-amber);
}
.cw-posten { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.cw-posten li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--cw-line-2); padding-bottom: 7px;
}
.cw-postnaam { min-width: 0; font-size: .92rem; }
.cw-postnaam i { display: block; font-style: normal; color: var(--cw-grey); font-size: .79rem; line-height: 1.35; }
.cw-posten li b { flex: 0 0 auto; font-family: Archivo, sans-serif; font-weight: 700; text-align: right; }
.cw-montage b { color: var(--cw-grey); font-weight: 400; font-family: inherit; font-size: .88rem; }

/* Het budgetvak was een flexkolom met align-items:flex-start; daardoor kromp
   het tegelraster tot één smalle kolom. En de b-regel kleurde élk vet woord
   erbinnen amber, dus ook de labels van de tegels. Allebei van vóór de
   ombouw. */
.cw-budgetvak {
  margin-top: 16px; background: var(--cw-ink-2);
  border: 1px solid var(--cw-amber); border-radius: 6px;
  padding: clamp(16px, 2.4vw, 22px);
}
.cw-budgetvak .cw-h3 { margin-top: 0 !important; }
.cw-budgetvak .cw-tegels { width: 100%; }
.cw-budgetvak .cw-afraad b { font-family: Archivo, sans-serif; font-size: 1rem; color: var(--cw-rood); }
.cw-budgetvak .cw-afraad span { font-size: .92rem; line-height: 1.5; }

.cw-varianten {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cw-variant {
  background: var(--cw-ink-2); border: 1px solid var(--cw-line); border-radius: 6px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0;
}
.cw-variant.top { border-color: var(--cw-amber); background: rgba(237, 163, 27, .06); }
.cw-vlabel {
  font-family: Archivo, sans-serif; font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cw-grey);
}
.cw-variant.top .cw-vlabel { color: var(--cw-amber); }
.cw-vbedrag {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.3rem;
  letter-spacing: -.02em; overflow-wrap: anywhere;
}
.cw-vander { font-size: .84rem; color: var(--cw-grey); }
.cw-variant i { font-style: normal; color: var(--cw-bone-2); font-size: .88rem; line-height: 1.4; }
.cw-vstappen { font-size: .8rem; color: var(--cw-grey); line-height: 1.4; }

.cw-fotos {
  margin-top: 12px; background: var(--cw-ink-2); border: 1px solid var(--cw-line);
  border-radius: 6px; padding: 16px;
}
.cw-fotos b { display: block; font-family: Archivo, sans-serif; font-size: 1rem; margin-bottom: 6px; }
.cw-fotos p { font-size: .92rem; line-height: 1.5; color: #C7C1B8; }
.cw-fotos ul { margin: 10px 0; padding-left: 18px; }
.cw-fotos li { font-size: .9rem; color: var(--cw-bone-2); margin-bottom: 3px; }

/* de afronding: drie deuren, geen duwtje */
.cw-afronding {
  margin-top: 12px; background: var(--cw-ink-2); border: 1px solid var(--cw-line);
  border-radius: 6px; padding: clamp(16px, 2.6vw, 24px);
}
.cw-afronding .cw-h3 { margin-top: 0 !important; }
.cw-deuren {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cw-deur {
  appearance: none; cursor: pointer; text-align: left; font: inherit;
  background: var(--cw-ink-3); border: 1px solid var(--cw-line); border-radius: 5px;
  color: var(--cw-bone); padding: 14px 16px; min-width: 0; margin: 0;
  transition: border-color .16s, background .16s;
}
.cw-deur:hover { border-color: var(--cw-amber); background: rgba(237, 163, 27, .07); }
.cw-deur b { display: block; font-family: Archivo, sans-serif; font-size: 1rem; font-weight: 700; }
.cw-deur i { display: block; font-style: normal; color: var(--cw-grey); font-size: .85rem; line-height: 1.4; margin-top: 3px; }
.cw-kijken { margin-top: 12px !important; color: var(--cw-grey); font-size: .9rem; }

.cw-keuzehulp { margin-top: clamp(20px, 3vw, 36px); }
.cw-keuzehulp .cw-stap { margin-top: 12px; }
.cw-keuzehulp .cw-lead { margin-bottom: 4px; }

.cw-verder[disabled] { opacity: .45; cursor: default; }
.cw-verder[disabled]:hover { background: var(--cw-amber); }

.cw-verder, .cw-terug {
  display: inline-block; margin-top: 18px; cursor: pointer; text-decoration: none;
  border: 0; border-radius: 5px; padding: 13px 22px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .98rem; letter-spacing: -.01em;
}
.cw-verder { background: var(--cw-amber); color: var(--cw-ink); }
.cw-verder:hover { background: var(--cw-amber-d); }
.cw-terug { background: transparent; color: var(--cw-grey); border: 1px solid var(--cw-line); margin-left: 8px; }
.cw-terug:hover { color: var(--cw-bone); border-color: var(--cw-bone-2); }

/* ---------------- smal scherm ---------------- */
@media (max-width: 460px) {
  .cw { font-size: 16px; }
  .cw-tegels { grid-template-columns: 1fr 1fr; }
  .cw-tegels.cw-smal, .cw-tegels.cw-tv { grid-template-columns: repeat(3, 1fr); }
  .cw-ingangen, .cw-pakketten, .cw-vgrid, .cw-varianten, .cw-samenvatting { grid-template-columns: 1fr; }
  .cw-kaartkop { flex-direction: column; }
  .cw-prijsvak { text-align: left; }
}
@media (max-width: 340px) {
  .cw-tegels, .cw-tegels.cw-smal, .cw-tegels.cw-tv { grid-template-columns: 1fr; }
}

/* Bewaar je ontwerp: één knop en één regel eronder. Hoort bij [data-bewaar]
   in designer.js; stond tot 18 september 2026 alleen in de werkmap. */
.cw-bewaar {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cw-line-2);
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.cw-bewaar .cw-hint { flex: 1 1 260px; min-width: 0; }
.cw-adres { color: var(--cw-bone-2); overflow-wrap: anywhere; }