/* =====================================================================
   Nieuwsuitjestad 2.0 — design system
   Mobile-first. Geen framework, geen buildstap.

   Opbouw: eerst de basis (tokens, typografie, componenten), daarna de
   huisstijl per onderwerp (koppen "HUISSTIJL — ..."). Die volgorde is
   bewust niet omgegooid: latere regels overschrijven eerdere, en het
   verplaatsen van regels verandert wat er op het scherm staat.

   Opgeschoond met een cascadevergelijking: overschreven declaraties en
   regels voor klassen die nergens bestaan zijn weg, en voor elke pagina
   is gecontroleerd dat elk element precies dezelfde stijl houdt.

   Nieuwe regels: bij de huisstijlsectie van het onderwerp, niet onderaan.
   ===================================================================== */

:root {
  /* Alle ontwerptokens op één plek. Donkere modus en schermbreedtes
     passen een paar ervan aan in @media-blokken verderop. */
  /* Datacategorieën: functioneel, niet decoratief. Deze kleuren betekenen
     iets en staan overal hetzelfde, ook in de wrapped-donut. */
  --c-p2000: #EF4444;
  --c-p2000-tint: #FEECEC;
  --c-traffic: #F97316;
  --c-traffic-tint: #FEF0E4;
  --c-event: #22C55E;
  --c-event-tint: #E8FAEF;
  --c-weather: #FBBF24;
  --c-weather-tint: #FEF6E0;
  --c-knrm: #0369A1;
  --c-knrm-tint: #E6F2FA;
  --c-waarschuwing: #EF4444;
  --c-waarschuwing-tint: #FEECEC;
  --c-beving: #78350F;
  --c-beving-tint: #F5EDE4;
  --c-outage: #FBBF24;
  --c-outage-tint: #FDF6E3;
  --c-bekendmaking: #475569;
  --c-bekendmaking-tint: #EEF1F6;
  --c-heli: #8B5CF6;
  --c-heli-tint: #F0E9FE;
  --c-train: #2563EB;
  --c-train-tint: #EFF4FE;
  --c-flight: #8B5CF6;
  --c-flight-tint: #F0E9FE;

  /* Ritme en maat */
  --gap: 16px;
  --pad: 16px;
  --max: 1200px;
  --blok-gap: 20px;
  --blok-pad: 22px;

  /* Merk: indigo. --paars valt ermee samen. --c-train blijft blauw:
     dat is een categorie, geen merkkleur. */
  --brand: #5B46E0;
  --brand-dark: #4934C4;
  --brand-tint: #F1EDFE;
  --brand-zacht: #EDE9FE;
  --paars: #5B46E0;
  --paars-donker: #4934C4;
  --paars-tint: #F1EDFE;

  /* Vlakken, lijnen en tekst */
  --bg: #F6F8FC;
  --surface: #FFFFFF;
  --surface-alt: #F7F9FC;
  --line: #E8ECF3;
  --line-strong: #D6DDE9;
  --kaart-rand: #E8ECF3;
  --ink: #101828;
  --ink-soft: #566076;
  --ink-faint: #8A94A8;

  /* Donker vlak: de footer */
  --donker: #0E1628;
  --donker-2: #16213A;
  --donker-tekst: #A7B2C7;
  --donker-lijn: rgba(255,255,255,.09);

  /* Vorm */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
  --shadow-lg: 0 10px 34px rgba(16, 24, 40, .10);
  --kaart-schaduw: 0 1px 2px rgba(16, 24, 40, .04),
                   0 8px 24px rgba(16, 24, 40, .05);

  /* Hero en strook: lichtblauw, zoals in het ontwerp. De hero loopt van
     links vol lichtblauw naar de foto rechts. */
  --hero-bg: #EAF0FA;
  --hero-bg-licht: #F1F5FC;
  --strook-bg: #F5F8FE;
  --strook-lijn: #DFE7F4;

  /* Overig */
  --header-h: 72px;
  --font: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kaart-h: 560px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;

  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px; /* ruimte voor bottom nav op mobiel */
}

img { max-width: 100%; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 12px; top: 12px; z-index: 999;
  background: var(--surface); padding: 10px 14px;
}

/* --------------------------------------------------------------- Type */
h1, h2, h3 { margin: 0; font-weight: 700;  line-height: 1.15; }

h1 { font-size: clamp(2rem, 7vw, 3.25rem);  }
h2 { font-size: clamp(1.15rem, 3.4vw, 1.5rem); }
h3 {  letter-spacing: -.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--ink-soft); }

/* ------------------------------------------------------------- Header */

.site-header__inner {
  display: flex; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  /* Het logo mag nooit wijken voor het menu: liever een item minder
     zichtbaar dan een samengeperst logo. */
  min-width: 0;
}

.logo {
  display: inline-flex; align-items: center;
  text-decoration: none; flex: 0 0 auto;
}
.logo:hover { text-decoration: none; }

.main-nav { display: none; min-width: 0; }

.site-header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.city-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .875rem; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.temp-pill {
  display: none;
  align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .875rem; font-weight: 600;
}

/* --------------------------------------------------------------- Hero */
/* Mobiel: tekst op een rustige achtergrond, foto als eigen band eronder.
   Een foto ACHTER de tekst leest op een klein scherm nooit goed — je hebt
   daar te weinig ruimte om de tekst een eigen rustig vlak te geven. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.hero--plain {
  padding-bottom: 32px;
}

.hero__inner { position: relative; order: 1; }

.hero__copy { max-width: 100%; }
.hero__copy h1 { margin-bottom: 12px; }

/* Op mobiel staat de foto in de flow, ná de tekst. Geen overlay nodig. */
.hero__media {
  order: 2;
  margin-top: 22px;
  width: 100%;
  line-height: 0;
}
.hero__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero--photo .hero__media::after { content: none; }

.hero__credit {
  order: 3;
  margin: 0;
  padding: 6px var(--pad) 8px;
  font-size: .6875rem;
  line-height: 1.3;

  background: var(--surface);
  text-align: right;
}
.hero__credit a { color: inherit; }

/* ------------------------------------------------------------ Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;

  border: 1px solid transparent;
  font: inherit;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }

.btn--block { width: 100%; }

/* -------------------------------------------------------------- Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card__head {
    justify-content: space-between;
}
.card__head h2 { font-size: 1.0625rem; }

/* Op mobiel staan de statuskaarten gewoon onder de kop. De overlap met de
   hero komt pas terug vanaf 900px, waar de hero hoog genoeg is. Zonder deze
   expliciete regel is het onduidelijk of dat een keuze was of een omissie. */
.section--lift { padding-top: 28px; }
.section--lift .status-grid { margin-top: 0; }

.section__head p {  margin: 4px 0 0;  }

/* ------------------------------------------------------- Statuskaarten */
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-card {
  background: var(--surface);
  border: 1px solid var(--line);

  color: inherit;
}
.status-card:hover { text-decoration: none;  }

.status-card__top { display: flex;    }

/* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
/* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met een gekleurd icoon: de
   vorm valt op, niet de kleurvlek eromheen. De feed-iconen houden wel hun
   tint — daar staan er twaalf onder elkaar en dan is vol te schreeuwerig. */
.status-card__icon {
  display: grid; place-items: center;
}

.status-card__value {
  display: block;
}

.status-card__note { display: block;    }

/* Categoriekleuren */
.t-p2000   /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-p2000);   color: #fff; }
.t-traffic /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-traffic); color: #fff; }
.t-event   /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-event);   color: #fff; }
.t-weather /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-weather); color: #fff; }
.t-knrm    /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-knrm);    color: #fff; }
.t-waarschuwing /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-waarschuwing); color: #fff; }
.t-beving  /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-beving);  color: #fff; }
.t-outage  /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-outage);  color: #fff; }
.t-bekendmaking /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-bekendmaking); color: #fff; }
.t-heli    /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-heli);    color: #fff; }
.t-train   /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-train);   color: #fff; }
.t-flight  /* Verzadigde cirkel met wit icoon, zoals in de stijlgids. Dat leest op
   klein formaat rustiger dan een lichte tint met gekleurd icoon: de vorm
   valt op, niet de kleurvlek eromheen. */
.status-card__icon { background: var(--c-flight);  color: #fff; }

.t-p2000   .status-card__value--ok { color: var(--c-event); }

/* ---------------------------------------------------------------- Map */
.map-block { display: grid;  }

#map {
  width: 100%;
  border-radius: 0;
  background: var(--surface-alt);
  z-index: 1;
}

.map-card { overflow: hidden; }
/* Omvouwen in plaats van horizontaal scrollen. Een scrollbalk zonder
   zichtbare rand betekent dat alles na de vierde knop onbereikbaar lijkt:
   je ziet niet dat er meer is. Omvouwen kost een regel hoogte en maakt
   elk filter meteen klikbaar. */
.map-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
   border-top: 1px solid var(--line);
}

.legend-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: .8125rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
}
.legend-btn__dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-btn[aria-pressed="false"] {
  opacity: .5;
  background: var(--surface-alt);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.legend-btn:hover { border-color: var(--line-strong); }

/* Markers */
.nujs-marker {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(14,23,41,.28);
  font-size: 13px; line-height: 1;
}

/* De nieuwste melding: groter, met een ring die naar buiten pulseert.
   Alleen als de melding echt vers is — de API zet deze vlag niet meer
   zodra hij ouder is dan een uur. */
.nujs-marker--nieuw {
  width: 32px; height: 32px;
  border-width: 3px;
  box-shadow: 0 3px 10px rgba(14,23,41,.35);
  z-index: 500;
}
.nujs-marker--nieuw::before,
.nujs-marker--nieuw::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: inherit;
  animation: markerPuls 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
  pointer-events: none;
}
.nujs-marker--nieuw::after { animation-delay: 1.2s; }

/* De ring erft de kleur van de marker zelf, zodat een ambulance rood
   pulseert en een verkeersmelding oranje. */
.nujs-marker--p2000.nujs-marker--nieuw   { color: var(--c-p2000); }
.nujs-marker--heli.nujs-marker--nieuw    { color: var(--c-heli); }
.nujs-marker--traffic.nujs-marker--nieuw { color: var(--c-traffic); }
.nujs-marker--train.nujs-marker--nieuw   { color: var(--c-train); }
.nujs-marker--event.nujs-marker--nieuw   { color: var(--c-event); }
.nujs-marker--other.nujs-marker--nieuw   { color: var(--ink-soft); }

@keyframes markerPuls {
  0%   { transform: scale(1);   opacity: .85; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.nujs-marker--p2000   { background: var(--c-p2000); }
.nujs-marker--traffic { background: var(--c-traffic); }
.nujs-marker--event   { background: var(--c-event); }
.nujs-marker--outage  { background: var(--c-outage); }
.nujs-marker--bekendmaking { background: var(--c-bekendmaking); }
.nujs-marker--beving  { background: var(--c-beving); }
.nujs-marker--knrm    { background: var(--c-knrm); }
.nujs-marker--waarschuwing { background: var(--c-waarschuwing); }
.nujs-marker--heli    { background: var(--c-heli); }
.nujs-marker--train   { background: var(--c-train); }
.nujs-marker--flight  { background: var(--c-flight); }
.nujs-marker--other   { background: var(--ink-soft); }

.leaflet-popup-content-wrapper { border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: 12px 14px; font-family: var(--font); }
.popup__type { font-size: .75rem; font-weight: 700; margin-bottom: 2px; }
.popup__title { font-weight: 700; font-size: .9375rem; }
.popup__meta { color: var(--ink-soft); font-size: .8125rem; }

/* --------------------------------------------------------------- Feed */
.feed { list-style: none; margin: 0; padding: 0; }

.feed__item {
  display: grid;
  grid-template-columns: 46px 28px 1fr;

  border-bottom: 1px solid var(--line);
}
.feed__item:last-child { border-bottom: 0; }

.feed__time {
  font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}
.feed__icon {    display: grid; place-items: center; }

/* ------------------------------------------------------- Evenementen */
.event-scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 12px; overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.event-scroller::-webkit-scrollbar { display: none; }

.event-card {
  scroll-snap-align: start;
  background: var(--surface); border: 1px solid var(--line);
   overflow: hidden;
   color: inherit;
  display: flex; flex-direction: column;
}
.event-card:hover { text-decoration: none; }
.event-card__img { aspect-ratio: 16 / 10; background: var(--surface-alt); object-fit: cover; width: 100%; }
.event-card__body { padding: 12px 14px 14px; }
.event-card__cat {
     margin-bottom: 4px;
}
.event-card__title { font-weight: 700;  margin-bottom: 8px; }
.event-card__meta {
  display: flex; align-items: center; gap: 6px;
}
.event-card__price { margin-top: 8px; font-weight: 700; font-size: .875rem; }

/* -------------------------------------------------------- Lege staten */
.empty {
  text-align: center; padding: 32px 20px;
}
.empty__icon {
  width: 44px; height: 44px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--surface-alt); color: var(--ink-soft);
}
.empty__title { font-weight: 700; margin-bottom: 4px; }
.empty__text { color: var(--ink-soft); font-size: .9375rem; max-width: 36ch; margin: 0 auto; }

.badge-soon {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--surface-alt); border: 1px solid var(--line);
  font-size: .75rem; font-weight: 600; color: var(--ink-soft);
}

/* --------------------------------------------------------- Steden-rij */
.city-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
}
.city-tile {
  background: var(--surface); border: 1px solid var(--line);
    color: inherit;
}
.city-tile:hover { text-decoration: none;  }
.city-tile__name {  font-size: .9375rem; }
.city-tile__status {   font-weight: 600; }

/* ------------------------------------------------------ Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, 1fr);

  backdrop-filter: blur(12px);

  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 2px; font-size: .625rem; font-weight: 600; letter-spacing: -.01em;
   min-height: 56px; justify-content: center;
  text-align: center; overflow: hidden;
}
.bottom-nav a span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bottom-nav a:hover { text-decoration: none; }

/* ------------------------------------------------------------ Footer */

.site-footer ul { list-style: none; margin: 0 0 20px; padding: 0; }

.breadcrumbs { font-size: .8125rem;  padding: 14px 0 0; }

/* ----------------------------------------------------------- Skeleton */
.skeleton {
  background: linear-gradient(90deg, #EEF1F6 25%, #F6F8FB 37%, #EEF1F6 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
   display: inline-block;
  box-shadow: 0 0 0 0 rgba(225,29,72,.5);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(225,29,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,29,72,0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Zonder animatie valt de nieuwste melding terug op een vaste ring:
     de informatie blijft, de beweging verdwijnt. */
  .nujs-marker--nieuw::before {
    animation: none !important;
    transform: scale(1.7);
    opacity: .5;
  }
  .nujs-marker--nieuw::after { display: none; }
}

/* ===================================================================
   Breakpoints
   =================================================================== */

@media (min-width: 600px) {
  .status-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .event-scroller { grid-auto-columns: 46%; }
  .city-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }

  .hero--plain { padding-bottom: 40px; }
  .hero__media img { object-position: 50% 38%; }
}

@media (min-width: 900px) {
  :root { --pad: 24px; --gap: 20px;  }

  body { padding-bottom: 0; }
  .bottom-nav { display: none; }

  .main-nav { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
  .main-nav a {
    padding: 8px 11px; border-radius: var(--r-sm);
    font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  }
  .main-nav a:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }

  .hero {  display: block; }

  /* Vanaf hier is er wel ruimte: foto rechts, tekst links op wit. */

  .hero--photo .hero__media {
    position: absolute; inset: 0 0 0 auto;
      margin: 0; z-index: -1;
  }
  .hero--photo .hero__media img { height: 100%; aspect-ratio: auto; }
  .hero--photo .hero__media::after {
    content: ""; position: absolute; inset: 0;
  }
  .hero--photo::before {
    content: ""; position: absolute;  z-index: -1; background: #fff;
  }

  .hero__credit {
    position: absolute; right: 10px; bottom: 6px;
    padding: 0; background: none; max-width: 40ch;
  }

  .section--lift { padding-top: 0; }
  .section--lift .status-grid { margin-top: -46px; position: relative; z-index: 2; }

  .status-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }

  .map-block { grid-template-columns: 1.55fr 1fr;  }

  .event-scroller { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row;
                    grid-template-columns: repeat(4, minmax(0,1fr)); overflow: visible; }

  .city-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }

  .footer-cols { display: grid;   }
}

/* ---------------------------------------------------------- Weerpagina */
.weer-nu__hoofd {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 18px;
}
.weer-nu__icoon { color: var(--c-weather); flex: 0 0 auto; }
.weer-nu__temp {
  font-size: 3rem;
  line-height: 1; margin: 0 0 4px;
}
.weer-nu__oms { font-weight: 600; margin: 0 0 4px; }

.weer-details {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin: 0; border-top: 1px solid var(--line);
}
.weer-details > div {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
.weer-details > div:nth-child(odd) { border-right: 1px solid var(--line); }
.weer-details dt {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--ink-soft); margin-bottom: 2px;
}
.weer-details dd { margin: 0; font-weight: 700; font-size: .9375rem; }

