/* Bourgondisch Dichtbij — bordeauxrood, crème en natuurlijke tinten (wens Gerwin). */
:root {
  --bordeaux: #6b1e2e;
  --bordeaux-donker: #4a1220;
  --bordeaux-licht: #f3e3e3;
  --creme: #f8f2e7;
  --papier: #fffcf6;
  --zand: #e8dcc6;
  --zand-donker: #cdbb9b;
  --olijf: #4f5b2e;
  --olijf-licht: #eaedda;
  --hout: #7a5a3a;
  --inkt: #2b1e1a;
  --grijs: #62564f;
  --rand: #8c7a5e;      /* ruim 3:1 op papier, voor randen van velden */
  --goud: #b9862f;
  --focus: #8a6420;     /* 4,8:1 op crème */
  --schaduw: 0 1px 2px rgba(43, 30, 26, .06), 0 6px 20px rgba(43, 30, 26, .07);
  --schaduw-hoog: 0 2px 4px rgba(43, 30, 26, .08), 0 14px 34px rgba(43, 30, 26, .14);
  --r: 14px;
  --kop: "Young Serif", Georgia, "Times New Roman", serif;
  --tekst: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 90px; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--creme); color: var(--inkt);
  font: 400 17px/1.55 var(--tekst);
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 120px; outline: none; }
h1, h2, h3 { font-family: var(--kop); font-weight: 400; line-height: 1.2; color: var(--bordeaux-donker); letter-spacing: -.005em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); margin: .2em 0 .35em; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); margin: 1.6em 0 .5em; }
h3 { font-size: 1.15rem; margin: 1.2em 0 .4em; }
p { margin: 0 0 .9em; }
a { color: var(--bordeaux); text-underline-offset: 2px; }
a:hover { color: var(--bordeaux-donker); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1[tabindex="-1"]:focus, main:focus { outline: none; }
.klein { font-size: .9rem; color: var(--grijs); }
[hidden] { display: none !important; }

.overslaan { position: absolute; left: -9999px; top: 8px; background: var(--papier); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.overslaan:focus { left: 8px; }
.conceptbalk { background: var(--bordeaux-donker); color: #f6e9e0; text-align: center; font-size: .85rem; padding: 6px 16px; letter-spacing: .01em; }

/* Kop */
.kop { background: var(--papier); border-bottom: 1px solid var(--zand); position: sticky; top: 0; z-index: 20; }
.kop-binnen { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.merk { text-decoration: none; display: flex; flex-direction: column; justify-content: center; line-height: 1.1; min-height: 44px; }
.merk-naam { font-family: var(--kop); font-size: 1.35rem; color: var(--bordeaux); }
.merk-sub { font-size: .78rem; color: var(--grijs); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.menu { display: flex; gap: 2px; flex-wrap: wrap; }
.menu a { text-decoration: none; color: var(--inkt); padding: 9px 12px; border-radius: 999px; font-weight: 600; font-size: .95rem; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--bordeaux-licht); color: var(--bordeaux-donker); }
.teller { background: var(--bordeaux); color: #fff; border-radius: 999px; font-size: .75rem; padding: 1px 7px; font-weight: 700; }

/* Knoppen en velden */
.knop {
  appearance: none; border: 0; border-radius: 999px; background: var(--bordeaux); color: #fff;
  font: 600 1rem/1.2 var(--tekst); padding: 12px 20px; min-height: 46px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.knop:hover { background: var(--bordeaux-donker); color: #fff; }
.knop:disabled, .knop:disabled:hover { opacity: .55; cursor: not-allowed; background: var(--bordeaux); }
.knop-licht:disabled, .knop-licht:disabled:hover { background: var(--papier); }
.laadfout { background: #fbe9e7; border: 1.5px solid #c9776f; color: #7d1d17; border-radius: 10px; padding: 10px 12px; font-weight: 600; margin: 0 0 16px; grid-column: 1 / -1; }
.linkknop { appearance: none; background: none; border: 0; color: var(--bordeaux); font: 600 .95rem var(--tekst); text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; }
.linkknop:hover { color: var(--bordeaux-donker); }
.hoofdacties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.nevenacties { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.rand-melding { background: #fff8e8; border: 1px solid #e3cd8a; border-radius: 10px; padding: 10px 12px; font-size: .95rem; margin-bottom: 12px; }
.knop:active { transform: translateY(1px); }
.knop-licht { background: var(--papier); color: var(--bordeaux); box-shadow: inset 0 0 0 1.5px var(--bordeaux); }
.knop-licht:hover { background: var(--bordeaux-licht); color: var(--bordeaux-donker); }
.knop-groot { width: 100%; font-size: 1.1rem; padding: 15px 22px; min-height: 54px; }
.knop-klein { padding: 9px 15px; min-height: 44px; font-size: .94rem; }
.knop[aria-pressed="true"] { background: var(--olijf); color: #fff; box-shadow: none; }
input[type=text], input[type=email], select, textarea {
  width: 100%; font: inherit; color: var(--inkt); background: #fff; border: 1.5px solid var(--rand);
  border-radius: 10px; padding: 11px 13px; min-height: 48px;
}
input:focus, select:focus, textarea:focus { border-color: var(--bordeaux); outline: 3px solid rgba(185, 134, 47, .45); outline-offset: 1px; }
textarea { min-height: 110px; resize: vertical; }
label { font-weight: 700; display: block; margin-bottom: 2px; }
.hint { font-size: .9rem; color: var(--grijs); margin: 0 0 6px; }
.fout { color: #9b1c1c; font-weight: 600; margin: 6px 0 0; font-size: .95rem; min-height: 0; }
.fout:empty { display: none; }
.veld { margin-bottom: 18px; }
.rij { display: flex; gap: 8px; flex-wrap: wrap; }
.rij input { flex: 1 1 220px; }

/* Held + zoekkaart */
.held { position: relative; margin: 18px 0 0; border-radius: 20px; overflow: hidden; background: var(--bordeaux-donker); min-height: 260px; box-shadow: var(--schaduw); }
.held-foto { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: .78; }
.held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 14, 20, .15) 0%, rgba(43, 14, 20, .78) 75%); }
.held-tekst { position: relative; z-index: 1; padding: 110px 22px 26px; color: #fff; max-width: 680px; }
.held-tekst h1 { color: #fff; margin-top: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.held-tekst p { font-size: 1.08rem; color: #f7ece4; margin: 0; }
.zoekkaart { background: var(--papier); border-radius: 18px; box-shadow: var(--schaduw-hoog); padding: 22px 18px; margin: -26px 10px 0; position: relative; z-index: 2; border: 1px solid var(--zand); }
.suggesties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  appearance: none; border: 1.5px solid var(--zand-donker); background: var(--creme); color: var(--inkt);
  border-radius: 999px; padding: 9px 15px; font: 500 .94rem/1.2 var(--tekst); cursor: pointer; min-height: 44px;
}
.chip:hover { border-color: var(--bordeaux); color: var(--bordeaux-donker); background: #fff; }
.chip[aria-pressed="true"] { background: var(--bordeaux); color: #fff; border-color: var(--bordeaux); }
.uitleg-blok { margin: 34px 4px 0; }
.stappen { padding-left: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.stappen li { counter-increment: s; background: var(--papier); border: 1px solid var(--zand); border-radius: 12px; padding: 12px 14px 12px 56px; position: relative; }
.stappen li::before { content: counter(s); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--olijf); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; }

/* Resultaten */
.terug { appearance: none; border: 0; background: none; color: var(--bordeaux); font: 600 1rem var(--tekst); padding: 14px 0 6px; cursor: pointer; min-height: 44px; }
.terug:hover { text-decoration: underline; }
.res-kop h1 { margin-bottom: .15em; }
.samenvatting { color: var(--grijs); margin-bottom: 14px; }
.advies { background: var(--olijf-licht); border: 1px solid #c9cfae; border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; }
.advies h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--olijf); }
.advies p:last-child { margin-bottom: 0; }
.advies .niet { color: var(--hout); font-weight: 600; }
.combinatie { background: var(--papier); border: 1px solid var(--zand); border-left: 5px solid var(--olijf); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; box-shadow: var(--schaduw); }
.combinatie h2 { margin: 0 0 4px; font-size: 1.15rem; }
.combinatie ol { margin: 8px 0 12px; padding-left: 22px; }
.combinatie li { margin-bottom: 4px; }
.filters { background: var(--papier); border: 1px solid var(--zand); border-radius: var(--r); margin-bottom: 12px; }
.filters summary { cursor: pointer; padding: 13px 16px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; }
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: "▾"; margin-left: auto; color: var(--bordeaux); transition: transform .2s; }
.filters[open] summary::after { transform: rotate(180deg); }
.filter-binnen { padding: 4px 16px 16px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.vink { display: flex; align-items: center; gap: 10px; font-weight: 400; padding: 6px 0; min-height: 44px; cursor: pointer; }
.vink input { width: 22px; height: 22px; accent-color: var(--bordeaux); flex: none; margin: 0; }
.vink .aantal { color: var(--grijs); font-size: .88rem; }
.vink.uit { color: #6e625a; cursor: not-allowed; }
.weergave-knoppen { display: none; gap: 6px; margin-bottom: 12px; }
.knop-tab { appearance: none; flex: 1; border: 1.5px solid var(--bordeaux); background: var(--papier); color: var(--bordeaux); border-radius: 999px; font: 600 1rem var(--tekst); padding: 10px; min-height: 46px; cursor: pointer; }
.knop-tab[aria-pressed="true"] { background: var(--bordeaux); color: #fff; }
.res-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.kaart-houder { position: sticky; top: 84px; }
.kaart { height: calc(100vh - 120px); min-height: 380px; border-radius: var(--r); border: 1px solid var(--zand); box-shadow: var(--schaduw); background: var(--zand); }
.lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }

.winkelkaart { background: var(--papier); border: 1px solid var(--zand); border-radius: var(--r); padding: 16px; box-shadow: var(--schaduw); transition: box-shadow .15s, border-color .15s; position: relative; }
.winkelkaart.actief { border-color: var(--bordeaux); box-shadow: var(--schaduw-hoog); }
.wk-kop { display: flex; gap: 12px; align-items: flex-start; }
.nr { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bordeaux); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .95rem; margin-top: 2px; }
.wk-kop h2 { margin: 0; font-size: 1.22rem; }
.wk-kop h2 a { color: var(--bordeaux-donker); text-decoration: none; }
.wk-kop h2 a:hover { text-decoration: underline; }
.wk-meta { color: var(--grijs); font-size: .95rem; margin: 2px 0 0; }
.labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.label { font-size: .82rem; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--creme); border: 1px solid var(--zand-donker); color: var(--inkt); }
.label.cat-kaas { background: #fbf0cf; border-color: #e3cd8a; }
.label.cat-slager { background: #f6dede; border-color: #dfb0b0; }
.label.cat-drank { background: #efe0ea; border-color: #d3b5c8; }
.label.cat-delicatessen { background: #eee6d8; border-color: #d4c3a5; }
.label.cat-boerderij { background: var(--olijf-licht); border-color: #c9cfae; }
.label.sponsor { background: #fff4d6; border-color: var(--goud); color: #5d4210; }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; margin-top: 8px; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #a39a92; }
.status.open::before { background: #3d7a32; }
.status.dicht::before { background: #a5332f; }
.status.open { color: #2f5f27; }
.status.dicht { color: #8b2925; }
.status.onbekend { color: var(--grijs); font-weight: 500; }
.waarom { margin: 10px 0 0; padding: 10px 12px; background: var(--creme); border-radius: 10px; font-size: .94rem; }
.waarom strong { color: var(--olijf); }
.waarom ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.waarom li { padding: 2px 0 2px 24px; position: relative; }
.waarom li::before { position: absolute; left: 2px; top: 2px; font-weight: 700; }
.waarom li.bevestigd::before { content: "✓"; color: #2f6a27; }
.waarom li.soort::before { content: "●"; color: var(--olijf); font-size: .8em; top: 4px; }
.waarom li.misschien::before { content: "?"; color: var(--hout); }
.waarom .niveau { font-size: .8rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--zand-donker); color: var(--grijs); white-space: nowrap; }
.waarom li.bevestigd .niveau { background: #e5f0df; border-color: #a9c79c; color: #2f5f27; }
.begrepen { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; background: #fff; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px !important; }
.begrepen > span { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.begrepen .tag { background: var(--olijf-licht); border: 1px solid #c9cfae; border-radius: 999px; padding: 2px 10px; font-size: .88rem; font-weight: 600; }
.begrepen .tag-niet { background: #f6dede; border-color: #dfb0b0; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.waarom .wie { color: var(--grijs); }
.bronregel { font-size: .82rem; color: var(--grijs); margin: 10px 0 0; }
.wk-acties { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wk-acties .knop { flex: 1 1 auto; }
.leeg { background: var(--papier); border: 1px dashed var(--zand-donker); border-radius: var(--r); padding: 22px 18px; }
.leeg h2 { margin-top: 0; }
.gesponsord-blok { background: #fffaf0; border: 1.5px solid var(--goud); border-radius: var(--r); padding: 12px 14px; margin-bottom: 14px; }
.gesponsord-blok h2 { margin: 0 0 8px; font-size: 1rem; font-family: var(--tekst); font-weight: 700; color: #5d4210; text-transform: uppercase; letter-spacing: .06em; }

/* kaartpins */
.pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--bordeaux); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); display: grid; place-items: center; }
.pin span { transform: rotate(45deg); color: #fff; font: 700 13px/1 var(--tekst); }
.pin.actief { background: #8a6420; }
.pin.jij { background: var(--olijf); border-radius: 50%; transform: none; width: 18px; height: 18px; border-width: 3px; }
.leaflet-container { font: 14px/1.4 var(--tekst); }
.leaflet-popup-content a { color: var(--bordeaux); font-weight: 600; }

/* Vergelijkbalk */
.vergelijkbalk { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 30; background: var(--inkt); color: #fff; border-radius: 999px; padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 8px; box-shadow: var(--schaduw-hoog); max-width: calc(100vw - 24px); }
.vergelijkbalk .knop-licht { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.vergelijkbalk .knop-licht:hover { background: rgba(255, 255, 255, .12); }
.vergelijkbalk span { font-weight: 600; white-space: nowrap; }

/* Vergelijken */
.vergelijk-tabel-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--zand); background: var(--papier); box-shadow: var(--schaduw); }
.vergelijk-tabel { border-collapse: collapse; width: 100%; min-width: 560px; }
.vergelijk-tabel th, .vergelijk-tabel td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--zand); font-size: .95rem; }
.vergelijk-tabel thead th { background: var(--bordeaux); color: #fff; font-family: var(--kop); font-weight: 400; font-size: 1.05rem; }
.vergelijk-tabel thead th a { color: #fff; }
.vergelijk-tabel tbody th { background: var(--creme); width: 150px; font-weight: 700; position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--zand); }
.vergelijk-tabel thead th:first-child { position: sticky; left: 0; z-index: 2; }
.onbekend { color: #6e625a; font-style: italic; }

/* Winkelpagina */
.winkel-kop { background: var(--papier); border: 1px solid var(--zand); border-radius: 18px; padding: 20px 18px; box-shadow: var(--schaduw); }
.winkel-kop h1 { margin-top: 4px; }
.winkel-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.paneel { background: var(--papier); border: 1px solid var(--zand); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--schaduw); margin-bottom: 18px; }
.paneel h2 { margin-top: 0; font-size: 1.25rem; }
.minikaart { height: 260px; border-radius: 12px; border: 1px solid var(--zand); margin-bottom: 10px; }
.tijden { width: 100%; border-collapse: collapse; }
.tijden td { padding: 5px 0; border-bottom: 1px dotted var(--zand-donker); }
.tijden td:last-child { text-align: right; }
.tijden tr.vandaag td { font-weight: 700; color: var(--bordeaux-donker); }
.feiten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.feiten dt { font-weight: 700; }
.feiten dd { margin: 0; }
.bronnen { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bronnen th, .bronnen td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--zand); vertical-align: top; }
.bronnen th { background: var(--creme); }
.foto-leeg { background: repeating-linear-gradient(45deg, var(--creme), var(--creme) 10px, #f2ead9 10px, #f2ead9 20px); border-radius: 12px; padding: 18px; color: var(--grijs); text-align: center; font-size: .95rem; }
.demo-balk { background: #fff4d6; border: 2px dashed var(--goud); color: #5d4210; padding: 12px 16px; border-radius: 12px; margin: 16px 0; }
.melden-form { display: grid; gap: 12px; }
.radio { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; padding: 4px 0; cursor: pointer; }
.radio input { width: 20px; height: 20px; accent-color: var(--bordeaux); margin-top: 2px; flex: none; }

/* Prijzen */
.prijs-tabel { width: 100%; border-collapse: collapse; background: var(--papier); }
.prijs-tabel th, .prijs-tabel td { padding: 9px 10px; border-bottom: 1px solid var(--zand); text-align: left; }

.melding-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); background: var(--olijf); color: #fff; padding: 11px 18px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 40; max-width: calc(100vw - 32px); text-align: center; }
.melding-toast.zicht { opacity: 1; transform: translateX(-50%) translateY(0); }
.laden { color: var(--grijs); padding: 20px 0; }
.laden::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 3px solid var(--zand); border-top-color: var(--bordeaux); border-radius: 50%; margin-right: 10px; vertical-align: -3px; animation: draai .8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

.voet { background: var(--bordeaux-donker); color: #ecdcd2; text-align: center; padding: 22px 16px 90px; font-size: .9rem; }
.voet a { color: #fff; }
.voet p { margin: 4px 0; }
.voet .powered { font-family: var(--kop); font-size: 1.05rem; color: #fff; margin-bottom: 10px; letter-spacing: .01em; }
.voet .powered a { text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.voet .powered a:hover { border-bottom-color: #fff; }
#v-over, #v-prijzen, #v-favorieten { max-width: 780px; }
#v-over ul { padding-left: 20px; }

@media (min-width: 760px) {
  .held { min-height: 340px; margin-top: 24px; }
  .held-tekst { padding: 150px 40px 52px; }
  .zoekkaart { margin: -40px 40px 0; padding: 28px 30px; display: grid; grid-template-columns: 1fr 200px; gap: 0 18px; }
  /* vaste namen i.p.v. :nth-child: de (verborgen) laadfout telde mee, waardoor 'Waar zoek je?' in de smalle kolom viel */
  .zoekkaart .laadfout { grid-column: 1 / -1; }
  .zoekkaart .veld-waar { grid-column: 1; }
  .zoekkaart .veld-straal { grid-column: 2; align-self: start; }
  .zoekkaart .veld-straal select { width: 100%; }
  .zoekkaart .veld-wens, .zoekkaart .knop-groot, .zoekkaart .klein { grid-column: 1 / -1; }
  .stappen { grid-template-columns: repeat(5, 1fr); }
  .stappen li { padding: 54px 14px 14px; }
  .stappen li::before { top: 14px; transform: none; }
}
@media (max-width: 860px) {
  .res-raster, .winkel-raster { grid-template-columns: minmax(0, 1fr); }
  .winkel-raster > div:last-child { order: -1; }
  .weergave-knoppen { display: flex; }
  .kaart-houder { position: static; }
  .kaart { height: 64vh; }
  .res-raster.lijst-modus .kaart-houder { display: none; }
  .res-raster.kaart-modus > div:first-child { display: none; }
  .kop-binnen { padding: 8px 12px; }
  .menu a { padding: 8px 9px; font-size: .9rem; }
}
@media (max-width: 600px) {
  .kop { position: static; }
  .kop-binnen { gap: 4px; }
  .menu { width: 100%; justify-content: space-between; margin: 0 -6px; }
  .conceptbalk .lang { display: none; }
}
@media (max-width: 420px) {
  body { font-size: 16px; }
  .merk-sub { display: none; }
  .zoekkaart { margin: -22px 0 0; padding: 18px 14px; }
  .held-tekst { padding: 90px 18px 34px; }
  .vergelijkbalk { padding: 6px 6px 6px 14px; gap: 6px; }
  .vergelijkbalk .knop { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.melden-paneel { max-width: 720px; }

/* Ronde 3: actualiteit, volgorde, belofte, plaatsen */
.status.twijfel { color: #8a4b00; }
.status.twijfel::before { background: #c77700; }
.actueel { font-size: .85rem; color: var(--grijs); margin: 2px 0 0 16px; }
.actueel.oud { color: #8a4b00; font-weight: 600; }
.reistijd { color: var(--grijs); font-weight: 400; white-space: nowrap; }
.sortering { font-size: .92rem; color: var(--grijs); margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.sortering strong { color: var(--inkt); }
.sortering .linkknop { padding: 6px 2px; min-height: 36px; }
.belofte { list-style: none; padding: 0; margin: 22px 4px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.belofte li { display: inline-flex; align-items: center; gap: 7px; background: var(--papier); border: 1px solid var(--zand); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: .9rem; font-weight: 600; color: var(--inkt); }
.belofte li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--olijf); color: #fff; font-size: .75rem; }
.plaats-filter { max-width: 420px; margin-top: 10px; }
.plaatsen-raster { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.plaats-knop { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; min-height: 44px; border-radius: var(--r); border: 1px solid var(--zand); background: var(--papier); box-shadow: var(--schaduw); cursor: pointer; font: inherit; color: var(--inkt); transition: border-color .15s, box-shadow .15s; }
.plaats-knop:hover { border-color: var(--bordeaux); box-shadow: var(--schaduw-hoog); }
.plaats-naam { font-family: var(--kop); font-size: 1.15rem; color: var(--bordeaux-donker); }
.plaats-aantal { font-weight: 700; font-size: .92rem; }
.plaats-cats { font-size: .82rem; color: var(--grijs); }
@media (prefers-reduced-motion: reduce) { .plaats-knop { transition: none; } }

/* Website werkte niet bij de laatste controle */
.waarschuwing { color: #7a3300; }