/* OZB 2027 — uitleg, grafieken en rekentool. Alleen geladen op ozb-2027.html. */
.info-layout > .artikel, .reken > * { min-width: 0; }
.sw { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin: 0 6px 0 14px; }
.sw:first-child { margin-left: 0; }
.sw--eig { background: var(--blauw); }
.sw--geb { background: var(--lucht); }
.sw--k26 { background: var(--grijs); }
.sw--k27 { background: var(--blauw); }
.sw--gem { width: 0; height: 14px; border-left: 2px dashed var(--inkt); }
.artikel .ozb-bron { font-size: 14px; color: var(--grijs); margin-top: 16px; }

.ozb-tabel { margin-top: 28px; background: var(--wit); border: 1px solid var(--lijn); }
.ozb-tabel__rij { display: grid; grid-template-columns: 1.1fr .8fr .8fr 2fr; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--lijn); align-items: baseline; }
.ozb-tabel__rij:first-child { border-top: 0; }
.ozb-tabel__rij--kop { background: var(--papier-2); font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
.ozb-tabel__rij strong { font-family: var(--font-kop); }
.ozb-tabel__rij em { font-style: normal; font-weight: 700; color: var(--blauw); margin-left: 6px; white-space: nowrap; }

/* grafieken algemeen */
.trend, .regio { margin: 32px 0 0; background: var(--wit); border: 1px solid var(--lijn); padding: clamp(18px, 3vw, 32px); }
.trend figcaption, .regio figcaption { display: grid; gap: 4px; margin-bottom: 14px; }
.trend figcaption strong, .regio figcaption strong { font: 800 20px/1.2 var(--font-kop); }
.trend figcaption span, .regio figcaption span { font-size: 14px; color: var(--grijs); }
.trend__legenda, .regio__legenda { font-size: 14px; color: var(--grijs); }

/* verloop Koggenland */
.trend__grafiek { --gap: 8px; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); height: 320px; margin-top: 20px; padding-top: 34px; }
.trend__jaar { position: relative; z-index: 1; display: grid; grid-template-rows: 1fr auto; text-align: center; }
.trend__jaar > span { font: 600 13px/1 var(--font-mono); color: var(--grijs); padding-top: 10px; border-top: 2px solid var(--inkt); }
.trend__jaar.is-nieuw > span { color: var(--blauw); font-weight: 700; }
.trend__staven { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.trend__staaf { position: relative; width: min(34px, 42%); height: var(--h); }
.trend__staaf b { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); font: 600 12px/1 var(--font-mono); color: var(--inkt); white-space: nowrap; }
.trend__jaar:not(.is-nieuw) .trend__staaf { opacity: .6; }
.trend__band {
  position: absolute; z-index: 0; top: 0; bottom: 23px;
  left: calc((100% - 5 * var(--gap)) / 6 * 2 + 2 * var(--gap) - var(--gap) / 2);
  width: calc((100% - 5 * var(--gap)) / 6 * 3 + 3 * var(--gap));
  background: var(--geel-zacht); border-top: 3px solid var(--geel);
}
.trend__band span { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font: 700 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nacht); }

/* keuzeknoppen */
.keuze { display: inline-flex; flex-wrap: wrap; margin-top: 20px; border: 2px solid var(--inkt); }
.keuze__knop { border: 0; background: transparent; padding: 11px 18px; font: 700 14.5px/1.2 var(--font-kop); color: var(--inkt); cursor: pointer; }
.keuze__knop + .keuze__knop { border-left: 2px solid var(--inkt); }
.keuze__knop:hover { background: var(--papier-2); }
.keuze__knop.is-actief { background: var(--inkt); color: var(--wit); }