.uur-strip {
  display: flex; gap: 2px; overflow-x: auto;
  padding: 6px 12px 14px; scrollbar-width: none;
}
.uur-strip::-webkit-scrollbar { display: none; }
.uur {
  flex: 0 0 auto; width: 58px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 0; border-radius: var(--r-md);
}
.uur:hover { background: var(--surface-alt); }
.uur__tijd { font-size: .75rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.uur__icoon { color: var(--c-weather); line-height: 0; }
.uur__temp { font-weight: 700; font-size: .9375rem; }
.uur__kans { font-size: .6875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.uur__kans.is-nat { color: var(--c-train); font-weight: 700; }

.week { list-style: none; margin: 0; padding: 0; }
.week__dag {
  display: grid;
  grid-template-columns: 68px 24px 38px 30px 1fr 30px;
  align-items: center; gap: 8px;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
}
.week__dag:last-child { border-bottom: 0; }
.week__naam { font-weight: 600; font-size: .875rem; }
.week__icoon { color: var(--c-weather); line-height: 0; }
.week__kans { font-size: .75rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.week__kans.is-nat { color: var(--c-train); font-weight: 700; }
.week__min, .week__max {
  font-size: .875rem; font-variant-numeric: tabular-nums; text-align: right;
}
.week__min { color: var(--ink-soft); }
.week__max { font-weight: 700; }
.week__balk {
  height: 5px; border-radius: var(--r-pill);
  background: var(--surface-alt); overflow: hidden; display: block;
}
.week__vulling {
  display: block; height: 100%; border-radius: var(--r-pill);
}

@media (min-width: 600px) {
  .weer-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .weer-details > div:nth-child(odd) { border-right: 0; }
  .weer-details > div { border-right: 1px solid var(--line); }
  .weer-details > div:nth-child(4n) { border-right: 0; }
  .week__dag { grid-template-columns: 90px 24px 44px 34px 1fr 34px; }
}

/* ------------------------------------------------------------- POI's */
.poi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 12px;
}

.poi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.poi__beeld {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.poi__beeld img { width: 100%; height: 100%; object-fit: cover; }

/* Zonder foto een rustig categorievlak: beter dan een grijze rechthoek
   of een generieke stockfoto die niets met deze zaak te maken heeft. */
.poi__icoon { opacity: .5; }
.t-event   .poi__beeld { background: var(--c-event-tint);   color: var(--c-event); }
.t-weather .poi__beeld { background: var(--c-weather-tint); color: var(--c-weather); }
.t-traffic .poi__beeld { background: var(--c-traffic-tint); color: var(--c-traffic); }
.t-train   .poi__beeld { background: var(--c-train-tint);   color: var(--c-train); }
.t-heli    .poi__beeld { background: var(--c-heli-tint);    color: var(--c-heli); }
.t-p2000   .poi__beeld { background: var(--c-p2000-tint);   color: var(--c-p2000); }

.poi__status {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 700;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}
.poi__status--open  { color: var(--c-event); }
.poi__status--dicht { color: var(--ink-faint); }

.poi__naam {   margin-bottom: 5px; }
.poi__meta {
     flex-wrap: wrap;
}

.poi__tag {
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-alt); border: 1px solid var(--line);
  font-size: .6875rem; font-weight: 600; color: var(--ink-soft);
}

/* --------------------------------------------------------- Ontdek-blok */
.ontdek-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ontdek {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);

  padding: 16px;

  color: inherit;
}
.ontdek:hover { text-decoration: none;  }

.ontdek__icoon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.ontdek__titel {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 6px;
}
.ontdek__waarde {
  display: block; font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.15;
}
.ontdek__noot {
  display: block; font-size: .8125rem; color: var(--ink-faint); margin-top: 3px;
}

.ontdek.t-event   .ontdek__icoon { background: var(--c-event-tint);   color: var(--c-event); }
.ontdek.t-traffic .ontdek__icoon { background: var(--c-traffic-tint); color: var(--c-traffic); }
.ontdek.t-train   .ontdek__icoon { background: var(--c-train-tint);   color: var(--c-train); }
.ontdek.t-heli    .ontdek__icoon { background: var(--c-heli-tint);    color: var(--c-heli); }

@media (min-width: 900px) {
  .ontdek-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.poi__credit {
  position: absolute; right: 0; bottom: 0;
  padding: 2px 7px;
  background: rgba(14,23,41,.55);
  color: #fff; font-size: .5625rem; line-height: 1.4;
  border-top-left-radius: var(--r-sm);
  max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poi__credit a { color: inherit; text-decoration: none; }
.poi__credit a:hover { text-decoration: underline; }

/* --------------------------------------------------- POI's, uitgelijnd */
/* Elke kaart even hoog, ongeacht hoeveel we van een zaak weten. Daarom
   krijgen naam, type, adres en tijd elk een vaste regelhoogte: een kroeg
   zonder adres mag de rij niet korter maken dan de buurman. */
.poi { height: 100%; }
.poi__body {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px 13px; flex: 1;
}
.poi__naam {
  font-size: .9375rem; font-weight: 700; margin: 0 0 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em; line-height: 1.25;
}
.poi__meta {
  display: flex; align-items: flex-start; gap: 5px;
  color: var(--ink-soft); font-size: .8125rem; margin: 0;
  min-height: 1.5em;
}
.poi__meta svg { flex: 0 0 auto; margin-top: 2px; }
.poi__meta span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poi__meta--type { font-weight: 600; color: var(--ink); }
.poi__leeg { color: var(--ink-faint); font-style: italic; }
.poi__tags {
  display: flex; flex-wrap: nowrap; gap: 4px; margin: 8px 0 0;
  overflow: hidden; min-height: 22px; align-items: flex-start;
}
.poi__tag { flex: 0 0 auto; }

/* Horizontale strook op de stadspagina, net als de evenementen. */
.poi-rij {
  display: grid; grid-auto-flow: column; grid-auto-columns: 68%;
  gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.poi-rij::-webkit-scrollbar { display: none; }
.poi-rij .poi { scroll-snap-align: start; }

@media (min-width: 600px) { .poi-rij { grid-auto-columns: 38%; } }
@media (min-width: 900px) {
  .poi-rij {
    grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }
}

/* ---------------------------------------- Kaart en feed even hoog maken */
/* De feed groeit met het aantal meldingen; de kaart niet. Zonder vaste
   hoogte krijg je op desktop een halve kolom witruimte naast de kaart. */
@media (min-width: 900px) {
  .map-block > .card { display: flex; flex-direction: column; min-height: 0; }

  .map-card #map { flex: 1; height: auto; min-height: 0; }

  .map-block > .card:last-child .feed {
    flex: 1; overflow-y: auto; min-height: 0;
    scrollbar-width: thin;
  }
  .map-block > .card:last-child .feed::-webkit-scrollbar { width: 6px; }
  .map-block > .card:last-child .feed::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: var(--r-pill);
  }

  .map-block { min-height: 540px; }
  .map-block > .card { max-height: 540px; }
}

/* ====================================================== Landelijke pagina */
/* Bewust kaal: één vraag, één invoerveld. Alles wat hier concurreert met
   dat veld maakt de pagina slechter. */

.landing h1 {
  font-size: clamp(2.25rem, 9vw, 4rem);
}

.zoeker__label {
  position: absolute; left: -9999px;
}
.zoeker__rij {
  position: relative;
  display: flex;  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
}

.zoeker__icoon {
  position: absolute;  top: 50%; transform: translateY(-50%);
   line-height: 0;
}
.zoeker input {
  flex: 1; min-width: 0;
  border: 0; background: none; font: inherit;
  color: var(--ink);
}
.zoeker input:focus { outline: none; }
.zoeker .btn { flex: 0 0 auto;  }

.zoeker__melding {
  font-size: .9375rem; color: var(--ink-soft);
}

.landing__snel {
  display: flex; flex-wrap: wrap; gap: 8px;
}

.status-grid--drie { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* Stadstegels: beeld draagt, tekst is bijzaak. */
.stad-grid {
  display: grid;
  gap: 14px;
  /* Vast aantal kolommen in plaats van auto-fill. Met auto-fill bepaalt
     de schermbreedte hoeveel er per rij passen, en dan houd je bij een
     willekeurig aantal tegels een half lege onderste rij over die naar
     links uitlijnt. Met een vast aantal kolommen én een aantal tegels dat
     daardoor deelbaar is (12), komt elke rij vol. */
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) { .stad-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .stad-grid { grid-template-columns: repeat(4, 1fr); } }

.stad {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.stad:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stad__beeld {
  /* Niet meerekken als de tegel hoger wordt.
     De tegel is een kolom-flexbox, dus zonder deze regel is de afbeelding
     een flex-item dat uitrekt zodra een buurtegel in dezelfde rij hoger is
     — bijvoorbeeld doordat daar "1575 meldingen vandaag" over twee regels
     loopt. De aspect-ratio wordt dan overruled door flex, en je krijgt
     afbeeldingen van verschillende hoogtes naast elkaar. */
  flex: 0 0 auto;
  aspect-ratio: 21 / 9;
  background:
    radial-gradient(120% 100% at 80% 0%, hsl(var(--hero-hue, 220) 68% 88%) 0%, transparent 62%),
    linear-gradient(180deg, #F2F5FC 0%, #E6ECFA 100%);
  display: block; overflow: hidden;
}
.stad__beeld img { width: 100%; height: 100%; object-fit: cover; }

/* De tekst vangt de extra hoogte op in plaats van de afbeelding. */
.stad__body {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding: 13px 15px 15px;
}
.stad__naam { display: block; font-weight: 700; font-size: 1rem; letter-spacing: -.015em; }
/* Twee regels gereserveerd, zodat een lange provincienaam plus een groot
   aantal meldingen de tegel niet hoger maakt dan zijn buren. */
.stad__meta {
  display: block; color: var(--ink-soft); font-size: .8125rem;
  margin-top: 3px; line-height: 1.35;
  min-height: calc(2 * 1.35em);
}

.stad--binnenkort {
  border-style: dashed; box-shadow: none; background: transparent;
  justify-content: center; align-items: center; text-align: center;
  min-height: 140px;
}
.stad--binnenkort .stad__body { padding: 20px; }
.stad--binnenkort .stad__naam { color: var(--ink-soft); }

@media (min-width: 900px) {
  .landing__lede { margin-bottom: 32px; }
}

/* Beeld in de landelijke hero. Geen losse illustratie die veroudert, maar
   de stadsfoto's die je toch al hebt — de homepage vult zichzelf naarmate
   je steden toevoegt. */
.landing--beeld { position: relative; isolation: isolate; overflow: hidden; }

.landing__media { position: absolute; inset: 0; z-index: -1; }
.landing__media img { width: 100%; height: 100%; object-fit: cover; }

.landing__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.92) 46%,
    rgba(255,255,255,.86) 74%,
    rgba(255,255,255,.94) 100%);
}

.landing__media--mozaiek {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
}
.landing__tegel { overflow: hidden; line-height: 0; }
.landing__tegel img { width: 100%; height: 100%; object-fit: cover; }

/* Op de mozaiek-variant iets meer dekking: vier foto's naast elkaar geven
   meer visuele ruis dan één, en de tekst moet leidend blijven. */
.landing__media--mozaiek::after {
  background: linear-gradient(180deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.94) 50%,
    rgba(255,255,255,.90) 78%,
    rgba(255,255,255,.96) 100%);
}

@media (min-width: 900px) {
  .landing__media--mozaiek { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; }
  .landing--beeld { padding: 88px 0 72px; }
}

/* ------------------------------------------------- Menu met "Meer" */
/* <details> in plaats van JavaScript: werkt overal, ook zonder JS, en
   sluit vanzelf bij een klik op een link omdat de pagina herlaadt. */
.meer { position: relative; }

.meer > summary {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; list-style: none; user-select: none;
}
.meer > summary::-webkit-details-marker { display: none; }
.meer > summary:hover { background: var(--surface-alt); color: var(--ink); }
.meer[open] > summary { background: var(--surface-alt); color: var(--ink); }
.meer[open] > summary svg { transform: rotate(180deg); }
.meer > summary svg { transition: transform .15s ease; }

.meer__paneel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 80;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--line);

  display: flex; flex-direction: column; gap: 1px;
}
.meer__paneel a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
}
.meer__paneel a:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.meer__paneel a.is-active { color: var(--brand); background: var(--brand-tint); }
.meer__paneel svg { flex: 0 0 auto; opacity: .7; }
.popup__detail {
  font-size: .8125rem; color: var(--ink); margin: 3px 0 0;
  font-weight: 600;
}

/* ---------------------------------------------------------- Straten */
.straat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 10px;
}
.straat {
  display: block; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line);
   color: inherit;
}
.straat:hover { text-decoration: none;  }
.straat__naam { display: block; font-weight: 600; font-size: .9375rem; }
.straat__meta { display: block; color: var(--ink-faint); font-size: .8125rem; margin-top: 2px; }

/* ----------------------------------------------------- Advertenties */
/* Vaste minimumhoogte per plek. Zonder gereserveerde ruimte springt de
   pagina als de advertentie inlaadt, en dat kost je Core Web Vitals —
   precies het cijfer waarop je wilde ranken. */
.adv {
  margin: 0 0 var(--gap);
  padding: 10px 0;
  text-align: center;
  overflow: hidden;
}
.adv__label {
  display: block;
  font-size: .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.adv__slot {
  display: flex; align-items: center; justify-content: center;
  min-height: 100px;
}
.adv__slot > * { max-width: 100%; }

.adv--top .adv__slot,
.adv--midden .adv__slot { min-height: 280px; }
.adv--onder .adv__slot  { min-height: 250px; }

.adv--zijkant { display: none; }

@media (min-width: 900px) {
  .adv--top .adv__slot,
  .adv--midden .adv__slot { min-height: 100px; }
  .adv--zijkant { display: block; }
  .adv--zijkant .adv__slot { min-height: 600px; }
}

/* --------------------------------------------------- Affiliate-knop */
.poi__actie {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 9px 12px;
  background: var(--brand-tint);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: .8125rem; font-weight: 700; color: var(--brand);
}
.poi__actie:hover { text-decoration: none; border-color: var(--brand); }
.poi__partner {
  font-weight: 500; font-size: .6875rem; color: var(--ink-faint);
  white-space: nowrap;
}

/* --------------------------------------------- Geclaimd en uitgelicht */
.poi--uitgelicht {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--shadow-md);
}

/* Betaalde plaatsing moet zichtbaar zijn. Niet in kleine grijze letters
   onderaan, maar bovenop de kaart waar je hem niet kunt missen. */
.poi__uitgelicht {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  font-size: .625rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.poi { position: relative; }

.poi__claim {
  display: block; margin-top: 9px;
  font-size: .75rem; color: var(--ink-faint);
}
.poi__claim:hover { color: var(--brand); }

.map-meer {
  margin: 0; padding: 9px 14px;
  border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--ink-faint);
  background: var(--surface-alt);
}

/* ------------------------------------------------ Weerwaarschuwingen */
/* Een band, geen marker: code oranje geldt voor een hele provincie en
   hoort niet als speld op één punt te staan. */
.waarschuwing {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;

  margin-bottom: 12px;
  border: 1px solid transparent;
}

.waarschuwing__icoon { flex: 0 0 auto; line-height: 0; margin-top: 1px; }
.waarschuwing__titel { font-weight: 700; margin: 0 0 2px; font-size: .9375rem; }
.waarschuwing__meta  { margin: 0; font-size: .8125rem; opacity: .85; }

.waarschuwing--geel {
  background: #FEF6E0; border-color: #F3D68A; color: #7A5A00;
}
.waarschuwing--oranje {
  background: #FEEFE0; border-color: #F3B27A; color: #8A3D00;
}
.waarschuwing--rood {
  background: #FEE9E9; border-color: #F0A0A0; color: #8A1414;
}

/* Code rood pulseert zacht. Alleen die: als geel ook beweegt, betekent
   beweging niets meer. */
.waarschuwing--rood .waarschuwing__icoon {
  animation: waarschuwPuls 2s ease-in-out infinite;
}
@keyframes waarschuwPuls {
  50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .waarschuwing--rood .waarschuwing__icoon { animation: none; }
}

/* ------------------------------------------------ Cookietoestemming */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
}
.consent[hidden] { display: none; }
.consent__titel { font-weight: 700; margin: 0 0 4px; }
.consent__tekst p:last-child { margin: 0; color: var(--ink-soft); }
.consent__knoppen { display: flex; gap: 8px; }
.consent__knoppen .btn { flex: 1; min-height: 42px; }

@media (min-width: 700px) {
  .consent {
    left: auto; right: 20px; bottom: 20px; max-width: 460px;
    flex-direction: column;
  }
  .consent__knoppen .btn { flex: 0 1 auto; }
  .consent__knoppen { justify-content: flex-end; }
}

/* De onderste navigatiebalk op mobiel niet laten overlappen. */
@media (max-width: 899px) {
  .consent { bottom: 72px; }
}

/* ------------------------------------------------- Tekstpagina's */

.tekst p { line-height: 1.65; }
.tekst ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.6; }
.tekst li { margin-bottom: 7px; }
.tekst table.data { font-size: .8125rem; }
.tekst table.data th, .tekst table.data td { padding: 8px 10px; }

/* Advertentie tussen de locatiekaarten: neemt de breedte van het raster,
   zodat de rijen niet verspringen. */
.poi-advertentie { grid-column: 1 / -1; }
.poi-advertentie .adv { margin: 0; }

/* ------------------------------------------------------------- Logo */
/* Het logo is geen kaal woordmerk maar een beeldmerk met een tagline
   eronder. Bij 34px is die tagline onleesbaar, dus het heeft meer hoogte
   nodig dan een gewoon logo — en de balk moet daarin meegroeien, anders
   knelt het.

   Hoogte vast, breedte auto: zo blijft de verhouding kloppen ongeacht de
   afmetingen van het bestand. De width/height in de HTML zijn er alleen
   om te voorkomen dat de balk springt tijdens het laden. */
.logo__beeld {
  max-width: 190px;
  display: block;
  object-fit: contain;
}

@media (min-width: 700px) {
  .logo__beeld {  max-width: 240px; }
}

@media (min-width: 900px) {
  .logo__beeld {  max-width: 300px; }
}

/* --------------------------------------------- Plaatsen op mobiel */
/* Zes tegels op mobiel, twaalf op desktop. Daarboven wordt het scrollen
   zonder dat je iets wijzer wordt; de rest staat eronder als compacte
   lijst per provincie, en dat scant sneller dan tegels. */
.stad--extra { display: none; }

@media (min-width: 700px) {
  .stad--extra { display: block; }
}

.stad-meer {
  padding: 18px 20px;
  background: var(--surface-alt);
  border-radius: var(--r-lg);
}
.stad-meer__kop {
  font-size: .8125rem; font-weight: 700; color: var(--ink-soft);
  margin: 0 0 14px;
}

/* Provincies stromen in kolommen in plaats van onder elkaar. Twintig
   plaatsen over tien provincies wordt anders tien rijen hoog, en dat is
   op desktop veel ruimte voor een lijstje namen. Met columns vult hij de
   breedte die er toch al is. */
.stad-meer__lijst { columns: 1; column-gap: 28px; }

@media (min-width: 560px) { .stad-meer__lijst { columns: 2; } }
@media (min-width: 900px) { .stad-meer__lijst { columns: 3; } }
@media (min-width: 1140px) { .stad-meer__lijst { columns: 4; } }

.stad-meer__groep {
  /* Een provincie mag niet over twee kolommen worden afgebroken. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 14px;
}
.stad-meer__provincie {
  display: block;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.stad-meer__groep a {
  display: block;
  font-size: .875rem; font-weight: 600; color: var(--ink);
  padding: 2px 0;
}
.stad-meer__groep a:hover { color: var(--brand); }
.stad-meer__binnenkort {
  margin: 6px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-faint);
}

/* ===================================================== Datapagina's */

.periode {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: var(--gap);
}
.periode__knop {
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
}
.periode__knop:hover { text-decoration: none;   }
.periode__knop.is-actief { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- kerncijfers --- */
.kpis {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--gap);
}
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(6, 1fr); } }

.kpi {
  display: flex; flex-direction: column; gap: 2px;

  background: var(--surface); border: 1px solid var(--line);
}
.kpi__icoon { line-height: 0;  margin-bottom: 4px; }
.kpi__label { font-size: .75rem;  }
.kpi__waarde {    line-height: 1.1; }
.kpi__meta  { font-size: .6875rem; color: var(--ink-faint); }
.kpi__delta { font-weight: 700; }
.kpi__delta.is-op   { color: var(--c-p2000); }
.kpi__delta.is-neer { color: var(--c-event); }

/* --- inzichten --- */
.inzichten {
   margin-bottom: var(--gap);
  background: var(--brand-tint);
}
.inzichten__kop {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--brand); margin: 0 0 8px;
}
.inzichten ul { margin: 0; padding-left: 18px; }
.inzichten li { font-size: .9375rem; line-height: 1.5; margin-bottom: 4px; }
.inzichten li:last-child { margin-bottom: 0; }

