/* FRYSK statistieken, huisstijl FRYSK makelaars (fryskmakelaars.nl):
   paars = merk en getallen, blauw = links en informatie, oranje = alleen de knop die het werk afmaakt,
   groen/oranje/rood = goed / let op / actie nodig. Almarai voor tekst, Roboto cursief voor koppen en grote getallen. */
:root {
  --paars: #582a8a; --paars-d: #3f1171; --paars-l: #7244a4; --paars-licht: #f0e9f7;
  --blauw: #007dbe; --blauw-licht: #e3f1fa; --oranje-cta: #ec6226; --oranje-cta-d: #d3490d; --zand: #ca9063;
  --grijs: #f6f3f9; --rand: #e3dbec; --tekst: #24172f; --stil: #6d6178;
  --groen: #1b7f48; --groen-licht: #e2f4ea; --oranje: #b45f0a; --oranje-licht: #fdf0e1; --rood: #b42318; --rood-licht: #fde8e6;
  --signaal: #d92d20;
  --f-tekst: "Almarai", "Segoe UI", system-ui, Arial, sans-serif; --f-kop: "Roboto", "Arial Narrow", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: var(--f-tekst); color: var(--tekst); background: var(--grijs); line-height: 1.5; }
a { color: var(--blauw); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 8px; }
h1 { font-family: var(--f-kop); font-style: italic; font-weight: 900; font-size: 1.9rem; color: var(--paars); margin: 4px 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; line-height: 1.15; }
h1 .stil { font-family: var(--f-tekst); font-style: normal; font-weight: 400; font-size: 1rem; }
h2 { font-size: 1.1rem; font-weight: 800; margin: 24px 0 8px; }
h3 { font-size: .95rem; font-weight: 800; margin: 16px 0 6px; color: var(--paars); }
.stil { color: var(--stil); font-weight: 400; font-size: .92em; }
.leeg { color: var(--stil); font-style: italic; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }

/* kop */
.top { background: var(--paars); color: #fff; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px rgba(63,17,113,.25); }
.top-in { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.merk { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: .95rem; }
.merk:hover { text-decoration: none; }
.merk img { height: 30px; width: auto; display: block; }
.merk span { opacity: .8; font-weight: 400; border-left: 1px solid rgba(255,255,255,.35); padding-left: 10px; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a { padding: 7px 12px; border-radius: 9px; color: #fff; opacity: .82; font-weight: 700; font-size: .95rem; }
.top nav a:hover { opacity: 1; background: rgba(255,255,255,.12); text-decoration: none; }
.top nav a.actief { opacity: 1; background: rgba(255,255,255,.2); }
.zoek { margin-left: auto; }
.zoek input { width: 190px; padding: 8px 12px; border: 0; border-radius: 9px; font: inherit; font-size: .9rem; background: rgba(255,255,255,.16); color: #fff; }
.zoek input::placeholder { color: rgba(255,255,255,.75); }
.zoek input:focus { background: #fff; color: var(--tekst); outline: none; }
.top .knop.nieuw { background: transparent; border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.top .knop.nieuw:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* belletje promotiesignaal + gebruikersmenu (details-dropdowns) */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.bel { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.14); position: relative; }
.bel:hover { background: rgba(255,255,255,.24); }
.bel svg { width: 18px; height: 18px; }
.rondje { position: absolute; top: -4px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--signaal); color: #fff; font-size: .74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--paars); }
.paneel { position: absolute; right: 0; top: calc(100% + 10px); width: min(440px, calc(100vw - 32px)); background: #fff; color: var(--tekst); border-radius: 14px; box-shadow: 0 18px 50px rgba(36,23,47,.28); overflow: hidden; z-index: 30; }
.paneel-kop { padding: 12px 16px; border-bottom: 1px solid var(--rand); display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.paneel-kop b { font-size: .98rem; }
.paneel-lijst { max-height: 60vh; overflow-y: auto; }
.prow { padding: 11px 16px; border-bottom: 1px solid var(--rand); display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
.prow:last-child { border-bottom: 0; }
.prow .wat { font-size: .82rem; color: var(--stil); grid-column: 1; }
.prow form { grid-row: 1 / span 2; grid-column: 2; }
.prow.gezien { background: var(--grijs); }
.prow.gezien .adresregel { color: var(--stil); }
.stip-rood { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--signaal); margin-right: 6px; }
.menu-naam { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: .92rem; padding: 6px 10px; border-radius: 9px; }
.menu-naam:hover { background: rgba(255,255,255,.12); }
.menu-naam .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--zand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.paneel.menu { width: 240px; padding: 6px; }
.paneel.menu a, .paneel.menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--tekst); font: inherit; font-size: .93rem; background: none; border: 0; cursor: pointer; }
.paneel.menu a:hover, .paneel.menu button:hover { background: var(--paars-licht); text-decoration: none; }
.paneel.menu hr { border: 0; border-top: 1px solid var(--rand); margin: 6px 0; }

footer { text-align: center; color: var(--stil); font-size: .82rem; padding: 24px 16px 32px; }

/* knoppen */
.knop { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1.5px solid var(--rand); border-radius: 999px; background: #fff; color: var(--tekst); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; line-height: 1.2; }
.knop:hover { border-color: var(--paars); text-decoration: none; }
.knop.primair { background: var(--paars); border-color: var(--paars); color: #fff; }
.knop.primair:hover { background: var(--paars-d); }
.knop.doe { background: var(--oranje-cta); border-color: var(--oranje-cta); color: #fff; }
.knop.doe:hover { background: var(--oranje-cta-d); border-color: var(--oranje-cta-d); }
.knop.gevaar { color: var(--rood); }
.knop.klein { padding: 6px 12px; font-size: .85rem; }
button.link { background: none; border: none; color: var(--blauw); cursor: pointer; font: inherit; padding: 0; }
button.link.klein { font-size: .85rem; }
button.link.gevaar { color: var(--rood); }
form.inline { display: inline; }

/* meldingen */
.melding { padding: 11px 15px; border-radius: 10px; margin: 0 0 12px; background: var(--blauw-licht); border-left: 4px solid var(--blauw); }
.melding.ok { background: var(--groen-licht); border-color: var(--groen); }
.melding.fout { background: var(--rood-licht); border-color: var(--rood); }
.melding.let { background: var(--oranje-licht); border-color: var(--oranje); }
.melding ul { margin: 0; padding-left: 18px; }

/* kaarten en tegels */
.kaart { background: #fff; border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; border: 1px solid var(--rand); }
.kaart h2:first-child { margin-top: 0; }
.kaart.smal { max-width: 480px; }
.kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.kolommen > * { min-width: 0; }
@media (max-width: 860px) { .kolommen { grid-template-columns: 1fr; } }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.tegels.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .tegels.drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tegels.drie { grid-template-columns: 1fr; } }
.tegel { background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--rand); color: var(--tekst); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tegel .t { font-size: .8rem; color: var(--stil); font-weight: 700; }
.tegel .w { font-family: var(--f-kop); font-style: italic; font-weight: 900; font-size: 2rem; color: var(--paars); line-height: 1.1; }
.tegel .norm { font-size: .8rem; color: var(--stil); }
.tegel svg { display: block; width: 100%; height: 36px; margin-top: 6px; }

/* Vandaag: takenkaarten */
.groet { font-family: var(--f-kop); font-style: italic; font-weight: 900; color: var(--paars); font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 6px 0 4px; line-height: 1.15; text-wrap: balance; }
.ondertitel { color: var(--stil); margin: 0 0 18px; }
.vandaag-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .vandaag-raster { grid-template-columns: 1fr; } }
.taken { display: grid; gap: 12px; }
.taak { background: #fff; border-radius: 16px; padding: 15px 18px; border: 1px solid var(--rand); display: grid; gap: 4px; }
.taak .soort { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--stil); display: flex; gap: 8px; align-items: center; }
.taak .soort i { width: 8px; height: 8px; border-radius: 50%; background: var(--paars-l); display: inline-block; }
.taak.s-opvolgen .soort i { background: var(--rood); } .taak.s-uitkomst .soort i { background: var(--oranje-cta); }
.taak.s-courtage .soort i, .taak.s-transport .soort i { background: var(--oranje); }
.taak .adresregel { font-weight: 800; font-size: 1.08rem; }
.taak .adresregel a { color: var(--tekst); }
.taak .adresregel span { color: var(--stil); font-weight: 400; font-size: .92rem; margin-left: 4px; }
.taak .wat { font-size: .9rem; color: var(--stil); margin-bottom: 6px; }
.taakknoppen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.taakknoppen form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.taakknoppen input, .taakknoppen select { padding: 8px 12px; border: 1.5px solid var(--rand); border-radius: 999px; font: inherit; font-size: .9rem; background: #fff; color: var(--tekst); }
.taakknoppen input[type=text], .taakknoppen input[inputmode] { width: 170px; }
details.nietakkoord > summary { list-style: none; }
details.nietakkoord > summary::-webkit-details-marker { display: none; }
details.nietakkoord[open] > summary { border-color: var(--rood); color: var(--rood); }
details.nietakkoord form { margin-top: 8px; }
.klaar { background: #fff; border-radius: 16px; padding: 28px; text-align: center; border: 1px dashed var(--rand); }
.klaar b { font-family: var(--f-kop); font-style: italic; font-weight: 900; color: var(--paars); font-size: 1.4rem; display: block; }
.verder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.verder a { background: #fff; border: 1px solid var(--rand); border-radius: 999px; padding: 6px 12px; font-size: .88rem; color: var(--tekst); }
.verder a b { color: var(--paars); }
.zijkant .kaart h2 { font-size: 1rem; margin: 0 0 8px; }

/* Pijplijn */
.pijp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 4px 0 20px; }
.stap { display: block; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--rand); border-right-width: 0; color: var(--tekst); position: relative; min-width: 0; }
.stap:first-child { border-radius: 14px 0 0 14px; }
.stap:last-child { border-radius: 0 14px 14px 0; border-right-width: 1px; }
.stap:hover { background: var(--paars-licht); text-decoration: none; }
.stap.aan { background: var(--paars); color: #fff; border-color: var(--paars); }
.stap .naam { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--stil); }
.stap .n { font-family: var(--f-kop); font-style: italic; font-weight: 900; font-size: 2.2rem; color: var(--paars); line-height: 1.05; }
.stap .geld { font-size: .82rem; color: var(--stil); font-variant-numeric: tabular-nums; }
.stap.aan .naam, .stap.aan .geld, .stap.aan .n { color: #fff; }
@media (max-width: 820px) { .pijp { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .stap, .stap:first-child, .stap:last-child { border-radius: 12px; border-right-width: 1px; } }
@media (max-width: 460px) { .pijp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip { display: inline-block; margin-top: 8px; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.chip.let { background: var(--oranje-licht); color: var(--oranje); } .chip.goed { background: var(--groen-licht); color: var(--groen); } .chip.mis { background: var(--rood-licht); color: var(--rood); }
.meterbalk { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.meterbalk i { display: inline-block; height: 8px; border-radius: 4px; background: var(--paars-l); min-width: 3px; }
.meterbalk.laag i { background: var(--rood); } .meterbalk.hoog i { background: var(--groen); }

/* Woningen */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; align-items: center; }
.filters a { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand); background: #fff; color: var(--tekst); font-size: .88rem; font-weight: 700; }
.filters a.aan { background: var(--paars); color: #fff; border-color: var(--paars); }
.filters form { margin-left: auto; }
.filters input { padding: 7px 12px; border: 1px solid var(--rand); border-radius: 999px; font: inherit; font-size: .9rem; width: 220px; }

/* woningkaart */
.objectkop { display: flex; gap: 16px; align-items: center; margin-bottom: 10px; }
.objectkop .foto { width: 120px; height: 86px; object-fit: cover; border-radius: 12px; }
.objectkop p { margin: 2px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tijdlijn { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--rand); display: grid; gap: 10px; }
.tijdlijn li { position: relative; font-size: .92rem; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.tijdlijn li::before { content: ""; position: absolute; left: -27px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paars-l); border: 2px solid #fff; }
.tijdlijn li.toekomst::before { background: #fff; border-color: var(--paars-l); }
.tijdlijn .d { color: var(--stil); font-size: .82rem; min-width: 84px; font-variant-numeric: tabular-nums; }
.bron { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--paars-licht); color: var(--paars); white-space: nowrap; }
.bron.b-team { background: var(--oranje-licht); color: var(--oranje); }
.meter { background: var(--grijs); border-radius: 12px; padding: 14px; }
.meter .rij { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meter b { font-family: var(--f-kop); font-style: italic; font-weight: 900; font-size: 1.7rem; color: var(--paars); }
.schaal { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--rood-licht), var(--oranje-licht), var(--groen-licht)); margin: 10px 0 4px; }
.schaal i { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px; background: var(--tekst); }
.schaal em { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--stil); opacity: .6; }
.leg { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--stil); }
.zelfveld input { border-color: var(--oranje-cta) !important; }
.zelfveld { color: var(--oranje) !important; font-weight: 700; }

/* Cijfers */
.maanden { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; margin-top: 10px; }
.maand { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; text-align: center; font-size: .72rem; color: var(--stil); min-width: 0; }
.maand .zuil { background: var(--paars); border-radius: 6px 6px 0 0; min-height: 2px; }
.maand.toekomst .zuil { background: var(--paars-l); opacity: .55; }
.maand b { color: var(--tekst); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .maand b { display: none; } }

/* lijsten */
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { padding: 7px 0; border-bottom: 1px solid var(--grijs); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.lijst li:last-child { border-bottom: none; }
.lijst.klein li { font-size: .88rem; padding: 4px 0; }
.wanneer { font-variant-numeric: tabular-nums; color: var(--paars); font-weight: 700; min-width: 48px; }
.lijst.klein .wanneer { min-width: 118px; color: var(--stil); font-weight: 400; }
.lijst em { color: var(--stil); font-style: normal; font-size: .88em; }
.plaats { color: var(--stil); font-size: .88em; margin-left: 6px; }

/* tabellen */
.scroll { overflow-x: auto; background: #fff; border-radius: 14px; border: 1px solid var(--rand); }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th, .tabel td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--grijs); vertical-align: top; }
.tabel th { background: var(--paars-licht); color: var(--paars); font-weight: 700; white-space: nowrap; position: sticky; top: 0; font-size: .82rem; }
.tabel tbody tr:hover { background: #faf7fd; }
.tabel tfoot td { font-weight: 700; background: var(--grijs); }
.tabel .num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel .nr { color: var(--stil); width: 1%; }
.tabel.compact th, .tabel.compact td { padding: 6px 9px; font-size: .88rem; }
.tabel .tekst { color: var(--stil); font-size: .88em; }
.nowrap { white-space: nowrap; }
a.adres { font-weight: 700; color: var(--tekst); }
a.adres:hover { color: var(--paars); }
@media (max-width: 720px) { .opt { display: none; } }

/* badges per fase */
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--grijs); color: var(--stil); }
.f-gesprek, .f-offerte { background: var(--blauw-licht); color: var(--blauw); }
.f-akkoord, .f-aanmelding { background: var(--paars-licht); color: var(--paars); }
.f-beschikbaar { background: var(--groen-licht); color: var(--groen); }
.f-onder_bod, .f-vov { background: var(--oranje-licht); color: var(--oranje); }
.f-verkocht { background: var(--paars); color: #fff; }
.f-getransporteerd { background: #ebe6f0; color: #4a4356; }
.f-niet_akkoord, .f-ingetrokken { background: var(--rood-licht); color: var(--rood); }
.f-geparkeerd { background: var(--grijs); color: var(--stil); }

/* formulieren */
.formulier label { display: block; font-size: .85rem; color: var(--stil); margin: 8px 0; }
.formulier label small { color: var(--stil); font-weight: 400; }
.formulier input, .formulier select, .formulier textarea { display: block; width: 100%; margin-top: 3px; padding: 9px 11px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; font-size: 1rem; color: var(--tekst); background: #fff; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: 2px solid var(--blauw); border-color: var(--blauw); }
.formulier input:disabled { background: var(--grijs); color: var(--stil); border-style: dashed; }
.formulier .vink { display: flex; align-items: center; gap: 8px; }
.formulier .vink input { width: auto; margin: 0; }
.rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rij3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
@media (max-width: 600px) { .rij2, .rij3 { grid-template-columns: 1fr; } }
.knoppen { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.formulier.compact label { margin: 4px 0; }
.filter { display: flex; gap: 14px; margin: 8px 0 12px; flex-wrap: wrap; }
.filter select { padding: 5px 8px; font: inherit; border: 1px solid var(--rand); border-radius: 8px; }
details summary { cursor: pointer; }
.actieknoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
details.actie summary { list-style: none; }
details.actie summary::-webkit-details-marker { display: none; }
details.actie[open] summary { background: var(--paars-licht); }
.actieform { margin-top: 8px; padding: 12px; border: 1px solid var(--rand); border-radius: 12px; background: var(--grijs); display: grid; gap: 8px; min-width: 240px; }
.actieform label { font-size: .85rem; color: var(--stil); }
.actieform input, .actieform select { display: block; width: 100%; padding: 8px 10px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; margin-top: 3px; background: #fff; }

/* login */
.loginvlak { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--paars); background-image: radial-gradient(circle at 85% 110%, rgba(255,255,255,.08) 0 180px, transparent 181px); }
.login { width: 100%; max-width: 380px; background: #fff; padding: 30px; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login .logo { background: var(--paars); border-radius: 12px; padding: 14px; display: flex; justify-content: center; margin-bottom: 18px; }
.login .logo img { height: 40px; }
.login h1 { margin: 0 0 4px; font-size: 1.5rem; }
.login label { display: block; margin: 12px 0; font-size: .9rem; color: var(--stil); }
.login input { display: block; width: 100%; padding: 11px; margin-top: 4px; border: 1.5px solid var(--rand); border-radius: 10px; font: inherit; font-size: 1rem; }
.login button { width: 100%; margin-top: 10px; justify-content: center; }

@media (max-width: 1220px) {
  .merk span { display: none; }
  .zoek input { width: 150px; }
  .top .knop.nieuw { display: none; }
  .menu-naam .naamtekst { display: none; }
}
@media (max-width: 760px) {
  .top-in { gap: 8px 10px; }
  .merk span { display: none; }
  .zoek { order: 9; margin-left: 0; width: 100%; }
  .zoek input { width: 100%; }
  .top .knop.nieuw { display: none; }
  .top nav { order: 8; width: 100%; justify-content: space-between; }
  .top nav a { flex: 1; text-align: center; padding: 7px 4px; }
  .rechts { margin-left: auto; }
  main { padding: 14px 12px 8px; }
  .filters form { margin-left: 0; width: 100%; } .filters input { width: 100%; }
}
@media (max-width: 760px) { .paneel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; } .paneel.menu { left: auto; width: 240px; } }
@media (prefers-reduced-motion: no-preference) { .knop.doe { transition: background .15s, transform .15s; } .knop.doe:hover { transform: translateY(-1px); } }