/* regio */
.regio__lijst { --naam: min(230px, 38%); --kol: 14px; position: relative; display: grid; gap: 6px; margin: 8px 0 18px; padding-bottom: 28px; }
.regio__rij { display: grid; grid-template-columns: var(--naam) 1fr; gap: var(--kol); align-items: center; font-size: 15px; }
.regio__naam { text-align: right; color: var(--inkt); line-height: 1.2; }
.regio__spoor { position: relative; display: flex; align-items: center; gap: 8px; height: 26px; }
.regio__spoor i { display: block; height: 100%; background: #c9cfdb; transition: width .5s var(--ease); }
.regio__spoor b { position: relative; z-index: 2; background: var(--wit); padding: 3px 4px 3px 0; font: 600 13px/1 var(--font-mono); white-space: nowrap; color: var(--grijs); }
.regio__rij.is-k26 .regio__naam, .regio__rij.is-k27 .regio__naam { font-weight: 700; }
.regio__rij.is-k26 i { background: var(--grijs); }
.regio__rij.is-k27 i { background: var(--blauw); }
.regio__rij.is-k26 b, .regio__rij.is-k27 b { color: var(--inkt); }
.regio__gem { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--naam) + var(--kol)); right: 0; pointer-events: none; }
.regio__gem::before { content: ""; position: absolute; top: 0; bottom: 24px; left: var(--x); border-left: 2px dashed var(--inkt); }
.regio__gem span { position: absolute; bottom: 0; left: var(--x); transform: translateX(-50%); font: 600 12px/1 var(--font-mono); white-space: nowrap; background: var(--wit); padding: 2px 4px; }
.artikel .regio__tekst { margin-top: 20px; font-size: 18px; color: var(--inkt); }