/* --- groot getal --- */
.grootgetal {
  display: flex; flex-direction: column; gap: 2px;
  padding: 20px 22px; margin-bottom: var(--gap);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-lg);
}
.grootgetal__cijfer { font-size: clamp(2rem, 7vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.grootgetal__label  { font-size: .875rem; color: var(--ink-soft); }
.grootgetal.t-traffic      { border-left-color: var(--c-traffic); }
.grootgetal.t-p2000        { border-left-color: var(--c-p2000); }
.grootgetal.t-event        { border-left-color: var(--c-event); }
.grootgetal.t-waarschuwing { border-left-color: var(--c-waarschuwing); }

/* --- raster --- */
.data-raster { display: grid;  grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .data-raster { grid-template-columns: 1fr 1fr; }
  .data-raster__breed { grid-column: 1 / -1; }
}

/* --- grafieken --- */
.grafiek__leeg { color: var(--ink-faint); font-size: .875rem; margin: 0; }

.grafiek--ranking { display: flex; flex-direction: column; gap: 10px; }

/* Op mobiel staat de naam op een eigen regel met de balk eronder.
   Naast elkaar proppen levert "Bus 21 naar Sc..." op, en een afgekapte
   bestemming maakt de hele regel waardeloos — juist dat stukje is de
   informatie. Vanaf tablet past alles wel op één regel. */
.grafiek__rij {
  display: grid;
  gap: 3px 8px;
  grid-template-columns: 18px 1fr auto;
  grid-template-areas:
    "rang naam waarde"
    ".    balk balk";
  align-items: center;
  font-size: .8125rem;
}

@media (min-width: 640px) {
  .grafiek__rij {
    gap: 10px;
    grid-template-columns: 20px minmax(150px, 1.1fr) minmax(70px, 1.4fr) auto;
    grid-template-areas: "rang naam balk waarde";
  }
}

.grafiek__rang {
  grid-area: rang;
  color: var(--ink-faint); font-size: .6875rem; text-align: right;
}
.grafiek__naam {
  grid-area: naam;
  font-weight: 600; line-height: 1.3;
  min-width: 0;
}
.grafiek__extra {
  display: block;
  font-weight: 400; color: var(--ink-faint); font-size: .6875rem;
  margin-top: 1px;
}
@media (min-width: 640px) {
  .grafiek__naam {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .grafiek__extra { display: inline; margin-top: 0; }
}
.grafiek__balk {
  grid-area: balk;
  height: 8px; border-radius: var(--r-pill);
  background: var(--surface-alt); overflow: hidden;
}
.grafiek__vulling { display: block; height: 100%; border-radius: var(--r-pill); }
.grafiek__waarde {
  grid-area: waarde;
  font-weight: 700; font-variant-numeric: tabular-nums;
  align-self: center;
}

.grafiek--kolommen { display: flex; align-items: flex-end; gap: 3px; }
.grafiek__kolom { flex: 1; min-width: 0; }

/* Het vlak heeft de vaste hoogte, niet de kolom. Zo is een staaf van 100%
   ook echt de volle hoogte en lopen de verhoudingen met de cijfers mee. */
.grafiek__vlak {
  display: flex; align-items: flex-end;
  height: var(--grafiek-h, 150px);
}
.grafiek__staaf {
  display: block; width: 100%; border-radius: 3px 3px 0 0;
  opacity: .55; transition: opacity .12s ease;
}
.grafiek__kolom.is-piek .grafiek__staaf { opacity: 1; }
.grafiek__kolom:hover .grafiek__staaf { opacity: .85; }
/* Altijd dezelfde hoogte, ook als het label leeg is.
   De kolommen zijn onderaan uitgelijnd, dus een kolom mét label zou anders
   hoger zijn dan een kolom zonder — en dan begint de staaf bij uur 00, 06,
   12 en 18 zeventien pixels hoger dan bij de buren. Dat trekt de hele
   grafiek scheef terwijl de cijfers kloppen. */
.grafiek__as {
  display: block;
  height: 16px; line-height: 16px;
  margin-top: 5px;
  font-size: .625rem; color: var(--ink-faint); text-align: center;
  overflow: hidden; white-space: nowrap;
}

.grafiek--lijn { position: relative; }
.grafiek--lijn svg { width: 100%; height: auto; display: block; color: var(--ink); }
.grafiek__aslabels { position: absolute; inset: 0; }

.verdeling { display: flex;  border-radius: var(--r-pill); overflow: hidden; }
.verdeling span { display: block; height: 100%; }
.verdeling__lijst { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.verdeling__item { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--ink-soft); }
.verdeling__item i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* --- doorklikken --- */
.data-tegels { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .data-tegels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .data-tegels { grid-template-columns: repeat(3, 1fr); } }

.data-tegel {
  display: block; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
   color: inherit;
}
.data-tegel:hover { text-decoration: none;  }
.data-tegel__naam { display: block; font-weight: 700; margin-bottom: 3px; }
.data-tegel__meta { display: block; font-size: .8125rem; color: var(--ink-faint); line-height: 1.45; }

.data-verder {
  display: flex; flex-wrap: wrap;
  margin-top: var(--gap); padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
}
.data-verder span { color: var(--ink-faint); font-size: .8125rem; }

/* ------------------------------------------- Data op de homepage */
/* Een eigen blok met een lichte achtergrond, zodat het opvalt tussen de
   live-feed en de plaatskeuze. Niet weggestopt onderaan: de kaart laat
   zien wat er nu is, dit laat zien wat het patroon is — die twee
   versterken elkaar. */
.data-uitgelicht { padding-top: 0; }

.data-hero {
  display: grid; gap: 22px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 860px) {
  .data-hero { grid-template-columns: 1fr 1fr; gap: 34px; padding: 30px 32px; align-items: start; }
}

.data-hero__kop {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--brand); margin: 0 0 8px;
}
.data-hero__titel {
  font-size: clamp(1.35rem, 4vw, 1.9rem); letter-spacing: -.02em;
  margin: 0 0 10px; line-height: 1.15;
}
.data-hero__inzicht {
  color: var(--ink-soft); font-size: .9375rem; line-height: 1.55;
  margin: 0 0 16px; max-width: 46ch;
}

.data-hero__cijfers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.data-hero__cijfer {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--surface-alt);
  font-size: .75rem; color: var(--ink-soft);
}
.data-hero__cijfer b {
  font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.data-hero__cijfer.t-p2000 b   { color: var(--c-p2000); }
.data-hero__cijfer.t-traffic b { color: var(--c-traffic); }
.data-hero__cijfer.t-event b   { color: var(--c-event); }
.data-hero__cijfer.t-train b   { color: var(--c-train); }
.data-hero__cijfer.t-bekendmaking b { color: var(--c-bekendmaking); }

.data-hero__label {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); margin: 0 0 8px;
}

/* ------------------------------------------------------ Druktemeter */
/* Het enige cijfer op de site dat duidt in plaats van telt. Kleur volgt
   het oordeel, want daar gaat het om — het getal eronder is toelichting. */
.drukte {
  display: grid; gap: 16px;
  margin-bottom: var(--gap);
  padding: 18px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
@media (min-width: 740px) {
  .drukte { grid-template-columns: 1fr 240px; align-items: center; gap: 24px; }
}

.drukte__kop {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700;  margin: 0 0 3px;
}
.drukte__oordeel {
  font-size: clamp(1.125rem, 3.4vw, 1.5rem); font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 4px; line-height: 1.2;
}
.drukte__meta { font-size: .8125rem; color: var(--ink-soft); margin: 0; }

.drukte__meter { display: flex; flex-direction: column; gap: 6px; }
.drukte__schaal {
  position: relative; display: block;  border-radius: var(--r-pill);
}
.drukte__wijzer {
  position: absolute; top: 50%;
   border-radius: 50%;
  background: var(--surface); border: 3px solid var(--ink);
}
.drukte__labels {
  display: flex; justify-content: space-between;
  font-size: .625rem; color: var(--ink-faint);
}

.drukte--rustig,
.drukte--veel-rustig { border-color: #A7D8B5; }

.drukte--veel-rustig .drukte__oordeel { color: #15803D; }

/* Terugbliklijst op de datapagina */

/* Terugbliklijst op de datapagina */
.terugblik { display: flex; flex-wrap: wrap; gap: 8px; }
.terugblik__knop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: var(--r-pill);

   font-size: .8125rem; font-weight: 700;
}
.terugblik__knop:hover { text-decoration: none;  }

/* ======================================================== Wrapped */
/* Eén doorlopend verhaal in plaats van een dashboard. Afwisseling tussen
   lichte en donkere secties is wat het tot een reeks maakt; scroll-snap
   geeft het ritme. Alles bouwt op de bestaande kleurvariabelen, dus het
   blijft herkenbaar Nieuwsuitjestad.

   Geen JavaScript: scroll-snap doet het werk en blijft werken als het
   scrollen wordt onderbroken, wat met JS-gestuurde stappen niet zo is. */

.wrapped { scroll-snap-type: y proximity; }

/* --- vlakken --- */

/* --- genummerd label --- */

/* --- koppen --- */

/* --- 1. cover --- */

@keyframes wrWip { 50% { transform: translateY(7px); } }

/* --- 2. tegels --- */

/* --- 3. drukste dag --- */

/* Zelfde correctie: de vaste hoogte zit op het vlak, niet op de kolom,
   zodat het waardelabel er niet van afsnoept. */

/* --- 4. uren --- */

/* --- 5. plekken --- */

/* --- 6. verloop --- */

/* --- 7. feiten --- */

/* --- 8. karakter --- */

/* --- 9. buren --- */

/* --- 10. slot --- */

/* Links binnen donkere en gekleurde vlakken erven de kleur. */

/* =========================================================== Donut */
.donut {
  display: grid; gap: 18px; align-items: center;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 520px) {
  .donut { grid-template-columns: 160px 1fr; gap: 24px; justify-items: start; }
}

.donut__ring { width: 160px; height: 160px; display: block; color: var(--ink); }
.donut__ring circle { transition: opacity .12s ease; }
.donut:hover .donut__ring circle { opacity: .55; }
.donut__ring circle:hover { opacity: 1; }

.donut__legenda {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; min-width: 0;
}
.donut__item {
  display: grid; align-items: center; gap: 9px;
  grid-template-columns: 10px 1fr auto;
  font-size: .8125rem;
}
.donut__item i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.donut__naam {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-soft);
}
.donut__item b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Binnen een donker vlak erft de ring de tekstkleur. */

/* Verdeelblok in wrapped: donut naast de tegels op breed scherm. */

/* ======================================================== Wrapped */
/* Kaarten in plaats van schermvullende vlakken: je ziet de volgende kaart
   al half en dat trekt je verder. Eén kolom, ruim witruimte, en per kaart
   één boodschap met een gekleurd label erboven. */

.wrapped { max-width: 42rem; padding-top: 18px; padding-bottom: 40px; }

/* --- cover --- */
.wcover {
  position: relative; overflow: hidden;

  min-height: 300px;
  display: flex; align-items: flex-end;
  padding: 24px;
  color: #fff;

  margin-bottom: 14px;
}
@media (min-width: 640px) { .wcover { min-height: 360px; padding: 32px; } }

.wcover__beeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.wcover--foto::after {
  content: ""; position: absolute; inset: 0;
}
.wcover__in { position: relative; z-index: 1; width: 100%; }

.wcover__stad {
  display: inline-block; margin-bottom: 12px;
  padding: 5px 11px;

  font-size: .6875rem; font-weight: 800; letter-spacing: .09em;
}
.wcover__titel {
  font-size: clamp(2.25rem, 12vw, 3.25rem); font-weight: 900;
  letter-spacing: -.04em; line-height: .95; margin: 0;
}
.wcover__periode {
  font-size: clamp(1.5rem, 8vw, 2rem); font-weight: 800;
  letter-spacing: -.03em;  margin: 0 0 12px;
}
.wcover__zin {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin: 0 0 18px;
}

.wcover__feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wcover__feiten li {
  display: flex; align-items: center; gap: 9px;
  font-size: .8125rem; opacity: .9;
}
.wcover__feiten svg { flex: 0 0 auto; opacity: .7; }
.wcover__feiten strong { font-weight: 800; }

/* --- kaart --- */
.wkaart {
  background: var(--surface);
  border: 1px solid var(--line);

  padding: 20px;
  margin-bottom: 14px;
}
@media (min-width: 640px) { .wkaart { padding: 26px; } }

.wkaart--blauw  { background: #F2F6FE; border-color: #DCE6FB; }
.wkaart--oranje { background: #FFF6F0; border-color: #FAE2D2; }
.wkaart--kleur {
  border-color: transparent; color: #fff;
}

/* gekleurd label boven elke kaart */
.wlabel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em;
  margin: 0 0 14px;
}
.wlabel--oranje { background: #FDE6D6; color: #9A3412; }
.wlabel--blauw  { background: var(--brand-tint); color: var(--brand); }
.wlabel--groen  { background: #DCFCE7; color: #15803D; }
.wlabel--wit    { background: rgba(255,255,255,.18); color: #fff; }
.wlabel svg { opacity: .85; }

.wkaart__cijfer {
  font-size: clamp(2.75rem, 13vw, 4rem); font-weight: 900;
  letter-spacing: -.045em; line-height: .95; margin: 0;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.wkaart__cijferlabel {
  font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 4px 0 14px;
}
.wkaart__cijferlabel span { font-weight: 500; font-size: .875rem; color: var(--ink-soft); }

.wkaart__kop {
  font-size: clamp(1.375rem, 6vw, 1.875rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15; margin: 0 0 4px;
}
.wkaart__sub { font-size: .9375rem; color: var(--ink-soft); margin: 0 0 14px; }
.wkaart__sub strong { color: var(--ink); font-weight: 800; font-size: 1.0625rem; }
.wkaart__sub--licht { color: rgba(255,255,255,.85); }

.wkaart__donut { margin-top: 6px; }

/* chip met percentage */
.wchip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 800; margin: 0 0 16px;
}
.wchip small { font-size: .75rem; font-weight: 500; opacity: .8; }
.wchip--op     { background: #DCFCE7; color: #15803D; }
.wchip--neer   { background: #FEE2E2; color: #B91C1C; }
.wchip--oranje { background: var(--c-traffic); color: #fff; }
.wchip--oranje small { color: rgba(255,255,255,.85); }

/* --- minigrafiek in de kaart --- */
.wmini {
  display: flex; align-items: flex-end; gap: 4px;
  height: 84px; margin: 4px 0 0;
}
.wmini--uren { gap: 2px; height: 70px; }
.wmini__staaf {
  position: relative; flex: 1; display: block;
  border-radius: 3px 3px 0 0;
  background: #FBCBA6;
}

.wmini__as {
  position: absolute; left: 0; right: 0; top: 100%;
  font-size: .625rem; color: var(--ink-faint); text-align: center;
  padding-top: 5px;
}
.wmini:has(.wmini__as) { margin-bottom: 18px; }

.wminias {
  display: flex; justify-content: space-between;
  font-size: .625rem; color: var(--ink-faint); margin: 7px 0 0;
}

.wvoet { font-size: .6875rem; color: var(--ink-faint); margin: 14px 0 0; line-height: 1.5; }
.wvoet strong { color: var(--ink-soft); }

/* --- lijst --- */
.wlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.wlijst__rij {
  display: grid; gap: 2px 10px;
  grid-template-columns: 20px 1fr auto;
  grid-template-areas: "rang naam waarde" ".   balk balk";
  align-items: center;
  font-size: .875rem;
}
.wlijst__rang  { grid-area: rang; color: var(--ink-faint); font-size: .75rem; }
.wlijst__naam  { grid-area: naam; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlijst__waarde { grid-area: waarde; font-weight: 800; font-variant-numeric: tabular-nums; }
.wlijst__balk {
  grid-area: balk; height: 5px; border-radius: 99px;
  background: rgba(0,0,0,.07); overflow: hidden; margin-top: 2px;
}
.wlijst__balk span { display: block; height: 100%;  border-radius: 99px; }

.wlijst__rij.is-zelf .wlijst__naam,
.wlijst__rij.is-zelf .wlijst__waarde { color: var(--c-traffic); }

.wmeer { margin: 14px 0 0; font-size: .8125rem; }
.wmeer a { font-weight: 700; }

/* --- kaartje --- */
.wkaartje { margin-top: 16px; }
.wkaartje #map {
  height: 240px; border-radius: var(--r-md);
  border: 1px solid var(--line); overflow: hidden;
}
@media (min-width: 640px) { .wkaartje #map { height: 300px; } }
.wkaartje__legenda {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap;
  font-size: .625rem; color: var(--ink-faint); margin: 9px 0 0;
}
.wkl { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* --- lijngrafiek --- */
.wlijn svg { width: 100%; height: auto; display: block; }

/* --- feitentegels --- */
.wfeiten { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
@media (min-width: 640px) { .wfeiten { grid-template-columns: repeat(4, 1fr); } }

.wfeit {
  display: flex; flex-direction: column;
  padding: 16px 14px; border-radius: var(--r-md);
  background: #0E1729; color: #fff;
}
.wfeit__icoon { line-height: 0; opacity: .55; margin-bottom: 10px; }
.wfeit__kop   { font-size: .6875rem; opacity: .6; margin-bottom: 3px; }
.wfeit__groot {
  font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; margin-bottom: 5px;
}
.wfeit__tekst { font-size: .75rem; opacity: .72; line-height: 1.4; }

/* --- karakter --- */
.wkarakter {
  font-size: clamp(1.875rem, 9vw, 2.75rem); font-weight: 900;
  letter-spacing: -.035em; line-height: 1.02; margin: 0 0 10px;
}

/* --- slot --- */
.wslot {
   color: #fff;
   padding: 28px 22px; text-align: center;
}
.wslot__pin { display: inline-flex;  margin-bottom: 12px; }
.wslot__kop { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.wslot__tekst { font-size: .875rem; opacity: .75; margin: 0 0 20px; }
.wslot__acties { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.wslot .btn--ghost {
  background: transparent; border-color: rgba(255,255,255,.35); color: #fff;
}
.wslot .btn--ghost:hover { background: rgba(255,255,255,.12); }
.wslot__bron { font-size: .6875rem; opacity: .55; margin: 20px 0 0; }
.wslot__bron a { color: inherit; text-decoration: underline; }

.wadv { margin-bottom: 14px; }
.wadv .adv { margin: 0; }

/* Donut binnen een gekleurde kaart erft de tekstkleur. */
.wkaart--kleur .donut__ring { color: #fff; }

/* ========================================================== Zoeken */
.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* In de kopbalk alleen op breed scherm. Op mobiel is er geen ruimte naast
   het logo, en daar staat Zoeken in het menu en onderin de balk. */

@media (min-width: 1000px) {
  .kopzoek {
     align-items: center; gap: 4px;
    margin-left: auto;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 4px 4px 4px 14px;
  }
  .kopzoek input {
    border: 0; background: transparent; outline: 0;
    font: inherit; font-size: .8125rem; color: var(--ink);
    width: 168px; padding: 5px 0;
  }
  .kopzoek input::placeholder { color: var(--ink-faint); }
  .kopzoek button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: var(--brand); color: #fff; cursor: pointer; flex: 0 0 auto;
  }
  .kopzoek:focus-within { border-color: var(--brand); }
}

.zoekform {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 8px 8px 8px 14px;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-sm);
}
.zoekform__icoon { flex: 0 0 auto; line-height: 0;  }
.zoekform input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1rem; color: var(--ink); padding: 10px 0;
}
.zoekform:focus-within { border-color: var(--brand); }

.zoekrij {
  display: flex; align-items: center;
   color: inherit;
  border-top: 1px solid var(--line);
}
.zoekrij:first-child { border-top: 0; }

.zoekrij__icoon.t-p2000        { background: var(--c-p2000-tint); color: var(--c-p2000); }

.zoekrij__icoon.t-event        { background: var(--c-event-tint); color: var(--c-event); }
.zoekrij__icoon.t-bekendmaking { background: var(--c-bekendmaking-tint); color: var(--c-bekendmaking); }
.zoekrij__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zoekrij__tekst strong { font-size: .9375rem; font-weight: 700; }
.zoekrij__tekst span {
  font-size: .75rem; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zoekrij__pijl { flex: 0 0 auto;  }

/* De "alle plaatsen"-chip valt bewust op tussen de stadsnamen: het is
   geen negende stad maar een andere soort actie. */
.chip--meer {
  font-weight: 700;
}
.chip--meer:hover { background: #fff; }

/* De kopbalk is sticky, dus een anker springt anders áchter de balk.
   scroll-margin duwt het doel omlaag zodat de kop zichtbaar blijft. */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* De laatste tegel wijst naar het volledige overzicht in plaats van dat
   alle plaatsen hier staan. */
.city-tile--meer {
  border-style: dashed;

  color: var(--brand);
}
.city-tile--meer .city-tile__status { color: var(--brand); opacity: .8; }

/* =====================================================================
   WIJKEN

   Niet je hele app.css vervangen: mijn werkkopie is verouderd en mist
   de stijlen voor wrapped, de donutdiagrammen en de zoekfunctie.
   ===================================================================== */

.wijk-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .wijk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .wijk-grid { grid-template-columns: repeat(4, 1fr); } }

.wijk-tegel {
  display: flex; flex-direction: column; gap: 2px;

  background: var(--surface); border: 1px solid var(--line);
  color: inherit;
}
.wijk-tegel:hover { text-decoration: none;  }
.wijk-tegel__naam { font-weight: 700; font-size: .9375rem; }
.wijk-tegel__meta { font-size: .75rem; color: var(--ink-faint); }

.straatlijst { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.straatlijst a { font-size: .875rem; font-weight: 600; }

/* =====================================================================
   ADVERTENTIEBLOK
   ===================================================================== */

.partner {
  display: block; position: relative;

  /* Zelfde blauwe rand als een uitgelichte locatie: wie betaalt, valt
     overal op dezelfde manier op. */
  border: 2px solid var(--brand);
  background: var(--surface);
  overflow: hidden;
  color: inherit;
  box-shadow: 0 6px 22px rgba(37,99,235,.10);
}
.partner:hover { text-decoration: none; box-shadow: 0 8px 28px rgba(37,99,235,.18); }

.partner__merk {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.94);
  font-size: .625rem; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-faint); text-transform: uppercase;
}

.partner__in { display: flex; flex-direction: column; }
@media (min-width: 700px) { .partner__in { flex-direction: row; align-items: stretch; } }

.partner__beeld {
  display: block; overflow: hidden;
  background: var(--surface-alt);
  aspect-ratio: 16 / 9;
}
.partner__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) {
  .partner__beeld { flex: 0 0 42%; aspect-ratio: auto; min-height: 240px; }
}

.partner__beeld--leeg {
  display: flex; align-items: center; justify-content: center;
  color: var(--brand); background: var(--brand-tint);
  min-height: 150px;
}

.partner__tekst {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px;
}
@media (min-width: 700px) { .partner__tekst { padding: 28px 30px; justify-content: center; } }

.partner__soort {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700;
}
.partner__naam {
  font-size: clamp(1.25rem, 3.5vw, 1.625rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15;
}
.partner__zin {
  font-size: .9375rem; color: var(--ink-soft); line-height: 1.6;
  margin-top: 6px;
}
.partner__adres {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8125rem; color: var(--ink-faint); margin-top: 8px;
}
.partner__adres svg { flex: 0 0 auto; opacity: .7; }
.partner__cta {
  margin-top: 16px; font-size: .9375rem; font-weight: 700;
}

/* De vrije plek: gestippeld en rustiger, want die is voor ondernemers
   bedoeld en niet voor bezoekers. */
.partner--vrij {
  border-style: dashed; border-width: 2px;
  background: var(--surface-alt); box-shadow: none;
}
.partner--vrij .partner__merk { background: transparent; }
.partner--vrij:hover { background: var(--surface); box-shadow: none; }
.partner--vrij .partner__naam { font-size: 1.25rem; }

/* hint onder een invoerveld */
.veldhint {
  display: block; margin-top: 5px;
  font-size: .75rem; color: var(--ink-faint); line-height: 1.45;
}

/* --- stadspartner: zichtbaar anders dan een gewone uitgelichte --- */
.partner--stad {
  border-color: var(--c-traffic);
  box-shadow: 0 6px 24px rgba(249,115,22,.16);
}
.partner--stad:hover { box-shadow: 0 10px 32px rgba(249,115,22,.24); }

.partner__kroon {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--c-traffic); color: #fff;
  font-size: .6875rem; font-weight: 800; letter-spacing: .02em;
}
.partner__kroon svg { opacity: .9; }

.partner--stad .partner__soort { color: var(--c-traffic); }
.partner--stad .partner__cta   { color: var(--c-traffic); }

/* Het beeld begint lager, zodat de kroon er niet overheen valt. */
@media (max-width: 699px) {
  .partner--stad .partner__beeld { margin-top: 0; }
  .partner--stad .partner__kroon { top: auto; bottom: calc(100% - 42px); }
}

/* =====================================================================
   VERKOOPPAGINA /ondernemers/
   ===================================================================== */

.verkoop-hero__titel {
  font-size: clamp(1.875rem, 7vw, 3.25rem);
}

/* --- blok met tekst en beeld --- */

.verkoop-blok h2 {
  font-size: clamp(1.375rem, 4.5vw, 1.875rem);
}

/* --- voor- en na-voorbeeld --- */

/* --- cijferbalk --- */

.verkoop-cijfer b {
  font-size: clamp(1.5rem, 5vw, 2rem);
}

/* --- drie argumenten --- */

/* --- schaarste bij het stadspakket --- */

/* --- stappen --- */

/* --- vragen --- */

/* --- afsluiting --- */

.verkoop-slot h2 { font-size: clamp(1.375rem, 5vw, 1.875rem);   }

/* =====================================================================
   VERKOOPPAGINA /ondernemers/
   ===================================================================== */

.verkoop-hero {
  position: relative; overflow: hidden;

}
.verkoop-hero > .wrap { position: relative; z-index: 1; }

.verkoop-hero__beeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

/* Het verloop moet de tekst leesbaar houden, niet de foto verbergen:
   bovenaan donker voor de kop, onderaan doorzichtiger zodat je de stad
   nog herkent. */
.verkoop-hero--foto::after {
  content: ""; position: absolute; inset: 0;
}

.verkoop-hero__kop {
  font-size: .6875rem; text-transform: uppercase;
  font-weight: 700;
}
.verkoop-hero__titel {
  font-size: clamp(1.875rem, 7vw, 3.25rem);
    margin: 0 0 18px;
}
.verkoop-hero__lede {
  font-size: 1.0625rem; line-height: 1.6;
}

.verkoop-hero__klein { font-size: .75rem;   }
.verkoop-hero .btn--ghost {
  background: transparent; border-color: rgba(255,255,255,.4); color: #fff;
}
.verkoop-hero .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* --- blok met tekst en beeld --- */
.verkoop-blok {
  display: grid; gap: 26px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 860px) {
  .verkoop-blok { grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px; align-items: center; }
}

.verkoop-label {
  font-size: .6875rem; text-transform: uppercase;
    margin: 0 0 8px;
}
.verkoop-blok h2 {
  font-size: clamp(1.375rem, 4.5vw, 1.875rem); letter-spacing: -.025em;
  margin: 0 0 12px; line-height: 1.15;
}
.verkoop-blok p { font-size: .9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.verkoop-blok strong { color: var(--ink); }
.verkoop-blok__cta { margin: 18px 0 0; }

/* --- voor- en na-voorbeeld --- */
.verkoop-blok__beeld { display: flex; flex-direction: column; gap: 12px; }
.voorbeeld {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.voorbeeld--kaal { opacity: .65; }
.voorbeeld--vol { border-color: var(--c-event); box-shadow: var(--shadow-sm); }
.voorbeeld__label {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--ink-faint); margin-bottom: 4px;
}
.voorbeeld__label--ok { color: var(--c-event); }
.voorbeeld__naam { font-size: 1.0625rem; font-weight: 700; margin-bottom: 4px; }
.voorbeeld__regel { font-size: .8125rem; color: var(--ink-faint); }
.voorbeeld--vol .voorbeeld__regel { color: var(--ink-soft); }

/* --- cijferbalk --- */
.verkoop-cijfers { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .verkoop-cijfers { grid-template-columns: repeat(4, 1fr); } }

.verkoop-cijfer {
  display: flex; flex-direction: column;
  padding: 18px; border-radius: var(--r-md);
  background: var(--surface-alt);
}
.verkoop-cijfer b {
  font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
}
.verkoop-cijfer span { font-size: .8125rem; color: var(--ink-soft); margin-top: 5px; }

/* --- drie argumenten --- */
.verkoop-drie { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .verkoop-drie { grid-template-columns: repeat(3, 1fr); } }

.verkoop-kaart {
  padding: 22px 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.verkoop-kaart__icoon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: var(--brand-tint);
  margin-bottom: 14px;
}
.verkoop-kaart h3 { font-size: 1rem; margin: 0 0 6px; letter-spacing: -.01em; }
.verkoop-kaart p { font-size: .875rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* --- schaarste bij het stadspakket --- */

/* --- stappen --- */
.verkoop-stappen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.verkoop-stappen li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.verkoop-stap__nr {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
    font-weight: 800; font-size: .875rem;
}
.verkoop-stappen h3 { font-size: 1rem; margin: 4px 0 6px; }
.verkoop-stappen p { font-size: .875rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.verkoop-stap__cta { margin-top: 14px !important; }

/* --- vragen --- */
.verkoop-vragen { display: flex; flex-direction: column; gap: 8px; }
.verkoop-vragen details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.verkoop-vragen summary {
  padding: 15px 18px; cursor: pointer;
  font-weight: 700; font-size: .9375rem;
  list-style: none;
}
.verkoop-vragen summary::-webkit-details-marker { display: none; }
.verkoop-vragen summary::after {
  content: "+"; float: right; color: var(--ink-faint); font-weight: 400;
  font-size: 1.25rem; line-height: 1;
}
.verkoop-vragen details[open] summary::after { content: "−"; }
.verkoop-vragen details p {
  margin: 0; padding: 0 18px 16px;
  font-size: .875rem; line-height: 1.6; color: var(--ink-soft);
}

/* --- afsluiting --- */
.verkoop-slot {
  text-align: center; padding: 40px 24px;
}
.verkoop-slot__pin { display: inline-flex;  margin-bottom: 14px; }
.verkoop-slot h2 { font-size: clamp(1.375rem, 5vw, 1.875rem); margin: 0 0 8px; letter-spacing: -.02em; }
.verkoop-slot p { font-size: .9375rem; opacity: .8; margin: 0 0 22px; }
.verkoop-slot__acties { margin-bottom: 16px !important; }
.verkoop-slot__klein { font-size: .8125rem; opacity: .6; margin: 0 !important; }
.verkoop-slot a:not(.btn) { color: #fff; text-decoration: underline; }

/* --- zoekveld in de kop --- */
.verkoop-zoek {
  display: flex; align-items: center; gap: 8px;
  max-width: 30rem; margin: 0 auto 16px;
  padding: 7px 7px 7px 14px;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(10,16,30,.22);
}
.verkoop-zoek__icoon { flex: 0 0 auto; line-height: 0;  }
.verkoop-zoek input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: .9375rem; color: var(--ink); padding: 10px 0;
}
.verkoop-zoek input::placeholder { color: var(--ink-faint); }
.verkoop-zoek .btn { flex: 0 0 auto; }

/* --- prijsblokken --- */
.prijzen { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .prijzen { grid-template-columns: repeat(3, 1fr); } }

.prijs {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 22px;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* Het middelste blok mag opvallen: dat is het pakket waarmee je wilt dat
   mensen beginnen, en een duidelijke voorkeur helpt kiezen. */
.prijs--top {
  border: 2px solid var(--brand);
}
@media (min-width: 900px) {
  .prijs--top { transform: translateY(-10px); padding-bottom: 36px; }
}

.prijs__vlag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px;

  font-size: .6875rem; font-weight: 800; letter-spacing: .03em;
  white-space: nowrap;
}

.prijs__kop { margin-bottom: 18px; }
.prijs__naam {
  display: block; font-size: 1.125rem; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: 3px;
}
.prijs__zin { display: block; font-size: .8125rem; color: var(--ink-faint); line-height: 1.45; }

.prijs__bedrag {
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.prijs__bedrag b {
  display: block; font-size: 2.5rem; font-weight: 900;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.prijs--top .prijs__bedrag b { color: var(--brand); }
.prijs__bedrag span { display: block; font-size: .75rem; color: var(--ink-faint); margin-top: 6px; }

.prijs__punten { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.prijs__punten li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: .875rem; line-height: 1.45;
}
.prijs__punten li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--c-event-tint);
}
.prijs__punten li::after {
  content: "✓"; position: absolute; left: 4px; top: 2px;
  font-size: .625rem; font-weight: 900; color: var(--c-event);
}

.prijs__schaarste {
  padding: 9px 12px; border-radius: var(--r-sm);
  background: #FFF6F0; border: 1px solid #FAE2D2;
  font-size: .75rem;  margin: 0 0 16px;
}
.prijs__knop { width: 100%; justify-content: center; }

.prijzen__voet {
  font-size: .75rem; color: var(--ink-faint);
  text-align: center; margin: 18px 0 0;
}

/* --- claimresultaten --- */
.zoekrij__actie {
  flex: 0 0 auto;
}
.zoekrij--bezet { opacity: .55; }

/* --- voortgang in het claimtraject --- */
.claimstappen {
  list-style: none; margin: 0 0 var(--gap); padding: 0;
  display: grid; gap: 8px; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .claimstappen { grid-template-columns: repeat(4, 1fr); } }

.claimstap {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.claimstap__bol {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-alt); color: var(--ink-faint);
  font-size: .8125rem; font-weight: 800;
}
.claimstap__tekst { display: flex; flex-direction: column; min-width: 0; }
.claimstap__tekst strong { font-size: .875rem; }
.claimstap__tekst span { font-size: .6875rem; color: var(--ink-faint); }

.claimstap--klaar .claimstap__bol { background: var(--c-event); color: #fff; }

.claimstap--nu { border-color: var(--brand); border-width: 2px; }
.claimstap--nu .claimstap__bol { background: var(--brand); color: #fff; }

.claimstap--later { opacity: .55; }

/* --- bevestigingsbericht --- */
.claimklaar {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px; margin-bottom: var(--gap);

  background: #F2FBF5; border: 1px solid #A7D8B5;
}
.claimklaar__vink {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-event); color: #fff; font-size: 1.125rem; font-weight: 900;
}
.claimklaar h2 { font-size: 1.125rem; margin: 0 0 4px; letter-spacing: -.01em; }
.claimklaar p { font-size: .875rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* Pakketten pas prominent als de basis staat. Iemand die zijn gegevens
   nog niet heeft ingevuld, moet dát eerst doen. */
.pakket-blok--later { opacity: .6; }
.pakket-blok--later:hover { opacity: 1; }

/* =====================================================================
   COMPACTE TEGELS OP DE STADSPAGINA

   Drukte en "in cijfers" stonden in twee volle secties onder elkaar.
   Samen kostte dat ruim 300 pixels, waardoor de live kaart onder de vouw
   viel — en die kaart is de reden dat mensen hier komen.
   ===================================================================== */

/* =====================================================================
   KOPBLOK STADSPAGINA
   Later in het bestand wint bij gelijke specificiteit, dus deze regels
   overschrijven de bestaande vanzelf.
   ===================================================================== */

/* De titel verdeelt zichzelf over de regels.
   text-wrap: balance maakt de regels ongeveer even lang in plaats van
   de laatste met één woord te laten staan. Precies het probleem bij
   "Wat gebeurt er in Groningen?" */
.hero__titel {
  text-wrap: balance;
}

@media (min-width: 900px) {
  /* 30ch was te smal voor deze lettergrootte: elke plaatsnaam van meer
     dan acht letters brak dan af. 36ch geeft twee nette regels. */

  .hero__titel { font-size: clamp(2.25rem, 4vw, 3rem); }
}

@media (min-width: 1200px) {
  .hero__copy { max-width: 40ch; }
}

/* Het verloop liep te ver door, waardoor de foto pas op tweederde begon
   en de linkerhelft leeg wit was. Nu zie je de stad eerder. */

/* Op mobiel blijft de foto onder de tekst staan; daar was niets mis mee. */

/* =====================================================================
   STATUSKAARTEN
   ===================================================================== */

/* De ondertitel "De afgelopen 24 uur" viel weg.
   Het raster wordt 46 pixels opgetild zodat het over de hero heen valt,
   en dat dekte de regel eronder af. De kop krijgt nu ruimte mee zodat er
   niets meer onder verdwijnt. */
@media (min-width: 900px) {
  .section--lift .section__head { padding-top: 24px; padding-bottom: 54px; }
  .section--lift .section__head p { position: relative; z-index: 3; }
}

/* Vierde kleurvariant voor de druktekaart bij "normaal": de merkkleur,
   want dat is geen waarschuwing en geen goed nieuws. */
.status-card.t-brand .status-card__icon { background: var(--brand); color: #fff; }
.status-card.t-inwoners .status-card__icon { background: #0D9488; color: #fff; }
.status-card.t-cijfers  .status-card__icon { background: #7C3AED; color: #fff; }
.status-card.t-wrapped  .status-card__icon { background: #BE185D; color: #fff; }

/* Een kaart met een lange tekstwaarde ("Veel drukker dan normaal") moet
   kunnen afbreken zonder de rij hoger te maken dan nodig. */
.status-card__value--text {
  line-height: 1.25;
  text-wrap: balance;
}

/* ---------------------------------------------- Drukte valt op
   Een kaart die zegt "veel drukker dan normaal" moet je ook zien zonder
   te lezen. Hetzelfde signaal als het live-bolletje op de kaart: een
   rustige puls, geen knipperlicht.

   Bewust subtiel. Een tegel die hard pulseert lees je één keer en daarna
   negeer je hem, en dan is het signaal niets meer waard. */
.status-card--pulse {
  position: relative;
}

.status-card--pulse::after {
  content: "";
  position: absolute; top: 14px; right: 14px;
  width: 9px; height: 9px; border-radius: 50%;
}

@keyframes kaartPuls {
  0%, 100% { background: var(--surface); }
  50%      { background: #FFF6EF; }
}

@keyframes bolPuls {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

/* Wie beweging heeft uitgezet, krijgt de kleur zonder de animatie. */

/* =====================================================================
   ONTWERPLAAG — de nieuwe huisstijl
   ---------------------------------------------------------------------
   Deze regels staan achteraan en winnen daarmee van de bestaande opmaak
   bij gelijke specificiteit. Zo kan de site stap voor stap om, zonder dat
   er ergens iets breekt: wat nog niet is omgezet blijft werken zoals het
   was.
   ===================================================================== */

@media (min-width: 900px) {
  :root { --blok-gap: 24px; --blok-pad: 26px; }
}

/* ---------------------------------------------------------------- Kaart */

/* Eén kaartvorm voor de hele site: witte achtergrond, lichte rand,
   zachte schaduw. Alles wat nu nog een eigen randstijl heeft, gaat
   hiernaartoe. */
.blok {
  background: var(--surface);
  border: 1px solid var(--kaart-rand);
  border-radius: 16px;
  box-shadow: var(--kaart-schaduw);
  overflow: hidden;
}

.blok__kop {
  display: flex; align-items: center; gap: 12px;
  padding: 18px var(--blok-pad);
  border-bottom: 1px solid var(--kaart-rand);
}

.blok__kop h2,
.blok__kop h3 {
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em;
  margin: 0; line-height: 1.25;
}

.blok__kop p {
  font-size: .8125rem; color: var(--ink-faint); margin: 2px 0 0;
}

/* Het icoon in de titelbalk: rond, gevuld, in de kleur van het onderwerp. */
.blok__icoon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--paars-tint); color: var(--paars);
}

.blok__body { padding: var(--blok-pad); }

/* ------------------------------------------------------- Ronde badges */

/* Gekleurde ronde badge met wit icoon. Vervangt op termijn de losse
   icoonstijlen in de feed, de statuskaarten en de meldingenlijst. */
.badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: #fff;
}
.badge--klein { width: 28px; height: 28px; }
.badge--groot { width: 42px; height: 42px; }

.badge.t-p2000        { background: var(--c-p2000); }
.badge.t-heli         { background: var(--c-heli); }
.badge.t-knrm         { background: var(--c-knrm); }
.badge.t-traffic      { background: var(--c-traffic); }
.badge.t-train        { background: var(--c-train); }
.badge.t-outage       { background: var(--c-outage); }
.badge.t-event        { background: var(--c-event); }
.badge.t-bekendmaking { background: var(--c-bekendmaking); }
.badge.t-waarschuwing { background: var(--c-waarschuwing); }
.badge.t-beving       { background: var(--c-beving); }
.badge.t-weather      { background: var(--c-weather); }
.badge.t-brand        { background: var(--brand); }
.badge.t-paars        { background: var(--paars); }

/* ------------------------------------------------- Strook met kerncijfers */

/* De rij bovenaan met een handvol getallen en hun verandering. Op mobiel
   schuift hij horizontaal; dat is hier wél de juiste keuze, want de
   volgorde is betekenisvol en je ziet aan de afgesneden kaart dat er meer
   is. */

/* -------------------------------------------------------- Meldingenlijst */

/* De lijst rechts van de kaart: ronde badge, titel, plaats en soort
   eronder, tijd rechts. */
.meldingen { display: flex; flex-direction: column; }

.melding {
  display: flex; align-items: center; gap: 13px;
  padding: 13px var(--blok-pad);
  border-bottom: 1px solid var(--kaart-rand);
  color: inherit;
}
.melding:last-child { border-bottom: 0; }
.melding:hover { background: var(--surface-alt); text-decoration: none; }

/* ------------------------------------------------------------- Rasters */

/* Twee kolommen waarvan de linker breder is: kaart naast lijst, grafiek
   naast ranglijst. Onder 980 pixels onder elkaar. */
.duo {
  display: grid; gap: var(--blok-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .duo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
}

/* ------------------------------------------------------- Ranglijst in blok */

.rang { display: flex; flex-direction: column; }
.rang__rij {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--kaart-rand);
  color: inherit; font-size: .875rem;
}
.rang__rij:last-child { border-bottom: 0; }
.rang__rij:hover { text-decoration: none; }
.rang__nr {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--paars-tint); color: var(--paars);
  font-size: .75rem; font-weight: 800;
}
.rang__rij:nth-child(-n/**/+3) .rang__nr { background: var(--paars); color: #fff; }
.rang__naam { flex: 1; min-width: 0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rang__waarde { flex: 0 0 auto; font-size: .8125rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Ondernemersblok */

/* Het paarse blok uit het ontwerp: uitnodiging aan ondernemers, met
   vinkjes en één knop. */
.werfblok {
  background: linear-gradient(160deg, var(--paars-tint) 0%, #EAF0FE 100%);
  border: 1px solid #DDD6FB;
  border-radius: 16px;
  padding: var(--blok-pad);
}
.werfblok__kop {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 800; color: var(--paars); margin-bottom: 12px;
}
.werfblok h2 {
  font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2;
  margin: 0 0 10px;
}
.werfblok p { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }
.werfblok .btn { background: var(--paars); border-color: var(--paars); }
.werfblok .btn:hover { background: var(--paars-donker); border-color: var(--paars-donker); }

.werfblok__punten { list-style: none; margin: 18px 0 0; padding: 0; }
.werfblok__punten li {
  position: relative; padding-left: 24px; margin-bottom: 8px;
  font-size: .8125rem; color: var(--ink-soft);
}
.werfblok__punten li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--c-event); font-weight: 900; font-size: .75rem;
}

/* ------------------------------------------------------ Stadstegels */

/* Foto met de naam eronder, zoals de rij populaire steden in het ontwerp. */
.stadkaarten { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .stadkaarten { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .stadkaarten { grid-template-columns: repeat(6, 1fr); } }

.stadkaart {
   border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--kaart-rand);
  color: inherit;
}
.stadkaart:hover { text-decoration: none; border-color: var(--brand); }
.stadkaart__beeld { display: block; aspect-ratio: 16 / 10;  }
.stadkaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stadkaart__voet { display: flex; align-items: center; gap: 8px;  }
.stadkaart__naam { flex: 1; font-size: .875rem; font-weight: 700; }

.stadkaart__pijl { color: var(--ink-faint); font-size: .8125rem; }

/* --------------------------------------------------------- Legenda */

/* -------------------------------------------------------- Sectiekop */

.sectiekop {
  display: flex; align-items: flex-end; gap: 14px;
  margin-bottom: var(--blok-gap);
}
.sectiekop__tekst { flex: 1; min-width: 0; }
.sectiekop h2 {
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
  letter-spacing: -.025em; margin: 0 0 3px; line-height: 1.2;
}
.sectiekop p { font-size: .875rem; color: var(--ink-faint); margin: 0; }
.sectiekop__actie { flex: 0 0 auto; font-size: .8125rem; font-weight: 600; }

/* Meer ruimte tussen de secties dan de oude opmaak gaf. */
.section--ruim { padding-top: 34px; padding-bottom: 0; }
@media (min-width: 900px) { .section--ruim { padding-top: 44px; } }

/* =====================================================================
   HUISSTIJL — FUNDAMENT
   ---------------------------------------------------------------------
   Kleuren, typografie, kaartvormen, knoppen, navigatie en footer.
   Deze laag staat achteraan en wint daarmee van de oude opmaak bij
   gelijke specificiteit. Niets hierboven is verwijderd: wat in ronde 2
   t/m 4 nog niet is omgezet, blijft werken zoals het was.
   ===================================================================== */

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

body {
  background: var(--bg);
  color: var(--ink);
  letter-spacing: -.004em;
}

/* ------------------------------------------------------------ Typografie */

h1, h2, h3 { letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 6.4vw, 3.4rem); letter-spacing: -.04em; line-height: 1.06; }
h2 { font-size: clamp(1.2rem, 3.2vw, 1.625rem); line-height: 1.18; }
h3 { font-size: 1rem; }

.lede { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }
.small { font-size: .8125rem; }

/* Kleine bovenkop in kapitalen, zoals "ACTUEEL · BETROUWBAAR · LOKAAL". */
.eyebrow {
  display: block;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- Kaarten */

/* Eén vorm voor alles wat op een kaart staat. .card en .blok zijn vanaf nu
   hetzelfde ding; .card blijft bestaan omdat honderden regels markup hem
   gebruiken. */
.card,
.blok {
  background: var(--surface);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}

.card__head {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--kaart-rand);
}
.card__head h2,
.card__head h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.card__head .small { color: var(--ink-faint); margin-left: auto; }
.card__body { padding: 20px; }

@media (min-width: 900px) {
  .card__head { padding: 18px 22px; }
  .card__body { padding: 22px; }
}

/* Kaart die als link werkt: alleen de rand reageert, geen sprong. */
a.card:hover,
a.blok:hover { text-decoration: none; border-color: var(--line-strong); }

/* --------------------------------------------------------------- Knoppen */

.btn {
  min-height: 46px; padding: 0 20px;
  border-radius: var(--r-md);
  font-weight: 650; font-size: .9375rem;
  letter-spacing: -.01em;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.btn--primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(91,70,224,.24);
}
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost {
  background: var(--surface); border-color: var(--line); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { border-color: var(--line-strong); background: var(--surface); }
.btn--groot { min-height: 52px; padding: 0 26px; font-size: 1rem; }

/* Chips: plaatsnamen, filters, snelkoppelingen. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.chip:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }
.chip--meer { background: var(--brand-tint); border-color: transparent; color: var(--brand); }

/* ------------------------------------------------------------- Kopbalk */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--kaart-rand);
}

.site-header__inner {
  height: var(--header-h);
  gap: 10px;
}

.logo__beeld { height: 30px; width: auto; }
@media (min-width: 900px) { .logo__beeld { height: 34px; } }

.main-nav a,
.meer > summary {
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600;
  color: var(--ink-soft);
  padding: 9px 13px;
}
.main-nav a:hover,
.meer > summary:hover,
.meer[open] > summary {
  background: var(--surface-alt); color: var(--ink);
}
.main-nav a.is-active {
  background: var(--brand-tint); color: var(--brand);
}

.meer__paneel {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 7px;
}
.meer__paneel a { border-radius: var(--r-sm); }

/* De pillen rechts in de balk: weer en plaatsnaam. */
.city-pill,
.temp-pill {
  border-radius: var(--r-pill);
  border-color: var(--kaart-rand);
  box-shadow: none;
  background: var(--surface-alt);
  font-size: .8125rem; font-weight: 600;
  padding: 8px 13px;
  color: var(--ink);
}
.city-pill svg,
.temp-pill svg { color: var(--brand); opacity: 1; }

/* -------------------------------------------------------- Onderbalk mobiel */

.bottom-nav {
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--kaart-rand);
  box-shadow: 0 -2px 16px rgba(16,24,40,.06);
}
.bottom-nav a { color: var(--ink-faint); gap: 4px; }
.bottom-nav a.is-active { color: var(--brand); }
.bottom-nav a.is-active svg { transform: translateY(-1px); }

/* ---------------------------------------------------------------- Sectie */

.section { padding: 30px 0; }
@media (min-width: 900px) { .section { padding: 42px 0; } }

.section__head { margin-bottom: 18px; }
.section__head h2 { font-size: clamp(1.25rem, 3.4vw, 1.625rem); }
.section__head p { color: var(--ink-faint); font-size: .875rem; margin-top: 4px; }

/* ----------------------------------------------------------- Statuskaart */

.status-card {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}
.status-card:hover { border-color: var(--brand); }

/* --------------------------------------------------------------- Footer */

/* Donkere voet, zoals in het ontwerp. De oude footer was wit en liep
   daardoor over in de pagina; hiermee heeft de site een duidelijk einde. */
.site-footer {
  margin-top: 48px;
  padding: 44px 0 0;
  border-top: 0;
  background: var(--donker);
  color: var(--donker-tekst);
  font-size: .875rem;
}
.site-footer h3 {
  color: #fff; font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 12px;
}
.site-footer p { color: var(--donker-tekst); line-height: 1.65; }
.site-footer a { color: var(--donker-tekst); }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer ul { margin-bottom: 0; }
.site-footer li { margin-bottom: 8px; }

.footer-cols { gap: 28px; padding-bottom: 36px; }
@media (min-width: 900px) {
  .footer-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
}

.footer-merk { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.footer-merk__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand); color: #fff;
}
.footer-merk__naam {
  font-size: 1.0625rem; font-weight: 800; letter-spacing: -.025em; color: #fff;
}

/* De onderste regel: merk links, korte links in het midden, tagline rechts. */
.footer-bar {
  border-top: 1px solid var(--donker-lijn);
  padding: 18px 0 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  font-size: .8125rem;
}
.footer-bar__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-bar__rechts { margin-left: auto; color: var(--donker-tekst); }
@media (max-width: 599px) {
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .footer-bar__rechts { margin-left: 0; }
}

/* Op mobiel staat de onderbalk vast onderin; de footer mag daar niet
   achter verdwijnen. */
@media (max-width: 899px) {
  .site-footer { padding-bottom: 8px; }
}

/* --------------------------------------------------------- Kleine details */

.live-dot { background: var(--c-p2000); }

.breadcrumbs { color: var(--ink-faint); }
.breadcrumbs a { color: var(--ink-faint); }
.breadcrumbs a:hover { color: var(--brand); }

.skip:focus {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
}

:focus-visible { outline-color: var(--brand); border-radius: 6px; }

::selection { background: var(--brand-zacht); color: var(--ink); }

/* =====================================================================
   HUISSTIJL — HOMEPAGE
   ---------------------------------------------------------------------
   Hero met de foto rechts, een strook kerncijfers, kaart naast de
   meldingen, het datablok in drie kolommen en de plaatsen als fotorij.
   ===================================================================== */

/* ------------------------------------------------------------------ Hero */

/* Op mobiel blijft de foto achter de tekst met een witte sluier; daar is
   geen ruimte voor twee kolommen. Vanaf 900px schuift de foto naar rechts
   en staat de tekst links op wit, zoals in het ontwerp. */
.landing {
  background:
    radial-gradient(80% 70% at 88% -10%, #EDE9FE 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FD 100%);
  border-bottom: 1px solid var(--kaart-rand);
  padding: 36px 0 34px;
  text-align: left;
}

.landing__inner { max-width: var(--max); }

.landing__eyebrow {
  color: var(--ink-faint);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 14px;
}

.landing h1 {
  font-size: clamp(2.2rem, 8.5vw, 3.9rem);
  letter-spacing: -.04em; line-height: 1.04;
  margin-bottom: 16px;
  max-width: 15ch;
}

.landing__lede {
  color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6;
  max-width: 44ch; margin: 0 0 26px;
}

.landing__snel { justify-content: flex-start; margin-top: 20px; }

/* De zoeker is het enige waar je op de homepage iets mee doet, dus hij
   mag groot zijn: één veld, één knop, allebei op ruime raakhoogte. */
.zoeker { margin: 0; max-width: 560px; }
.zoeker__rij {
  gap: 10px;
  border-radius: var(--r-lg);
  border-color: var(--kaart-rand);
  padding: 8px 8px 8px 46px;
  box-shadow: var(--kaart-schaduw);
}
.zoeker__rij:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint), var(--kaart-schaduw);
}
.zoeker__icoon { left: 16px; color: var(--ink-faint); }
.zoeker input { padding: 10px 0; font-size: 1rem; }
.zoeker input::placeholder { color: var(--ink-faint); }
.zoeker .btn { min-height: 46px; padding: 0 22px; }
.zoeker__melding { margin: 14px 0 0; max-width: 52ch; }

@media (max-width: 899px) {
  /* Zonder tweede kolom mag de knop onder het veld: naast elkaar wordt
     het veld op 360px te smal om een plaatsnaam in te lezen. */
  .zoeker__rij { flex-wrap: wrap; }
}

@media (min-width: 900px) {
  .landing { padding: 0; border-bottom: 1px solid var(--kaart-rand); }
  .landing__inner { padding-top: 84px; padding-bottom: 80px; }
  .landing h1 { font-size: clamp(2.8rem, 4.4vw, 3.6rem); }

  /* Foto rechts, tekst links op wit. De verloopsluier loopt van links
     dekkend naar rechts doorzichtig, zodat de tekst leesbaar blijft
     zonder dat de foto achter een grijze waas verdwijnt. */
  .landing--beeld .landing__inner { position: relative; z-index: 1; }
  .landing--beeld .landing__media { inset: 0 0 0 auto; width: 62%; }
  .landing--beeld .landing__media::after {
    background: linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 26%,
      rgba(255,255,255,.55) 58%,
      rgba(255,255,255,.10) 88%,
      rgba(255,255,255,0) 100%);
  }
  .landing--beeld::before {
    content: ""; position: absolute; inset: 0 62% 0 0; z-index: -1;
    background: #fff;
  }
  .landing--beeld .landing__media--mozaiek {
    grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
  }
  .landing h1, .landing__lede, .zoeker { max-width: 34ch; }
  .landing__lede { max-width: 46ch; }
  .zoeker { max-width: 560px; }
}

/* -------------------------------------------------------- Kerncijferstrook */

/* De strook schuift op mobiel; laat zien dat er meer is door de laatste
   cel half af te snijden in plaats van hem te laten passen. */

/* --------------------------------------------------------- Kaart en feed */

/* De kaart is een .card en staat in een .duo. Beide kolommen beginnen
   bovenaan; de feed groeit mee met het aantal meldingen. */
.duo > .map-card { overflow: hidden; }

#map { height: 360px; }
@media (min-width: 980px) { #map { height: 520px; } }

.map-legend { border-top-color: var(--kaart-rand); padding: 13px; }

/* De meldingenlijst: ronde badge links, tijd rechts. De volgorde in de
   HTML blijft tijd-icoon-tekst, dus de kolommen worden hier omgezet —
   zo hoeft feed.php niet mee te veranderen en blijven de stadspagina's
   met dezelfde lijst werken. */
.feed__item {
  grid-template-columns: 34px minmax(0, 1fr) auto;

  border-bottom-color: var(--kaart-rand);
}
.feed__item:hover { background: var(--surface-alt); }

.feed__icon  { order: 1; width: 34px; height: 34px; border-radius: 50%; }

.feed__time  { order: 3; padding-top: 0; font-weight: 500; font-size: .75rem; }

.feed__title {
  font-weight: 600;
  display: -webkit-box;  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed__meta { color: var(--ink-faint);  }
.feed__meta a { color: var(--ink-faint); }
.feed__meta a:hover { color: var(--brand); }

/* Alle typen een tint, niet alleen de vier die er toevallig stonden. */
.feed__item.t-p2000        .feed__icon { background: var(--c-p2000-tint);   color: var(--c-p2000); }
.feed__item.t-traffic      .feed__icon { background: var(--c-traffic-tint); color: var(--c-traffic); }
.feed__item.t-event        .feed__icon { background: var(--c-event-tint);   color: var(--c-event); }
.feed__item.t-train        .feed__icon { background: var(--c-train-tint);   color: var(--c-train); }
.feed__item.t-heli         .feed__icon { background: var(--c-heli-tint);    color: var(--c-heli); }
.feed__item.t-knrm         .feed__icon { background: var(--c-knrm-tint);    color: var(--c-knrm); }
.feed__item.t-outage       .feed__icon { background: var(--c-outage-tint);  color: #A16207; }
.feed__item.t-bekendmaking .feed__icon { background: var(--c-bekendmaking-tint); color: var(--c-bekendmaking); }
.feed__item.t-beving       .feed__icon { background: var(--c-beving-tint);  color: var(--c-beving); }
.feed__item.t-waarschuwing .feed__icon { background: var(--c-waarschuwing-tint); color: var(--c-waarschuwing); }
.feed__item.t-weather      .feed__icon { background: var(--c-weather-tint); color: #B45309; }

/* --------------------------------------------------------------- Cijfers */

.cijferkaarten {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--blok-gap);
}
@media (min-width: 900px) { .cijferkaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cijferkaart {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
  padding: 16px 18px;
}
.cijferkaart .badge { margin-bottom: 12px; }
.cijferkaart__label { font-size: .8125rem; color: var(--ink-soft); font-weight: 600; }
.cijferkaart__waarde {
  font-size: clamp(1.5rem, 4vw, 1.875rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.1; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.cijferkaart__note { font-size: .75rem; color: var(--ink-faint); margin-top: 3px; }

/* Grafiek breed, ranglijst en ondernemersblok ernaast. */
.cijfer-rij { display: grid; gap: var(--blok-gap); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .cijfer-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cijfer-rij { grid-template-columns: 1.5fr 1fr 1fr; } }

.cijfer-rij .werfblok { display: flex; flex-direction: column; }
.cijfer-rij .werfblok .btn { align-self: flex-start; }

/* ------------------------------------------------------------- Plaatsen */

/* De naam staat in de voet, het aantal meldingen eronder. Zonder vaste
   plek zou een tegel zonder meldingen korter zijn dan zijn buren. */
.stadkaart { position: relative; display: flex; flex-direction: column; }
.stadkaart__beeld {
  background:
    radial-gradient(120% 100% at 80% 0%, hsl(var(--hero-hue, 260) 60% 90%) 0%, transparent 62%),
    linear-gradient(180deg, #F3F5FC 0%, #E8ECF8 100%);
}
.stadkaart__voet { padding: 12px 13px 2px; }
.stadkaart__bij {
  display: block; padding: 0 13px 12px;
  font-size: .6875rem; color: var(--ink-faint);
}
.stadkaart:hover .stadkaart__pijl { color: var(--brand); }

.stad-meer { margin-top: var(--blok-gap); }

/* ------------------------------------------------------------- Uitleg */

.uitleg .blok__body p { font-size: .9375rem; line-height: 1.7; }

/* --------------------------------------------------------- Advertenties */

.adv { border-radius: var(--r-lg); }

/* =====================================================================
   HUISSTIJL — MOBIELE CORRECTIES
   ---------------------------------------------------------------------
   Vier dingen die op een telefoon mis gingen.
   ===================================================================== */

/* 1. Witte strook onder de donkere footer.
      body had 64px onderruimte voor de vaste onderbalk. Die ruimte valt
      ónder de footer en had de paginakleur, dus je zag een lichte band
      onder een donkere voet. De ruimte hoort bij de footer zelf. */
@media (max-width: 899px) {
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* 2. De randen in de kerncijferstrook stonden op de verkeerde cellen.
      De titel is cel 1 en telt mee, dus de rechterkolom is oneven. */

/* 3. Acht plaatschips onder elkaar vulden een half scherm. Op mobiel
      schuiven ze opzij; de afgesneden chip laat zien dat er meer is. */
@media (max-width: 699px) {
  .landing__snel {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Doorlopen tot buiten de marge, anders lijkt de rij al op te houden
       waar het scherm nog doorgaat. */
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding: 2px var(--pad);
  }
  .landing__snel::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
}

/* 4. Sectiekop: titel en actielink naast elkaar werd op 360px een
      geplette kop met een link van twee regels. */
@media (max-width: 599px) {
  .sectiekop { flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; }
  .sectiekop__tekst { flex: 1 0 100%; }
  .sectiekop__actie { order: 3; }
}

/* Wat kleinere dingen die op een smal scherm knelden. */
@media (max-width: 599px) {
  .card__head,
  .blok__kop { padding: 15px 16px; }
  .card__body,
  .blok__body { padding: 16px; }

  .cijferkaart { padding: 14px 15px; }
  .landing__inner { padding-top: 30px; }
  .werfblok { padding: 20px; }
}

/* =====================================================================
   HUISSTIJL — STADSPAGINA
   ===================================================================== */

/* ------------------------------------------------------------------ Hero */

/* Dezelfde opbouw als de landelijke hero: foto rechts, tekst links op
   wit. Op mobiel staat de foto in de flow onder de tekst — daar is een
   foto áchter tekst nooit rustig genoeg om te lezen. */
.hero {
  border-bottom: 1px solid var(--kaart-rand);
  padding: 26px 0 0;
}

.hero--plain {
  background:
    radial-gradient(110% 90% at 88% -10%,
      hsl(var(--hero-hue, 258) 72% 95%) 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FD 100%);
}

.hero--photo { background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FC 100%); }

.hero__titel {
  font-size: clamp(2rem, 7.6vw, 3.4rem);
  letter-spacing: -.04em; line-height: 1.05;
  margin-bottom: 14px;
}
.hero__copy .lede { font-size: 1.0625rem; line-height: 1.6; margin-bottom: 22px; }
.hero__copy .btn { box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(91,70,224,.24); }

.hero__credit { color: var(--ink-faint); }

@media (min-width: 900px) {
  .hero { padding: 76px 0 84px; }
  .hero__copy { max-width: 32ch; }
  .hero--photo .hero__media { left: 38%; width: 62%; }
  .hero--photo .hero__media::after {
    background: linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 22%,
      rgba(255,255,255,.55) 56%,
      rgba(255,255,255,.10) 86%,
      rgba(255,255,255,0) 100%);
  }
  .hero--photo::before { inset: 0 62% 0 0; }
}

/* --------------------------------------------------------- Statuskaarten */

/* Zelfde vorm als de kerncijfers op de homepage: ronde gevulde badge,
   groot getal, korte toelichting eronder. */
.status-grid { gap: 12px; }

.status-card {
  padding: 16px;
  display: flex; flex-direction: column;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.status-card:hover { box-shadow: var(--shadow-md); }

.status-card__top { align-items: center; gap: 10px; margin-bottom: 10px; }

/* Gevulde cirkel met wit icoon. De tint staat nog in de oude regels; die
   wint hier niet meer, want deze staan later in het bestand. */
.status-card__icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  color: #fff;
}
.status-card.t-p2000        .status-card__icon { background: var(--c-p2000); }
.status-card.t-heli         .status-card__icon { background: var(--c-heli); }
.status-card.t-knrm         .status-card__icon { background: var(--c-knrm); }
.status-card.t-traffic      .status-card__icon { background: var(--c-traffic); }
.status-card.t-train        .status-card__icon { background: var(--c-train); }
.status-card.t-outage       .status-card__icon { background: var(--c-outage); }
.status-card.t-event        .status-card__icon { background: var(--c-event); }
.status-card.t-bekendmaking .status-card__icon { background: var(--c-bekendmaking); }
.status-card.t-beving       .status-card__icon { background: var(--c-beving); }
.status-card.t-waarschuwing .status-card__icon { background: var(--c-waarschuwing); }
.status-card.t-weather      .status-card__icon { background: var(--c-weather); }
.status-card.t-brand        .status-card__icon,
.status-card.t-inwoners     .status-card__icon,
.status-card.t-cijfers      .status-card__icon,
.status-card.t-wrapped      .status-card__icon { background: var(--brand); }

.status-card__label {
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
  line-height: 1.25;
}
.status-card__value {
  font-size: 1.625rem; font-weight: 800; letter-spacing: -.035em;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.status-card__value--text { font-size: 1.125rem; letter-spacing: -.02em; }
.status-card__note { font-size: .75rem; color: var(--ink-faint); margin-top: 3px; }

/* ------------------------------------------------------------ Wijktegels */

.wijk-tegel {
  border-color: var(--kaart-rand);
  border-radius: var(--r-md);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.wijk-tegel:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }

/* --------------------------------------------------------- Evenementen */

.event-card {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}
.event-card:hover { border-color: var(--brand); }
.event-card__cat {
  font-size: .625rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-event); font-weight: 800;
}
.event-card__title { font-size: 1rem; letter-spacing: -.02em; line-height: 1.3; }
.event-card__meta { font-size: .8125rem; color: var(--ink-faint); }
.event-card__meta svg { flex: 0 0 auto; opacity: .8; }

/* ------------------------------------------------------------- Ontdekken */

.ontdek {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}
.ontdek:hover { border-color: var(--brand); }

/* ----------------------------------------------------------- Buurtsteden */

.city-tile {
  border-color: var(--kaart-rand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 14px 15px;
}
.city-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.city-tile__name { font-weight: 700; letter-spacing: -.015em; }
.city-tile__status { font-size: .75rem; color: var(--ink-faint); }
.city-tile--meer { background: var(--brand-tint); border-color: transparent; }
.city-tile--meer .city-tile__name { color: var(--brand); }

/* ------------------------------------------------- Losse strook met knop */

/* Tekst links, knop rechts; onder 600px onder elkaar met de knop op
   volle breedte, want naast elkaar wordt de tekst daar twee woorden
   breed. */
.strookblok {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
@media (max-width: 599px) {
  .strookblok .btn { width: 100%; }
}

/* ------------------------------------------------------------- Partner */

.partner { border-radius: var(--r-lg); border-color: var(--brand); }
.partner__soort { color: var(--brand); }
.partner__cta { color: var(--brand); }

/* ------------------------------------------------------ Waarschuwingen */

.waarschuwing { border-radius: var(--r-lg); }

/* =====================================================================
   HUISSTIJL — MELDINGENLIJST EN WIJKRASTER OP MOBIEL
   ===================================================================== */

/* ------------------------------------------------------ Meldingenlijst */

/* De regels waren twee keer zo hoog als nodig. Oorzaak: in feed.php staat
   een <br> tussen de titel en de meta. Dat werkte toen de titel inline
   was, maar ronde 2 maakte er een blok van (voor het afkappen na twee
   regels) — en dan levert die <br> een lege regel op tussen elke titel en
   zijn plaatsnaam.
   De <br> verdwijnt hier in plaats van in feed.php, zodat de lijst op de
   stadspagina's en in de wijken gelijk blijft. */
.feed__item br { display: none; }

.feed__item {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;

  align-items: center;
}

.feed__title {
  font-size: .875rem; line-height: 1.3;
  -webkit-line-clamp: 2;
}

/* Eén regel voor de plaats: die is altijd kort genoeg om te herkennen en
   twee regels straat-plus-plaats maakte elke melding weer hoger. */
.feed__meta {
  display: block;
  font-size: .75rem; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.feed__time { align-self: center; }

@media (min-width: 900px) {
  .feed__title { font-size: .9375rem; }
}

/* ------------------------------------------------------------- Wijken */

/* Het raster liep buiten het scherm en trok de hele pagina mee. Een
   kolom van 1fr krimpt niet kleiner dan zijn inhoud, en namen als
   "Weesperbuurt/Plantage" en "Oostelijke Eilanden/Kadijken" hebben geen
   spatie om op af te breken. Met minmax(0, 1fr) mag de kolom wél smaller
   worden dan zijn inhoud, en breekt de naam binnen de tegel af. */
.wijk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px)  { .wijk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .wijk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.wijk-tegel { min-width: 0; }
.wijk-tegel__naam,
.wijk-tegel__meta { overflow-wrap: anywhere; }
.wijk-tegel__naam { line-height: 1.25; }

/* Dezelfde valkuil voor de andere rasters: een lange plaats- of
   locatienaam mag nooit de pagina breder maken dan het scherm. */
.stadkaarten > *,
.cijferkaarten > *,
.cijfer-rij > *,
.duo > * { min-width: 0; }

.stadkaart__naam,
.city-tile__name,
.status-card__label,
.status-card__note { overflow-wrap: anywhere; }

/* =====================================================================
   HUISSTIJL — MELDINGENLIJST: TITEL EN PLAATS ONDER ELKAAR
   ---------------------------------------------------------------------
   De <br> verbergen was niet genoeg. In feed.php zit de titel in een
   gewone inline <span>, met een nieuwe regel en inspringing tussen de
   titel en de plaatsnaam. Ronde 2 maakte van die titel een blok, en dan
   wordt elk stukje witruimte in zo'n inline omhulsel een eigen lege
   tekstregel — vandaar een gat ter hoogte van één regel, ook bij een
   titel van één regel.
   Het omhulsel wordt hier een kolom: een flexbox negeert tekstknopen die
   alleen uit witruimte bestaan, dus titel en plaats staan strak onder
   elkaar zonder dat feed.php hoeft te veranderen.
   ===================================================================== */

.feed__item > span:nth-child(3) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  order: 2;
}

.feed__title { margin: 0; }
.feed__meta  { margin-top: 0; }

/* Met het gat weg kan de regel zelf ook dichter op elkaar. */
.feed__item { padding: 10px 16px; }
@media (min-width: 900px) { .feed__item { padding: 11px 20px; } }

/* =====================================================================
   HUISSTIJL — ZOEKER OP MOBIEL
   ---------------------------------------------------------------------
   Op een telefoon paste veld plus knop niet naast elkaar, dus brak de rij
   af binnen één omlijst kader. Daardoor stond het pictogram halverwege
   dat hele kader — naast de knop in plaats van naast het veld — en zweefde
   de invoer los boven een grote witte vlakte.
   Onder 900px is het daarom geen samengestelde balk meer maar twee
   dingen onder elkaar: een veld en een knop, allebei op volle breedte.
   ===================================================================== */

@media (max-width: 899px) {
  .zoeker__rij {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .zoeker__rij:focus-within { box-shadow: none; border-color: transparent; }

  .zoeker input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    font-size: 1rem;
    background: var(--surface);
    border: 1px solid var(--kaart-rand);
    border-radius: var(--r-md);
    box-shadow: var(--kaart-schaduw);
  }
  .zoeker input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-tint), var(--kaart-schaduw);
  }

  /* Het pictogram hangt aan de bovenste 50px — de hoogte van het veld —
     en niet meer aan het midden van het geheel. */
  .zoeker__icoon {
    top: 0; left: 15px; transform: none;
    height: 50px; display: inline-flex; align-items: center;
  }

  .zoeker .btn {
    width: 100%;
    margin-top: 10px;
    min-height: 50px;
  }
}

/* =====================================================================
   HUISSTIJL — DATA, STRATEN, ZOEKEN, ONDERNEMERS, CLAIM
   ---------------------------------------------------------------------
   Wijk, straat, data, wrapped, ondernemers, claim en zoeken. Deze
   pagina's gebruiken allemaal bouwstenen die al in ronde 1 tot 3 zijn
   omgezet (.card, .blok, .status-card, de feed, de sectiekoppen). Wat
   hier staat is wat daar nog niet onder viel.
   ===================================================================== */

/* -------------------------------------------------------- Overloopslot */

/* Dezelfde val als bij de wijken: een kolom van 1fr krimpt nooit kleiner
   dan zijn inhoud, en één lange straat- of wijknaam trekt dan de hele
   pagina scheef. Alle rasters op deze pagina's krijgen daarom kinderen
   die wél mogen krimpen. */
.kpis > *,
.data-tegels > *,
.stad-grid > *,
.wijk-grid > *,
.straat-grid > *,
.wfeiten > *,
.prijzen > *,
.verkoop-drie > *,
.verkoop-cijfers > *,
.verkoop-stappen > * { min-width: 0; }

.data-tegel__naam,
.straat__naam,
.zoekrij__tekst,
.verkoop-slot { overflow-wrap: anywhere; }

/* Een tabel kan niet afbreken; die mag schuiven binnen zijn eigen kader
   in plaats van de pagina mee te trekken. */
@media (max-width: 767px) {
  table.data { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------- Data-pagina's */

.kpi {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
  padding: 15px 16px;
}
.kpi__icoon { opacity: 1; color: var(--brand); }
.kpi__label { font-weight: 600; color: var(--ink-soft); }
.kpi__waarde {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.data-tegel {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}
.data-tegel:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }

.periode__knop { border-radius: var(--r-pill);  }
.periode__knop.is-actief {
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(91,70,224,.22);
}

.verdeling { height: 14px; }

table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th {
  text-align: left; font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint);
  padding: 10px 12px; border-bottom: 1px solid var(--kaart-rand);
  white-space: nowrap;
}
table.data td {
  padding: 11px 12px; border-bottom: 1px solid var(--kaart-rand);
  font-variant-numeric: tabular-nums;
}
table.data tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- Straten */

.straat {
  border-color: var(--kaart-rand);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.straat:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.straatlijst a { color: var(--ink-soft); }
.straatlijst a:hover { color: var(--brand); }

/* --------------------------------------------------------- Wrapped */

/* De wrapped-pagina heeft zijn eigen donkere opmaak; die blijft. Alleen
   de tegels en de accentkleur lopen mee met de nieuwe huisstijl. */

/* --------------------------------------------------------- Zoeken */

.zoekform__icoon { color: var(--ink-faint); }

.zoeklijst { display: flex; flex-direction: column; }
.zoekrij {
  border-bottom: 1px solid var(--kaart-rand);
  padding: 13px 16px;
  gap: 12px;
}
.zoekrij:last-child { border-bottom: 0; }
.zoekrij:hover { background: var(--surface-alt); text-decoration: none; }
.zoekrij__icoon {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--brand-tint); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.zoekrij__pijl { color: var(--ink-faint); }
.zoekrij:hover .zoekrij__pijl { color: var(--brand); }

/* ----------------------------------------------------- Ondernemers */

.verkoop-kaart,
.verkoop-slot,
.voorbeeld {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}
.verkoop-kaart__icoon { color: var(--brand); }
.verkoop-stap__nr {
  background: var(--brand); color: #fff;
  border-radius: 50%;
}

.verkoop-blok__tekst { min-width: 0; }
.verkoop-cijfer b { color: var(--brand); font-variant-numeric: tabular-nums; }
.verkoop-zoek__icoon { color: var(--ink-faint); }

/* Prijskaarten: de uitgelichte krijgt de merkkleur, de rest blijft wit
   zodat de keuze zichtbaar is zonder een tweede kleur te verzinnen. */
.prijs {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}
.prijs__vlag { background: var(--brand); color: #fff; border-radius: var(--r-pill); }
.prijs__bedrag { letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.prijs__schaarste { color: var(--c-traffic); }

/* ------------------------------------------------------------- Claim */

/* Formulieren staan op een smalle kolom; een invoerveld van 900px breed
   leest niemand prettig. */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  border-radius: var(--r-md);
  border-color: var(--kaart-rand);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
  outline: none;
}

.pil { border-radius: var(--r-pill); }

/* --------------------------------------------------------- Wijkpagina */

/* De wijkpagina gebruikt dezelfde blokken als de stadspagina; alleen de
   kop had nog de oude kaartvorm. */
.map-block { gap: var(--blok-gap); }
@media (min-width: 980px) { .map-block { grid-template-columns: 1.55fr 1fr; } }
.map-block > * { min-width: 0; }

/* =====================================================================
   HUISSTIJL — DRUKTE IN DE MERKKLEUR
   ---------------------------------------------------------------------
   De druktemeter is het enige cijfer op de site dat duidt in plaats van
   telt, en druk is geen alarm. Rood suggereerde dat wel, en botste met de
   rode P2000-meldingen eronder: dezelfde kleur voor "spoedmelding" en
   voor "meer verkeer dan gemiddeld".
   Nu loopt de schaal van grijs naar diep indigo: hoe drukker, hoe
   paarser. Vijf stappen, dezelfde als in _drukte.php.

   Wat níét paars wordt: de categoriekleuren (P2000 rood, verkeer oranje,
   OV blauw) en de KNMI-waarschuwingen. Die eerste zijn herkenning, die
   tweede zijn officiële codes — geel, oranje en rood betekenen daar iets
   en die mag ik niet overschilderen.
   ===================================================================== */

/* De balk zelf: links neutraal, rechts vol. */
.drukte__schaal {
  height: 10px;
  background: linear-gradient(90deg,
    #EDF0F7 0%,
    #D9D2F8 42%,
    #8D74EE 74%,
    #3B21A8 100%);
}
.drukte__wijzer {
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(16,24,40,.22);
}

/* De kaart loopt mee: hoe drukker, hoe meer kleur in de rand en het
   vlak. Rustig blijft wit — daar valt niets te melden. */
.drukte { background: var(--surface); border-color: var(--kaart-rand); }
.drukte__kop { color: var(--ink-faint); }

.drukte--veel-rustig,
.drukte--rustig {
  border-color: var(--kaart-rand);
  background: var(--surface);
}
.drukte--veel-rustig .drukte__oordeel,
.drukte--rustig .drukte__oordeel { color: var(--ink-soft); }

.drukte--normaal {
  border-color: #E4DEFB;
  background: #FCFBFF;
}
.drukte--normaal .drukte__oordeel { color: var(--ink); }

.drukte--druk {
  border-color: #C7B8FA;
  background: #F5F2FE;
}
.drukte--druk .drukte__oordeel { color: var(--brand); }
.drukte--druk .drukte__kop { color: var(--brand); }

.drukte--veel-druk {
  border-color: var(--brand);
  background: #EDE8FE;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 22px rgba(91,70,224,.14);
}
.drukte--veel-druk .drukte__oordeel { color: #3B21A8; }
.drukte--veel-druk .drukte__kop { color: var(--brand-dark); }
.drukte--veel-druk .drukte__meta { color: var(--ink); }

/* Dezelfde ladder voor de druktekaart in de statusrij op de stadspagina.
   De klasse komt uit city/home.php mee. */
.status-card--drukte.is-veel-rustig .status-card__icon,
.status-card--drukte.is-rustig      .status-card__icon { background: #A5AEC4; }
.status-card--drukte.is-normaal     .status-card__icon { background: #9C8BEE; }
.status-card--drukte.is-druk        .status-card__icon { background: var(--brand); }
.status-card--drukte.is-veel-druk   .status-card__icon { background: #3B21A8; }

.status-card--drukte.is-druk      { border-color: #C7B8FA; }
.status-card--drukte.is-veel-druk { border-color: var(--brand); background: #FBFAFF; }
.status-card--drukte.is-druk      .status-card__value,
.status-card--drukte.is-veel-druk .status-card__value { color: var(--brand-dark); }

/* De pulsering blijft — hij doet zijn werk — maar in de merkkleur in
   plaats van oranje, zodat hij niet meer op een verkeersmelding lijkt. */
.status-card--pulse {
  border-color: #C7B8FA;
  animation: kaartPulsPaars 2.8s ease-in-out infinite;
}
.status-card--pulse::after {
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(91, 70, 224, .5);
  animation: bolPulsPaars 2s ease-out infinite;
}

@keyframes kaartPulsPaars {
  0%, 100% { background: var(--surface); }
  50%      { background: #F5F2FE; }
}

@keyframes bolPulsPaars {
  0%   { box-shadow: 0 0 0 0 rgba(91, 70, 224, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(91, 70, 224, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 70, 224, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status-card--pulse,
  .status-card--pulse::after { animation: none; }
  .status-card--pulse { background: #F5F2FE; }
}

/* =====================================================================
   HUISSTIJL — KAART NAAST LIJST, WEERKAARTJE
   ===================================================================== */

/* ---------------------------------------------- Kaart naast lijst, desktop

   De kaarten deden op desktop niets meer. Oorzaak: een oudere regel
   `.map-card #map { height: auto }` won op desktop van `#map { height }`.
   Binnen de oude .map-block vulde de kaart via flexbox alsnog de hoogte;
   ronde 2 zette de kaart in een .duo zonder flexbox, en toen was hij nul
   pixels hoog.

   Nu één opzet voor elke pagina met een kaart naast een lijst: beide
   kaders precies even hoog, de kaart vult zijn kader, de lijst scrolt
   binnen het zijne. Een lange lijst maakt de rij dus niet meer hoger dan
   de kaart. */

@media (min-width: 1200px) { :root { --kaart-h: 620px; } }

@media (min-width: 900px) {
  .map-block {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: var(--kaart-h);
    align-items: stretch;
    gap: var(--blok-gap);
  }

  .map-block > * {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    overflow: hidden;
  }

  /* Specifieker dan `.map-card #map`, dus deze wint. */
  .map-block .map-card #map {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  .map-block .map-card > :not(#map) { flex: 0 0 auto; }

  .map-block > :not(.map-card) > .card__head,
  .map-block > :not(.map-card) > .blok__kop,
  .map-block > :not(.map-card) > .blok__body,
  .map-block > :not(.map-card) > .card__body { flex: 0 0 auto; }

  .map-block > :not(.map-card) .feed,
  .map-block > :not(.map-card) .empty {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .map-block > :not(.map-card) .feed::-webkit-scrollbar { width: 6px; }
  .map-block > :not(.map-card) .feed::-webkit-scrollbar-thumb {
    background: var(--line-strong); border-radius: var(--r-pill);
  }
}

/* Op mobiel staan kaart en lijst onder elkaar; de kaart heeft daar een
   vaste hoogte en de lijst loopt gewoon door. */
@media (max-width: 899px) {
  .map-block { display: grid; gap: var(--blok-gap); }
  .map-block .map-card #map { height: 360px; flex: none; }
}

/* Lege kaart: zeggen dat er niets is, in plaats van een leeg vlak dat
   eruitziet alsof er iets stuk is. */
.map-leeg {
  margin: 0;
  padding: 10px 16px;
  font-size: .8125rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--kaart-rand);
}

/* ------------------------------------------------------------ Weerkaartje */

/* Alleen op desktop, rechtsboven in de hero zoals in het ontwerp. Op een
   telefoon staat de temperatuur in de kopbalk en past er naast de tekst
   niets. Andersom hoeft de temperatuur op desktop niet ook nog in de
   kopbalk als hij groot in de hero staat. */
.weerkaart { display: none; }

@media (min-width: 900px) {
  .hero__inner,
  .landing__inner { position: relative; }

  .weerkaart {
    display: flex; flex-direction: column; gap: 8px;
    position: absolute; right: var(--pad); z-index: 2;
    min-width: 236px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--kaart-rand);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
  }
  .hero__inner .weerkaart { top: 0; }
  .landing__inner .weerkaart { top: 28px; }

  a.weerkaart:hover { text-decoration: none; border-color: var(--brand); }

  .weerkaart__kop {
    display: flex; align-items: center; gap: 6px;
    font-size: .8125rem; font-weight: 600;
  }
  .weerkaart__kop svg { color: var(--brand); }

  .weerkaart__rij { display: flex; align-items: center; gap: 10px; }
  .weerkaart__icoon { display: inline-flex; color: #F59E0B; }
  .weerkaart__temp {
    font-size: 1.75rem; font-weight: 800; letter-spacing: -.035em; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .weerkaart__omschrijving { font-size: .8125rem; color: var(--ink-faint); }
  .weerkaart__pijl { margin-left: auto; font-size: 1.25rem; color: var(--ink-faint); }
  a.weerkaart:hover .weerkaart__pijl { color: var(--brand); }

  .temp-pill { display: none; }
}

/* =====================================================================
   HUISSTIJL — PAGINAKOP EN GEDEELDE BOUWSTENEN
   ---------------------------------------------------------------------
   Elke pagina onder de homepage begint nu met dezelfde kop en gebruikt
   dezelfde bouwstenen: sectiekop, .blok met badge, chips en kaartvormen.
   ===================================================================== */

/* ------------------------------------------------------------ Paginakop */

/* Dezelfde achtergrond als de homepage-hero, maar zonder foto en lager:
   een subpagina is om iets op te zoeken, niet om binnen te komen. */
.paginakop {
  background:
    radial-gradient(80% 90% at 88% -20%, #EDE9FE 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FD 100%);
  border-bottom: 1px solid var(--kaart-rand);
  padding: 22px 0 26px;
}
.paginakop__inner { position: relative; }

.paginakop__kruimels {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0 0 18px; padding: 0;
  font-size: .8125rem; color: var(--ink-faint);
}
.paginakop__kruimels a { color: var(--ink-soft); }
.paginakop__kruimels a:hover { color: var(--brand); text-decoration: none; }
.paginakop__kruimels [aria-current] { color: var(--ink-faint); }
.paginakop__scheiding { color: var(--line-strong); }

.paginakop__eyebrow {
  color: var(--brand);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 8px;
}

.paginakop__titel {
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  letter-spacing: -.04em; line-height: 1.06;
  margin: 0 0 10px;
  max-width: 22ch;
}

.paginakop__lede {
  color: var(--ink-soft);
  font-size: 1rem; line-height: 1.6;
  max-width: 60ch; margin: 0;
}

.paginakop__acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.paginakop--smal .paginakop__inner { max-width: 820px; }

@media (min-width: 900px) {
  .paginakop { padding: 30px 0 40px; }
  .paginakop__kruimels { margin-bottom: 26px; }
  .paginakop__lede { font-size: 1.0625rem; }

  /* Weerkaartje in de paginakop: rechts, op hoogte van de titel. */
  .paginakop__inner .weerkaart { top: 44px; }
}

/* De oude kruimels stonden los boven een pagina; binnen de paginakop
   staan ze nu op hun plek. Deze regel neutraliseert de oude marge. */
.paginakop .breadcrumbs { padding-top: 0; }

/* ---------------------------------------------------------- Bouwstenen */

/* Blokken die onder elkaar staan krijgen dezelfde tussenruimte als op de
   homepage. */
.blok--volgend,
.blok + .blok { margin-top: var(--blok-gap); }

/* Maar niet in een raster: daar regelt gap de ruimte. Zonder deze regel
   kreeg het tweede blok naast elkaar ook die marge — de meldingenlijst
   naast de kaart begon daardoor lager en liep onderaan evenveel door, en
   in de datarasters stonden grafieken naast elkaar niet op één lijn. */
.map-block > .blok,
.duo > .blok,
.data-raster > .blok,
.cijfer-rij > .blok,
.event-grid > .blok { margin-top: 0; }

/* Een groep met eigen sectiekop, zoals een categorie op Ontdekken. */
.categorieblok { margin-bottom: 36px; scroll-margin-top: calc(var(--header-h) + 16px); }
.categorieblok:last-of-type { margin-bottom: 28px; }

.straatblok { margin-bottom: 36px; }

/* Chips bovenaan een pagina: filters of snelkoppelingen. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--kop { margin-bottom: 26px; }
.chip__aantal {
  font-size: .75rem; font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.chip.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.chip.is-active .chip__aantal { color: rgba(255,255,255,.8); }

@media (max-width: 699px) {
  .chips--kop {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
    padding: 2px var(--pad);
  }
  .chips--kop::-webkit-scrollbar { display: none; }
  .chips--kop .chip { flex: 0 0 auto; }
}

/* Bronvermelding onderaan een pagina. */
.bronregel {
  margin: 22px 0 0;
  font-size: .8125rem; color: var(--ink-faint);
}
.bronregel a { color: var(--ink-soft); }
.bronregel a:hover { color: var(--brand); }

/* Een opmerking over de staat van de data, zoals verouderd weer. */
.melding-balk {
  margin: 0 0 var(--blok-gap);
  padding: 12px 16px;
  background: var(--brand-tint);
  border: 1px solid var(--brand-zacht);
  border-radius: var(--r-md);
  font-size: .875rem; color: var(--ink);
}

/* ----------------------------------------------------------- Agenda */

.event-grid {
  display: grid; gap: var(--blok-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.event-grid > * { min-width: 0; }

/* --------------------------------------------------------------- Weer */

.weer-nu .weer-nu__hoofd { padding: 22px 20px; }
.weer-nu__temp { font-weight: 800; letter-spacing: -.05em; }
.weer-details,
.weer-details > div,
.week__dag { border-color: var(--kaart-rand); }
.weer-details > div:nth-child(odd) { border-right-color: var(--kaart-rand); }
.weer-details dt svg { color: var(--brand); }
.week__vulling { background: linear-gradient(90deg, #9C8BEE, var(--brand)); }

@media (min-width: 700px) {
  .weer-details { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .weer-details > div { border-right: 1px solid var(--kaart-rand); }
  .weer-details > div:nth-child(4n) { border-right: 0; }
}

/* =====================================================================
   HUISSTIJL — DE STROOK
   ---------------------------------------------------------------------
   "Nederland in beeld" op de homepage, "Nu in {stad}" op de stadspagina
   en de cijfers van een wijk: één component. De titel is de eerste cel,
   de tegels delen hun randen, en het geheel is één kaart.

   Eerder waren dit twee dingen: een strook op de homepage en losse
   kaartjes met elk een eigen rand en schaduw op de stadspagina. Nu komen
   alle tegels uit partials/status-card en ziet alles er per definitie
   hetzelfde uit.
   ===================================================================== */

.strook {
  background: var(--surface);
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
  overflow: hidden;
}

/* De lijnen tussen de cellen zijn schaduwen aan de rechter- en onderkant
   van elke cel. De cellenlaag schuift één pixel voorbij de rand, zodat de
   lijnen langs de buitenkant wegvallen achter overflow: hidden — en in een
   halflege laatste rij staan geen losse lijnen in het niets. */
.strook__cellen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 -1px -1px 0;
}
@media (min-width: 700px) { .strook__cellen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .strook__cellen { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.strook__cellen > * {
  min-width: 0;
  padding: 18px;
  box-shadow: inset -1px 0 0 var(--kaart-rand), inset 0 -1px 0 var(--kaart-rand);
}

/* ---------------------------------------------------------- Titelcel */

.strook__titel {
  display: flex; flex-direction: column; justify-content: center;
}
.strook__titel h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 700; letter-spacing: -.015em;
  margin: 0;
}
.strook__titel p { margin: 3px 0 0; font-size: .8125rem; color: var(--ink-faint); }
.strook__actie {
  margin-top: 10px;
  font-size: .8125rem; font-weight: 600; color: var(--brand);
}
.strook__actie:hover { text-decoration: none; color: var(--brand-dark); }

/* Op een telefoon krijgt de titel een eigen rij; anders wordt hij een
   smalle kolom van drie woorden hoog. */
@media (max-width: 699px) {
  .strook__titel { grid-column: 1 / -1; padding: 16px 18px; }
  .strook__actie { margin-top: 6px; }
}

/* ------------------------------------------------- Tegel binnen de strook */

/* Zelfde indeling als de oude homepagecellen: badge en getal naast
   elkaar, daaronder het label en de toelichting. De HTML van de partial
   blijft hetzelfde; display: contents laat de bovenste regel meedoen in
   het raster van de tegel. */
.strook .status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icoon waarde"
    "label label"
    "noot  noot";
  align-items: center;
  column-gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.strook a.status-card:hover {
  background: var(--surface-alt);
  text-decoration: none;
  box-shadow: inset -1px 0 0 var(--kaart-rand), inset 0 -1px 0 var(--kaart-rand);
}

.strook .status-card__top { display: contents; }

.strook .status-card__icon {
  grid-area: icoon;
  width: 28px; height: 28px; flex: none;
  margin-bottom: 9px;
}
.strook .status-card__icon svg { width: 15px; height: 15px; }

.strook .status-card__value,
.strook .badge-soon {
  grid-area: waarde;
  justify-self: start;
  margin-bottom: 9px;
}
.strook .status-card__value {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.strook .status-card__value--text { font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.15; }

.strook .status-card__label {
  grid-area: label;
  font-size: .875rem; font-weight: 600; color: var(--ink);
}
.strook .status-card__note {
  grid-area: noot;
  margin-top: 2px;
  font-size: .75rem; color: var(--ink-faint);
}

/* De druktetegel houdt zijn ladder: hoe drukker, hoe paarser. */
.strook .status-card--drukte.is-druk      { background: #FAF8FF; }
.strook .status-card--drukte.is-veel-druk { background: #F5F2FE; }

@media (max-width: 599px) {
  .strook__cellen > * { padding: 15px 16px; }
  .strook .status-card__value { font-size: 1.3125rem; }
}

/* =====================================================================
   HUISSTIJL — WIJK, ZOEKEN, FOUTPAGINA'S, VASTE PAGINA'S
   ===================================================================== */

/* Leesbreedte voor tekstpagina's en de zoekpagina. Eerder had elke pagina
   een eigen max-width inline (600, 680, 720, 760 px). */
.wrap--smal { max-width: 820px; }

/* Leestekst in een blok: iets ruimer, koppen in de huisstijl. */
.blok__body.tekst { padding: 24px 22px; }
@media (min-width: 700px) { .blok__body.tekst { padding: 30px 32px; } }
.tekst h2 { font-size: 1.125rem; letter-spacing: -.02em; margin: 28px 0 8px; }
.tekst h2:first-child { margin-top: 0; }
.tekst p, .tekst li { color: var(--ink-soft); }
.tekst strong { color: var(--ink); }
.tekst a { font-weight: 600; }

/* ----------------------------------------------- Zoeker in de paginakop */

.paginakop__acties .zoeker { flex: 1 1 100%; max-width: 560px; margin: 4px 0 0; }

/* Zoekresultaten: wegen in verkeerskleur, al het andere in de merkkleur. */
.zoekrij__icoon.t-traffic { background: var(--c-traffic-tint); color: var(--c-traffic); }
.zoekrij__icoon.t-brand   { background: var(--brand-tint);     color: var(--brand); }
.zoekrij__actie { font-size: .8125rem; font-weight: 700; color: var(--brand); white-space: nowrap; }
.zoekrij--bezet .zoekrij__actie { color: var(--ink-faint); font-weight: 600; }

/* ------------------------------------------------------ Meldingsbalken */

.melding-balk--ok {
  background: var(--c-event-tint); border-color: transparent;
  color: var(--ink); font-weight: 600;
}
.melding-balk--fout {
  background: var(--c-p2000-tint); border-color: transparent;
  color: var(--ink); font-weight: 600;
}

/* ------------------------------------------------------------ Formulier */

.formulier { display: grid; gap: 14px; }
.formulier label {
  display: grid; gap: 6px;
  font-size: .8125rem; font-weight: 600; color: var(--ink);
}
.formulier input,
.formulier textarea,
.formulier select {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 1rem; font-weight: 400;
  background: var(--surface);
  border: 1px solid var(--kaart-rand);
}
.formulier textarea { min-height: 140px; resize: vertical; }
.formulier .btn { justify-self: start; }
@media (max-width: 599px) { .formulier .btn { justify-self: stretch; } }

/* ------------------------------------------------------ "Verder:"-regel */

/* Zelfde chips als bovenaan Ontdekken, in plaats van een rij losse
   vetgedrukte links. */
.data-verder {
  gap: 8px; align-items: center;
  border-top-color: var(--kaart-rand);
}
.data-verder a {
  display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--kaart-rand);
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.data-verder a:hover { text-decoration: none; border-color: var(--brand); color: var(--brand); }

/* Extra aanduiding rechts in een blokkop, zoals "Live" boven de kaart. */
.blok__kop > div { min-width: 0; flex: 1 1 auto; }
.blok__kop-extra {
  margin-left: auto; flex: 0 0 auto;
  font-size: .75rem; font-weight: 600; color: var(--ink-faint);
}
.blok__kop-extra--live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
}
/* De kaart zelf loopt tot de randen van het blok. */
.blok.map-card { overflow: hidden; }

/* =====================================================================
   HUISSTIJL — DATAPAGINA'S
   ===================================================================== */

/* De datastrook krijgt zoveel kolommen als hij cellen heeft (titel plus
   kerncijfers, via --kolommen), zodat hij op desktop altijd één volle rij
   is. Op kleinere schermen gelden de gewone regels van de strook. */
@media (min-width: 980px) {
  .strook--data .strook__cellen {
    grid-template-columns: repeat(var(--kolommen, 5), minmax(0, 1fr));
  }
}
.strook--data + *,
.strook + .drukte,
.strook + .inzichten { margin-top: var(--blok-gap); }

/* Groei en daling: rood en groen zijn hier betekenis, geen versiering. */
.strook .kpi__delta { font-weight: 700; }

/* ------------------------------------------------------ Periodeknoppen */

/* Staan nu in de paginakop, net onder de toelichting. */
.paginakop__acties .periode { margin: 0; }
.periode__knop { border-color: var(--kaart-rand); box-shadow: var(--shadow-sm); }
.periode__knop:hover { border-color: var(--brand); color: var(--brand); }
.periode__knop.is-actief:hover { color: #fff; }

/* ------------------------------------------------------------ Raster */

.data-raster { gap: var(--blok-gap); }
.data-raster > * { min-width: 0; }

/* Een losse regel toelichting onder een grafiek in een blok. */
.blok__noot {
  margin: 14px 0 0;
  font-size: .8125rem; line-height: 1.55; color: var(--ink-faint);
}
.blok__noot a { color: var(--ink-soft); font-weight: 600; }

/* Een link rechts in de blokkop: "Alle wegen →". */
.blok__kop-link { color: var(--brand); font-weight: 700; }
.blok__kop-link:hover { color: var(--brand-dark); text-decoration: none; }

/* Blok met ruimte eronder, als het niet in een raster staat. */
.blok--los { margin-bottom: var(--blok-gap); }

/* ------------------------------------------------------------ Inzichten */

/* "Dit valt op" in de huisstijl: tintvlak met een paarse bovenregel. */
.inzichten {
  margin: var(--blok-gap) 0 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--brand-zacht);
}
.inzichten li { color: var(--ink); }
.inzichten li::marker { color: var(--brand); }

/* ---------------------------------------------------------- Terugblik */

/* Maanden als chips, jaren in de merkkleur. Eerst blauw-paarse en
   roze-rode verlopen: twee kleuren die nergens anders op de site staan. */
.terugblik__knop {
  background: var(--surface);
  border: 1px solid var(--kaart-rand);
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.terugblik__knop:hover { opacity: 1; border-color: var(--brand); color: var(--brand); }
.terugblik__knop--jaar { background: var(--brand); border-color: var(--brand); color: #fff; }
.terugblik__knop--jaar:hover { background: var(--brand-dark); color: #fff; }

/* =====================================================================
   HUISSTIJL — ONDERNEMERS EN CLAIMEN
   ===================================================================== */

/* ------------------------------------------------ Hero /ondernemers/

   Was een donkere, gecentreerde hero in navy en blauw: een andere site.
   Nu dezelfde opbouw als de homepage: licht, tekst links, foto rechts
   achter een witte sluier, en dezelfde zoeker. */
.verkoop-hero {
  color: var(--ink);
  text-align: left;
  padding: 36px 0 34px;
  background:
    radial-gradient(80% 70% at 88% -10%, #EDE9FE 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FD 100%);
  border-bottom: 1px solid var(--kaart-rand);
}
.verkoop-hero--foto::after {
  background: rgba(255, 255, 255, .9);
}
.verkoop-hero__kop {
  color: var(--ink-faint); opacity: 1;
  letter-spacing: .14em; margin: 0 0 14px;
}
.verkoop-hero__titel {
  color: var(--ink);
  font-size: clamp(2.1rem, 8vw, 3.5rem); font-weight: 800;
  letter-spacing: -.04em; line-height: 1.04;
  max-width: 16ch;
}
.verkoop-hero__lede {
  color: var(--ink-soft); opacity: 1;
  max-width: 46ch; margin: 0 0 26px;
}
.verkoop-hero__klein { color: var(--ink-faint); opacity: 1; margin: 16px 0 0; }
.verkoop-hero .zoeker { margin: 0; max-width: 560px; }

@media (min-width: 900px) {
  .verkoop-hero { padding: 84px 0 80px; }
  .verkoop-hero__beeld { left: 38%; width: 62%; }
  .verkoop-hero--foto::after {
    background: linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 38%,
      rgba(255,255,255,.96) 50%,
      rgba(255,255,255,.55) 70%,
      rgba(255,255,255,.08) 94%,
      rgba(255,255,255,0) 100%);
  }
  .verkoop-hero__titel, .verkoop-hero__lede { max-width: 34ch; }
  .verkoop-hero__lede { max-width: 46ch; }
}

/* ---------------------------------------------------- Afsluitend blok */

/* Het slotblok had dezelfde donkere navy als de oude hero. Nu het paarse
   werfblok van de homepage: één kleur voor "hier kun je iets doen". */
.verkoop-slot {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, #3B21A8 100%);
  border-radius: var(--r-xl);
  box-shadow: 0 10px 30px rgba(91, 70, 224, .28);
  color: #fff;
}
.verkoop-slot__pin { color: #fff; opacity: .9; }
.verkoop-slot .btn--primary { background: #fff; border-color: #fff; color: var(--brand); box-shadow: none; }
.verkoop-slot .btn--primary:hover { background: var(--brand-tint); border-color: var(--brand-tint); }
.verkoop-slot .btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.verkoop-slot .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* --------------------------------------------------- Blokken en kaarten */

.verkoop-blok {
  border: 1px solid var(--kaart-rand);
  box-shadow: var(--kaart-schaduw);
}
.verkoop-blok--accent { background: var(--brand-tint); border-color: var(--brand-zacht); }
.verkoop-label { color: var(--brand); font-weight: 700; letter-spacing: .14em; }

.prijs--top { border-color: var(--brand); box-shadow: 0 10px 28px rgba(91, 70, 224, .16); }

/* --------------------------------------------------- Pakketten (beheer)

   Stonden in een <style>-blok onderaan de beheerpagina. Dat blok gaf
   ook elk <label> op de pagina een eigen vorm; nu doet .formulier dat,
   net als bij contact en claimen. */
.pakketten { display: grid; gap: 12px; }
@media (min-width: 700px) { .pakketten { grid-template-columns: 1fr 1fr; } }
.pakket {
  display: flex; flex-direction: column;
  padding: 18px;
  border: 1px solid var(--kaart-rand);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pakket--bezet { opacity: .6; }
.pakket__naam { font-weight: 700; margin: 0 0 4px; }
.pakket__prijs {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.pakket__prijs span { font-size: .8125rem; font-weight: 500; color: var(--ink-faint); }
.pakket__lijst { margin: 0 0 14px; padding-left: 18px; font-size: .875rem; color: var(--ink-soft); }
.pakket__lijst li { margin-bottom: 3px; }
.pakket__lijst li::marker { color: var(--brand); }
.pakket form { margin-top: auto; display: grid; gap: 10px; }
.pakket__maanden { display: grid; gap: 6px; font-size: .8125rem; font-weight: 600; }
.pakket__maanden select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .9375rem;
  border: 1px solid var(--kaart-rand); border-radius: var(--r-md); background: var(--surface);
}

.formulier__optioneel { font-weight: 400; color: var(--ink-faint); }
.formulier .veldhint { font-size: .75rem; font-weight: 400; color: var(--ink-faint); }

/* Uitleg onder een kop in een meldingsbalk (na betalen). */
.melding-balk strong { display: block; }
.melding-balk__uitleg { margin: 4px 0 0; font-weight: 400; font-size: .875rem; color: var(--ink-soft); }

/* Voortgang in het claimtraject in de merkkleur. */
.claimstap--klaar .claimstap__bol,
.claimstap--nu .claimstap__bol { background: var(--brand); border-color: var(--brand); color: #fff; }
.claimklaar { border-radius: var(--r-lg); }
.claimstap--klaar { border-color: var(--brand-zacht); background: var(--brand-tint); }

/* =====================================================================
   HUISSTIJL — WRAPPED
   ---------------------------------------------------------------------
   Wrapped blijft een verhaal in kaarten — dat is het product. Wat
   verandert is het palet: blauwe, oranje en groene kaarten en een
   blauw-paars verloop werden de huisstijl. Drukte is intensiteit, dus
   paars; kaarten zijn blokken zoals overal.
   ===================================================================== */

.wrapped__kruimels { margin: 6px 0 16px; }

/* Cover: de foto blijft, de sluier loopt naar diep indigo in plaats van
   navy, en de oranje accenten worden wit en lavendel. */
.wcover {
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--brand) 0%, #2A1780 100%);
  box-shadow: var(--shadow-lg);
}
.wcover--foto::after {
  background: linear-gradient(180deg,
    rgba(26, 16, 72, .20) 0%,
    rgba(26, 16, 72, .55) 45%,
    rgba(26, 16, 72, .94) 100%);
}
.wcover__stad { background: #fff; color: var(--brand); border-radius: var(--r-pill); }
.wcover__periode { color: #C9BEF7; }

/* Kaarten: hetzelfde blok als overal. */
.wkaart {
  border-color: var(--kaart-rand);
  border-radius: var(--r-lg);
  box-shadow: var(--kaart-schaduw);
}
.wkaart--blauw,
.wkaart--oranje { background: var(--brand-tint); border-color: var(--brand-zacht); }
.wkaart--kleur {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, #3B21A8 100%);
  box-shadow: 0 10px 30px rgba(91, 70, 224, .28);
}

/* Labels boven de kaarten: allemaal de merktint. */
.wlabel--oranje,
.wlabel--blauw,
.wlabel--groen { background: #fff; color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand-zacht); }

/* Afsluiter: het paarse werfblok, net als op de homepage en /ondernemers/. */
.wslot {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.14) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, #3B21A8 100%);
  border-radius: var(--r-xl);
  box-shadow: 0 10px 30px rgba(91, 70, 224, .28);
}
.wslot__pin { color: #fff; }
.wslot .btn--primary { background: #fff; border-color: #fff; color: var(--brand); box-shadow: none; }
.wslot .btn--primary:hover { background: var(--brand-tint); }

/* Wrapped: de feitenstrook binnen de smalle verhaalkolom, altijd 2x2 met
   de titel erboven. */
.strook--wrapped { margin-bottom: 14px; }
.strook--wrapped .strook__cellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.strook--wrapped .strook__titel { grid-column: 1 / -1; }

/* Intensiteit in wrapped (balken, legenda): paars, van licht naar diep. */
.wlijst__balk span { background: var(--brand); }
.wlijst__rij:nth-child(n/**/+3) .wlijst__balk span { background: #C9BEF7; }
.wmini__staaf.is-piek { background: var(--brand); }
.wkl--hoog { background: #3B21A8; }
.wkl--mid  { background: #8D74EE; }
.wkl--laag { background: #D9D2F8; }

/* =====================================================================
   HUISSTIJL — KOPBALK, ZOEKEN EN ONDERBALK
   ===================================================================== */

/* Zoekveld in de kopbalk: alleen op desktop. */
.kopzoek { display: none; }

@media (min-width: 900px) {
  .kopzoek {
    display: flex; align-items: center; position: relative;
    width: clamp(210px, 22vw, 300px);
  }
  .kopzoek__icoon {
    position: absolute; left: 13px;
    display: inline-flex; color: var(--ink-faint);
    pointer-events: none;
  }
  .kopzoek input {
    width: 100%; height: 40px;
    padding: 0 14px 0 38px;
    font: inherit; font-size: .875rem; color: var(--ink);
    background: var(--surface-alt);
    border: 1px solid var(--kaart-rand);
    border-radius: var(--r-pill);
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
  }
  .kopzoek input::placeholder { color: var(--ink-faint); }
  .kopzoek input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
  }
  .kopzoek input::-webkit-search-cancel-button { display: none; }

  /* Op desktop doet het veld het werk van de pil en het vergrootglas. */
  .kopzoek-knop,
  .city-pill--wissel { display: none; }
}

/* Mobiel: vergrootglas naar het zoekscherm. */
.kopzoek-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--kaart-rand);
  color: var(--ink);
}
.kopzoek-knop:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

/* De stadspil is nu een echte knop: van plaats wisselen. Het pijltje
   laat zien dat er iets gebeurt als je erop tikt. */
.city-pill--wissel { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.city-pill--wissel:hover { text-decoration: none; border-color: var(--brand); }
.city-pill--wissel svg:last-child { color: var(--ink-faint); }

/* =====================================================================
   HUISSTIJL — LAATSTE PLAATS EN LOCATIE
   ===================================================================== */

/* "Verder met Leeuwarden →" boven de titel, voor wie terugkomt. */
.verder {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--brand-zacht);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.verder__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 6px 8px 14px;
  font-size: .875rem; font-weight: 600; color: var(--brand);
}
.verder__link:hover { text-decoration: none; color: var(--brand-dark); }
.verder__link strong { font-weight: 800; }
.verder__wis {
  width: 30px; height: 30px; margin-right: 4px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-faint);
  font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.verder__wis:hover { background: var(--surface-alt); color: var(--ink); }

/* "Gebruik mijn locatie" onder de zoeker: een tekstknop, want het is de
   tweede keuze na typen, niet de eerste. */
.locatieknop {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 12px 0 0; padding: 6px 2px;
  border: 0; background: transparent;
  font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--brand); cursor: pointer;
}
.locatieknop:hover { color: var(--brand-dark); text-decoration: underline; }
.locatieknop:disabled { color: var(--ink-faint); cursor: progress; text-decoration: none; }

/* [hidden] moet winnen van display-regels hierboven. */
.verder[hidden],
.locatieknop[hidden],
[data-locatie-melding][hidden] { display: none; }

/* =====================================================================
   HUISSTIJL — ZOEKVELDEN: ÉÉN KADER
   ---------------------------------------------------------------------
   Elk zoekveld zag er dubbel uit, om drie redenen:
   - Safari tekent een eigen afgerond kader in elk type="search"-veld;
   - de algemene focusregel voor invoervelden gaf het veld een eigen ring,
     binnen de ring van de zoekbalk eromheen;
   - op /ondernemers/ lag het oude kader van .verkoop-zoek nog onder de
     nieuwe zoeker.
   Nu heeft elke zoekbalk precies één kader: de balk op desktop, het veld
   zelf op mobiel (waar veld en knop onder elkaar staan).
   ===================================================================== */

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* Desktop: de rij is het kader, het veld is kaal. */
.zoeker .zoeker__rij input,
.zoeker .zoeker__rij input:focus {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

/* Mobiel: de rij heeft geen kader, het veld wel. */
@media (max-width: 899px) {
  .zoeker .zoeker__rij input {
    border: 1px solid var(--kaart-rand);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--kaart-schaduw);
  }
  .zoeker .zoeker__rij input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-tint), var(--kaart-schaduw);
  }
}

/* /ondernemers/: het oude kader van .verkoop-zoek uit. */
.zoeker.verkoop-zoek {
  display: block;
  max-width: 560px;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* Kopbalk: het veld is één pil. Het formulier eromheen droeg nog de
   rand, achtergrond en binnenruimte van een oudere kopbalkzoeker met
   dezelfde klassenaam; daardoor stond de pil in een tweede pil. */
@media (min-width: 900px) {
  .kopzoek,
  .kopzoek:focus-within {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-left: 0;
  }
}
.kopzoek input:focus { box-shadow: 0 0 0 3px var(--brand-tint); }

/* Het vergrootglas en de wisselpil zijn voor mobiel. Hun basisregel stond
   ná de desktopregel die ze verbergt, en won daardoor: op desktop stond
   er een half vergrootglas naast het zoekveld. */
@media (min-width: 900px) {
  .site-header .kopzoek-knop,
  .site-header .city-pill--wissel { display: none; }
}

/* =====================================================================
   HUISSTIJL — VERSCHIL MET GISTEREN
   ---------------------------------------------------------------------
   Onder de toelichting in een tegel: "↓ 2 minder dan gisteren". Zelfde
   definitie van "actueel", 24 uur eerder. Meer is rood, minder groen,
   gelijk grijs — zoals de stijgers en dalers op de datapagina's.
   ===================================================================== */

.strook .status-card {
  grid-template-areas:
    "icoon waarde"
    "label label"
    "noot  noot"
    "delta delta";
}

.status-card__delta {
  grid-area: delta;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: .75rem; font-weight: 600;
  color: var(--ink-faint);
}
/* Donkerder dan de categoriekleuren: dit is kleine tekst, en rood
   #EF4444 en groen #22C55E halen op wit het leescontrast niet (3,8 en
   2,3 tegen de norm van 4,5). Ook de stijgers en dalers op de
   datapagina's gebruiken nu deze twee, zodat rood en groen overal
   hetzelfde betekenen en er hetzelfde uitzien. */
.status-card__delta.is-op,
.kpi__delta.is-op   { color: #DC2626; }
.status-card__delta.is-neer,
.kpi__delta.is-neer { color: #15803D; }


/* =====================================================================
   HUISSTIJL — LICHTBLAUWE HERO EN STROOK
   ---------------------------------------------------------------------
   Zoals in het ontwerp: de hero is links vol lichtblauw en loopt naar
   rechts over in de foto, in plaats van wit. Dat geldt voor elke kop:
   de homepage, de stadspagina, de paginakop van alle onderliggende
   pagina's en /ondernemers/. De strook ("Nederland in beeld", "Nu in …")
   krijgt dezelfde lichtblauwe tint.

   De sluier over de foto gebruikt dezelfde kleur als het vlak ernaast
   (#EAF0FA = rgb 234 240 250). Is die anders, dan zie je een naad waar
   de foto begint.
   ===================================================================== */

.landing,
.paginakop,
.verkoop-hero,
.hero--plain,
.hero--photo {
  background: linear-gradient(180deg, var(--hero-bg-licht) 0%, var(--hero-bg) 100%);
}

/* Mobiel: foto achter de tekst, onder een lichtblauwe sluier. */
.landing__media::after {
  background: linear-gradient(180deg,
    rgba(234, 240, 250, .95) 0%,
    rgba(234, 240, 250, .90) 46%,
    rgba(234, 240, 250, .84) 74%,
    rgba(234, 240, 250, .93) 100%);
}
.landing__media--mozaiek::after {
  background: linear-gradient(180deg,
    rgba(234, 240, 250, .96) 0%,
    rgba(234, 240, 250, .93) 50%,
    rgba(234, 240, 250, .89) 78%,
    rgba(234, 240, 250, .95) 100%);
}
.verkoop-hero--foto::after { background: rgba(234, 240, 250, .9); }

/* Desktop: links vol lichtblauw, naar rechts de foto. */
@media (min-width: 900px) {
  .landing--beeld::before,
  .hero--photo::before { background: var(--hero-bg); }

  .landing--beeld .landing__media::after,
  .hero--photo .hero__media::after {
    background: linear-gradient(90deg,
      rgba(234, 240, 250, 1) 0%,
      rgba(234, 240, 250, .96) 24%,
      rgba(234, 240, 250, .55) 56%,
      rgba(234, 240, 250, .10) 86%,
      rgba(234, 240, 250, 0) 100%);
  }
  .verkoop-hero--foto::after {
    background: linear-gradient(90deg,
      rgba(234, 240, 250, 1) 0%,
      rgba(234, 240, 250, 1) 38%,
      rgba(234, 240, 250, .96) 50%,
      rgba(234, 240, 250, .55) 70%,
      rgba(234, 240, 250, .08) 94%,
      rgba(234, 240, 250, 0) 100%);
  }
}

/* De strook: lichtblauw vlak, lijnen in een tint die daarbij past. */
.strook {
  background: var(--strook-bg);
  border-color: var(--strook-lijn);
}
.strook__cellen > * {
  box-shadow: inset -1px 0 0 var(--strook-lijn), inset 0 -1px 0 var(--strook-lijn);
}
.strook a.status-card:hover {
  background: #ECF2FC;
  box-shadow: inset -1px 0 0 var(--strook-lijn), inset 0 -1px 0 var(--strook-lijn);
}