.service-hero .button { margin-top:2rem; }
.section-title { font-size:clamp(2.1rem,4vw,3.8rem); margin-bottom:2rem; }
.area-intro { max-width:50rem; margin-bottom:2rem; }
.area-layout { display:grid; gap:2.5rem; align-items:start; }
.surface-sand { background:var(--sand); }
.area-map { position:relative; width:100%; aspect-ratio:544/442; background:var(--paper); border:1px solid var(--line-control); }
.area-map img { width:100%; height:100%; display:block; object-fit:contain; }
.map-country { position:absolute; top:6%; font-size:var(--text-sm); }
.map-country--nl { left:5%; }.map-country--de { right:5%; }
.map-city { position:absolute; left:var(--x); top:var(--y); transform:translate(-4px,-50%); display:flex; align-items:center; gap:0.3rem; font-size:0.75rem; font-weight:600; color:var(--ink); text-shadow:0 0 3px var(--cream),0 0 3px var(--cream); pointer-events:none; }
.map-city::before { content:""; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--ink); flex:none; }
.map-dot { position:absolute; left:var(--x); top:var(--y); width:0.7rem; height:0.7rem; transform:translate(-50%,-50%); border-radius:50%; border:2px solid var(--cream); background:var(--cognac); box-shadow:0 0 0 1px var(--ink); pointer-events:none; }
.map-zutphen { position:absolute; left:34.6%; top:52.3%; transform:translate(12px,-50%); padding:0.15rem 0.35rem; background:var(--ink); color:var(--cream); font-size:0.75rem; }
.map-region { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); min-height:44px; min-width:44px; padding:0.4rem; border:1px solid var(--cognac); background:var(--cream); color:var(--ink); font-size:clamp(0.7rem,1.4vw,0.9rem); font-weight:600; }
.map-region[aria-pressed="true"] { background:var(--ink); color:var(--cream); }
@media(prefers-reduced-motion:no-preference){[data-effects="on"] .map-region{transition:background-color 180ms,color 180ms;}}
.area-layout figcaption { margin-top:0.75rem; }
.tariff-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.tariff-table th,.tariff-table td { text-align:left; padding:1rem 0.75rem; vertical-align:top; border-bottom:1px solid var(--line-control); overflow-wrap:anywhere; }
.tariff-table td:nth-child(2) { white-space:nowrap; }
.tariff-table th:first-child { width:30%; }.tariff-table td:nth-child(2){width:16%;}
.purchase-block { max-width:55rem; }.purchase-block p { margin-block:1.25rem; }
@media(max-width:39.999rem){
 .tariff-table,.tariff-table tbody,.tariff-table tr,.tariff-table th,.tariff-table td{display:block;width:100%!important;}
 .tariff-table thead { display:none; }
 .tariff-table tr { padding-block:1rem; border-bottom:1px solid var(--line-control); }
 .tariff-table th,.tariff-table td { padding:0.25rem 0;border:0; }
 .tariff-table td:nth-child(2) { font-weight:700; }
 .map-zutphen { font-size:0.62rem; }
 .map-city { font-size:0.65rem; }
 .map-region { font-size:0.65rem;padding:0.25rem;max-width:3.6rem;line-height:1.15;left:var(--mx,var(--x));top:var(--my,var(--y)); }
}
@media(min-width:64rem){.area-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);} }
@media(max-width:23rem){ .map-region { font-size:0.58rem; max-width:3.1rem; padding:0.2rem; } .map-zutphen { font-size:0.56rem; } .map-city { font-size:0.6rem; } }