/* rekentool */
.reken { display: grid; grid-template-columns: 1.15fr 1fr; margin-top: 28px; background: var(--wit); border: 1px solid var(--lijn); }
.reken__invoer { padding: clamp(18px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.reken__veld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.reken__veld > span:first-child, .reken__rol legend { font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.reken__euro { display: flex; align-items: center; border: 2px solid var(--inkt); background: var(--wit); }
.reken__euro b { padding: 0 4px 0 16px; font: 800 28px/1 var(--font-kop); color: var(--blauw); }
.reken__euro input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 14px 16px 14px 6px; font: 800 28px/1 var(--font-kop); letter-spacing: -.02em; color: var(--inkt); background: transparent; }
.reken__euro:focus-within { outline: 3px solid var(--geel); outline-offset: 2px; }
.reken__schuif { width: 100%; accent-color: var(--blauw); }
.reken__snel { display: flex; flex-wrap: wrap; gap: 6px; }
.reken__snel button { border: 1px solid var(--lijn); background: var(--papier); padding: 7px 11px; font: 600 13px/1 var(--font-mono); cursor: pointer; color: var(--inkt); }
.reken__snel button:hover { border-color: var(--blauw); color: var(--blauw); }
.reken__rol { border: 0; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; min-width: 0; }
.reken__rol legend { margin-bottom: 10px; padding: 0; }
.reken__rol label { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--lijn); cursor: pointer; }
.reken__rol label:has(input:checked) { border-color: var(--blauw); box-shadow: inset 4px 0 0 var(--blauw); background: #f3f7fd; }
.reken__rol input { accent-color: var(--blauw); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.reken__rol span { display: grid; line-height: 1.3; }
.reken__rol strong { font-family: var(--font-kop); }
.reken__rol small { color: var(--grijs); font-size: 13.5px; }
.reken__uitkomst { background: var(--nacht); color: var(--wit); padding: clamp(18px, 3vw, 32px); display: grid; align-content: start; }

.reken__of { display: grid; gap: 8px; padding-top: 6px; }
.reken__of > span { font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.reken__of .keuze { margin-top: 0; justify-self: start; }
.reken__of small { color: var(--grijs); font-size: 13.5px; line-height: 1.4; }

/* twee oorzaken */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.twee__kaart { background: var(--wit); border: 1px solid var(--lijn); border-top: 5px solid var(--blauw); padding: 24px; }
.twee__kaart--biz { border-top-color: var(--geel); background: var(--geel-zacht); }
.twee__nr { display: block; font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); margin-bottom: 12px; }
.twee__kaart strong { display: block; font: 800 21px/1.15 var(--font-kop); color: var(--inkt); margin-bottom: 10px; }
.artikel .twee__kaart p { margin: 0; font-size: 15.5px; }

/* uitkomst in twee stappen */
.laag { padding: 4px 0 20px; }
.laag__kop { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.laag__kop i { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border: 1px solid currentColor; font-style: normal; font-weight: 700; letter-spacing: 0; }
.laag__rij { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.laag__rij small { display: block; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.laag__rij b { font: 800 clamp(24px, 2.4vw, 30px)/1 var(--font-kop); letter-spacing: -.02em; }
.laag__pijl { font-size: 22px; color: rgba(255,255,255,.45); padding-bottom: 2px; }
.artikel .laag__meer { margin: 14px 0 0; color: rgba(255,255,255,.8); font-size: 15px; }
.laag__meer strong { color: var(--wit); font: 800 19px/1 var(--font-kop); margin-right: 4px; }
.laag--biz { margin: 0 calc(-1 * clamp(18px, 3vw, 32px)); padding: 22px clamp(18px, 3vw, 32px); background: rgba(255,212,0,.1); border-top: 3px solid var(--geel); border-bottom: 1px solid rgba(255,212,0,.25); }
.laag--biz .laag__kop { color: var(--geel); }
.laag__groot { display: block; font: 800 clamp(40px, 4.6vw, 58px)/1 var(--font-kop); letter-spacing: -.03em; color: var(--geel); }
.artikel .laag__sub { margin: 8px 0 0; color: rgba(255,255,255,.8); font-size: 15px; }
.laag__split { list-style: none; margin: 14px 0 0; padding: 0; }
.laag__split[hidden] { display: none; }
.artikel .laag__split li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 14.5px; color: rgba(255,255,255,.8); }
.laag__split b { color: var(--wit); }
.artikel .laag__deel { margin: 20px 0 0; font-size: 15px; color: rgba(255,255,255,.9); line-height: 1.5; }

/* vergelijking zonder / met BIZ */
.vergelijk { grid-column: 1 / -1; background: var(--wit); border-top: 1px solid var(--lijn); padding: clamp(18px, 3vw, 32px); }
.artikel .vergelijk__titel { margin: 0; font-size: 20px; }
.artikel .vergelijk__voor { margin: 4px 0 18px; font-size: 14px; color: var(--grijs); }
.vergelijk__rij { display: grid; grid-template-columns: 110px 1fr 90px; gap: 14px; align-items: center; padding: 8px 0; }
.vergelijk__naam { font: 800 17px/1.1 var(--font-kop); }
.vergelijk__naam small { display: block; font: 500 13px/1.3 var(--font-tekst); color: var(--grijs); }
.vergelijk__spoor { display: flex; gap: 2px; height: 34px; background: var(--papier-2); }
.vergelijk__spoor i { display: block; height: 100%; transition: width .5s var(--ease); }
.vergelijk__rij b { font: 800 19px/1 var(--font-kop); text-align: right; }
.vergelijk__rij.is-met b { color: var(--blauw); }
.d-oud { background: #b9c0cc; }
.vergelijk .d-ozb, .vergelijk__legenda .d-ozb { background: var(--blauw); }
.vergelijk .d-biz, .vergelijk__legenda .d-biz { background: var(--geel); }
.vergelijk__legenda { margin-top: 14px; font-size: 14px; color: var(--grijs); }
.vergelijk__legenda [hidden] { display: none; }
#opbrengst h3 { margin-top: 36px; }
#opbrengst .drie { margin-top: 16px; }
.opbouw__uitleg { margin-top: 20px; font-weight: 500; }

.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); margin-top: 8px; }
.drie__kaart { background: var(--wit); padding: 24px; }
.drie__kaart span { display: block; font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); margin-bottom: 12px; }
.drie__kaart strong { display: block; font: 800 22px/1.1 var(--font-kop); color: var(--blauw); margin-bottom: 10px; }
.artikel .drie__kaart p { font-size: 15px; margin: 0; }
.drie__kaart--accent { background: var(--blauw); }
.drie__kaart--accent span { color: var(--geel); }
.artikel .drie__kaart--accent strong, .artikel .drie__kaart--accent p { color: var(--wit); }

@media (max-width: 1100px) {
  .drie { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .twee { grid-template-columns: 1fr; }
  .reken { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vergelijk__rij { grid-template-columns: 1fr auto; row-gap: 6px; }
  .vergelijk__spoor { grid-column: 1 / -1; grid-row: 2; height: 26px; }
  .ozb-tabel__rij { grid-template-columns: 1fr 1fr 1fr; padding: 14px 16px; }
  .ozb-tabel__rij > :last-child { grid-column: 1 / -1; font-size: 15px; }
  .ozb-tabel__rij--kop > :last-child { display: none; }
  .trend__grafiek { --gap: 3px; height: 280px; }
  .trend__band span { font-size: 10px; }
  .trend__staaf { width: 44%; }
  .trend__staaf b { font-size: 9.5px; letter-spacing: -.04em; }
  .regio__lijst { --naam: 36%; --kol: 8px; }
  .regio__rij { font-size: 13px; }
  .regio__spoor b { font-size: 11px; }
  .keuze__knop { padding: 10px 12px; font-size: 13.5px; }
}