/* /werkgebied/: alleen wat site.css niet heeft. Tokens uit site.css. */

/* Hero: tekst links, radar rechts, op de donkere ondergrond. */
.hero--gebied .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.hero__radar { position: relative; z-index: 1; }
.hero--gebied .circuit { opacity: .5; }
.hero--gebied .radar { max-width: 500px; }
.hero--gebied .radar .ring { stroke: var(--rule-nacht); }
.hero--gebied .radar .ring--30 { stroke: var(--oranje); fill: rgba(255, 133, 20, .07); }
.hero--gebied .radar .plaats circle { fill: var(--op-nacht); }
.hero--gebied .radar .plaats text { fill: var(--op-nacht-2); }
.hero--gebied .radar .thuis text { fill: var(--op-nacht); }
.hero--gebied .radar text[style] { fill: var(--goud) !important; }   /* "30 km"-label, inline gezet door bouw.py */

/* Plaatsen als chips op donker. */
.hero--gebied .werkgebied__plaatsen { margin: var(--sp-lg) 0 0; max-width: 60ch; }
.hero--gebied .werkgebied__plaatsen li { background: transparent; color: var(--op-nacht); border-color: var(--rule-nacht); }
.hero--gebied .werkgebied__plaatsen li:first-child { background: var(--oranje); color: var(--ink); border-color: var(--oranje); }
@media (max-width: 900px) {
  .hero--gebied .hero__grid { grid-template-columns: 1fr; }
  .hero--gebied .radar { max-width: 420px; }
}

/* Binnen / buiten 30 km. */
.vergelijk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); }
.vergelijk h3 { font: 500 .8rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--oranje-tekst); margin: 0 0 .6rem; }
.vergelijk .specs li > span:first-child { color: var(--ink-2); }
.vergelijk .specs li > span:last-child { text-align: right; font-weight: 600; }
.vergelijk__noot { margin-top: var(--sp-lg); color: var(--muted); max-width: 66ch; }
@media (max-width: 620px) { .vergelijk { grid-template-columns: 1fr; } }

/* Adresblok in de donkere werkplaats-sectie. */
.adresblok { margin: var(--sp-xl) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: .9rem 1.6rem; }
.adresblok dt { font: 500 .78rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--goud); margin: 0; }
.adresblok dd { margin: 0; }
.adresblok .tel-nr { font: 500 1.25rem var(--mono); color: var(--op-nacht); text-decoration: none; }
.adresblok .tel-nr:hover { color: var(--goud); }
@media (max-width: 420px) { .adresblok { grid-template-columns: 1fr; gap: .2rem; } .adresblok dd { margin-bottom: .8rem; } }