/* Productpagina Kubus Lelystad Zuid (issue #1597). Tokens: design system Dossiercontrole · Kubus, thema
 * Kubus donker; klassen: design/dossiercontrole-kubus/project/components/bundle.css. De website is alleen donker. */
:root{
color-scheme:dark;
--oppervlak:#111827;--oppervlak-2:#1f2937;--oppervlak-3:#1f2937;--inkt:#f3f4f6;--inkt-2:#d1d5db;--gedempt:#9ca3af;--licht:#9ca3af;
--lijn:#374151;--lijn-zacht:#1f2937;--lijn-sterk:#4b5563;--invoer:#111827;--invoer-rand:#6b7280;--white:#ffffff;
--merk-50:#f4f1f7;--merk-100:#e7e2ef;--merk-200:#d0c5de;--merk-300:#b19ec8;--merk-500:#75549e;--merk-600:#623d91;--merk-700:#503277;--merk-800:#40285e;--merk-900:#301e47;
--accent-500:#abd463;--merk:var(--merk-300);--merk-sterk:var(--merk-100);--merk-vlak:var(--merk-900);
--kop:var(--merk-600);--kop-inkt:var(--white);--kop-zacht:var(--merk-100);--kop-hover:var(--merk-700);--kop-actief:var(--merk-800);--kop-rand:var(--merk-500);--kop-logo-vlak:var(--white);
--aandacht-sterk:#fcd34d;--aandacht-vlak-2:rgba(120, 53, 15, 0.4);--goed:#4ade80;--goed-sterk:#86efac;--goed-vlak-2:rgba(20, 83, 45, 0.4);
--site-grond:#111827;--site-vlak:#1F2937;--site-inkt:#F3F4F6;--site-gedempt:#9CA3AF;--site-lijn:#374151;
--site-merk:#B19EC8;--site-op-merk:#111827;--site-kop:#623D91;--site-kop-inkt:#FFFFFF;--site-accent:#A0CE4E;
--site-ruimte-8:64px;
--radius:4px;--radius-full:9999px;--rij-y:0.375rem;--rand-totaal:2px;--rand-kop:4px;--shadow-lg:none;
--font-sans:ui-sans-serif, system-ui, sans-serif
}
html,body{margin:0;background:var(--site-grond)}
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--site-merk)}a:hover{color:var(--merk-100)}
img{max-width:100%}

/*
 * Kubus Werkprogramma: de vormtaal als gewone CSS-klassen, met de hand overgenomen uit
 * packages/platform/src/client/components/tabelstijl.ts en de terugkerende Tailwind-klassen in de
 * clienttakken. In de app zelf zijn het Tailwind-klassen op RGB-triplets (`rgb(var(--lijn))`);
 * hier dragen de tokens hun kleur rechtstreeks (`var(--lijn)`). Maten zijn de Tailwind-waarden.
 */

body {
  font-family: var(--font-sans);
  color: var(--inkt);
  background: var(--oppervlak);
}

/* ---- Knoppen (geen component in de app: terugkerende class-strings) ---- */
.knop,
.knop-primair,
.knop-klein {
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  border-radius: var(--radius);
  padding: 6px 12px;
  cursor: pointer;
}
.knop-primair {
  border: 0;
  background: var(--merk-600);
  color: var(--white);
}
.knop-primair:hover {
  background: var(--merk-700);
}
.knop-primair:disabled {
  cursor: not-allowed;
  background: var(--lijn-sterk);
}
.knop {
  border: 1px solid var(--lijn-sterk);
  background: transparent;
  color: var(--inkt);
}
.knop:hover {
  background: var(--oppervlak-2);
}
.knop-klein {
  border: 1px solid var(--lijn-sterk);
  background: transparent;
  color: var(--inkt-2);
  font-size: 12px;
  line-height: 16px;
  padding: 2px 8px;
}
.knop-klein:hover {
  background: var(--oppervlak-2);
}
/* LINKKNOP en LINK */
.linkknop,
.link {
  font: inherit;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--merk);
  text-decoration: underline dotted;
}
.linkknop:hover {
  color: var(--merk-sterk);
}
.linkknop:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
:where(.knop, .knop-primair, .knop-klein, .linkknop, .subtab, .veld):focus-visible {
  outline: 2px solid var(--merk);
  outline-offset: 2px;
}

/* ---- Invoer ---- */
.veld {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid var(--invoer-rand);
  border-radius: var(--radius);
  background: var(--invoer);
  color: var(--inkt);
  padding: 4px 8px;
}
/* INVOER: in een tabelcel */
.celinvoer {
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  border: 1px solid var(--invoer-rand);
  border-radius: var(--radius);
  background: var(--invoer);
  color: var(--inkt);
  padding: 2px 4px;
}
.veldlabel {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* ---- Meldingen: MELDING, WAARSCHUWING, FOUT, INFO ---- */
.melding,
.waarschuwing,
.fout,
.info {
  border: 1px solid;
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
}
.melding {
  border-color: var(--lijn-sterk);
  background: var(--oppervlak-2);
  color: var(--inkt-2);
}
.waarschuwing {
  border-color: var(--aandacht-rand-sterk);
  background: var(--aandacht-vlak);
  color: var(--aandacht-sterk);
}
.fout {
  border-color: var(--fout-rand);
  background: var(--fout-vlak);
  color: var(--fout-sterk);
}
.info {
  border-color: var(--paars-rand);
  background: var(--paars-vlak);
  color: var(--paars-sterk);
}

/* ---- Labels: LABEL + LABELKLEUR, StatusBadge ---- */
.label {
  display: inline-block;
  white-space: nowrap;
  border-radius: var(--radius);
  padding: 2px 6px;
}
.label-grijs { background: var(--oppervlak-3); color: var(--gedempt); }
.label-groen { background: var(--goed-vlak-2); color: var(--goed-sterk); }
.label-amber { background: var(--aandacht-vlak-2); color: var(--aandacht-sterk); }
.label-blauw { background: var(--info-vlak-2); color: var(--info-sterk); }
.label-paars { background: var(--paars-vlak-2); color: var(--paars-sterk); }
.label-rood { background: var(--fout-vlak-2); color: var(--fout-sterk); }
.statusbadge {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

/* ---- Tag-pillen (index.css .tag) ---- */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
}
.tag-accent { background: var(--merk-vlak); color: var(--merk-sterk); }
.tag-neutral { background: var(--oppervlak-3); color: var(--gedempt); }
.tag-outline { border: 1px solid var(--merk-500); color: var(--merk-700); }

/* ---- Subtabbalk ---- */
.subtabbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.subtab {
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  border: 0;
  border-radius: var(--radius);
  padding: 4px 10px;
  background: transparent;
  color: var(--gedempt);
  cursor: pointer;
}
.subtab:hover { background: var(--oppervlak-2); }
.subtab[aria-selected="true"] {
  background: var(--merk-vlak);
  color: var(--merk-sterk);
  font-weight: 500;
}

/* ---- De kop (AppLayout, .kop) ---- */
.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--kop);
  color: var(--kop-inkt);
  border-bottom: var(--rand-kop) solid var(--accent-500);
  padding: 12px 16px;
}
.merkteken { display: flex; align-items: center; gap: 8px; }
.merknaam { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.025em; }
.logo-vlak { background: var(--kop-logo-vlak); }
.kop-zacht { font-size: 14px; line-height: 20px; color: var(--kop-zacht); }
.kop-schakelaar { display: flex; border: 1px solid var(--kop-rand); border-radius: var(--radius); overflow: hidden; }
.kop-schakelaar button {
  font: inherit;
  font-size: 12px;
  line-height: 16px;
  border: 0;
  padding: 4px 8px;
  background: transparent;
  color: var(--kop-zacht);
  cursor: pointer;
}
.kop-schakelaar button:hover { background: var(--kop-hover); }
.kop-schakelaar button[aria-pressed="true"] { background: var(--kop-actief); color: var(--kop-inkt); }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-500);
  color: var(--merk-sterk);
}

/* ---- Menu (popover, GebruikersMenu) ---- */
.menu {
  width: 256px;
  overflow: hidden;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--oppervlak);
  color: var(--inkt);
  box-shadow: var(--shadow-lg);
}
.menu-kop { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--lijn-zacht); padding: 12px; }
.menu-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  border: 0;
  padding: 6px 12px;
  background: transparent;
  color: var(--inkt-2);
  cursor: pointer;
}
.menu-item:hover { background: var(--oppervlak-2); }
.menu-item[aria-checked="true"] { color: var(--merk); font-weight: 500; }

/* ---- Sectie en tabel: SECTIE, KOPBALK, TITEL, TABEL, … ---- */
.sectie {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  font-size: var(--tekst-tabel, 12px);
  line-height: 1.3333;
  overflow: hidden;
}
.kopbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--lijn-zacht);
  background: var(--oppervlak-2);
  padding: 8px 12px;
}
.titel { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; }
.titel-bijzaak { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--gedempt); }
.kopbediening { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.bloktekst { padding: 8px 12px; color: var(--gedempt); margin: 0; }

.rooster { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th, .tabel td { padding: var(--rij-y) 12px; }
.tabel thead tr { border-bottom: 1px solid var(--lijn); text-align: left; color: var(--gedempt); }
.tabel th { font-weight: 400; }
.groeprij { border-top: 1px solid var(--lijn); font-weight: 500; cursor: pointer; }
.groeprij:hover { background: var(--oppervlak-2); }
.detailrij { border-bottom: 1px solid var(--lijn-zacht); }
.detailrij td.detaillabel { padding-left: 32px; color: var(--inkt-2); }
.totaalrij { border-top: var(--rand-totaal) solid var(--lijn-sterk); font-weight: 600; }
.getal { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.voetregel { border-top: 1px solid var(--lijn-zacht); padding: var(--rij-y) 12px; color: var(--gedempt); }
.neg { color: var(--neg, currentColor); }
.rijnummer { display: none; }

/* Vormgeving werkboek (index.css :310-340), hier ook op een omhullend element te zetten. */
[data-vormgeving="werkboek"] { --rij-y: var(--rij-y-compact); --neg: var(--fout-sterk); }
[data-vormgeving="werkboek"] .rooster th,
[data-vormgeving="werkboek"] .rooster td { border: 1px solid var(--lijn-zacht); }
[data-vormgeving="werkboek"] .rooster thead { background: var(--oppervlak-2); }
[data-vormgeving="werkboek"] .rooster table { counter-reset: rij; }
[data-vormgeving="werkboek"] .rooster .rijnummer {
  display: table-cell;
  width: 2.5rem;
  padding: 0 4px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--licht);
  background: var(--oppervlak-2);
  user-select: none;
}
/* ======================================================================
 * Website www.kubus-lelystad-zuid.dossiercontrole.app in de Kubus-huisstijl (issues #1597, #1638).
 * Sluit aan op de app: systeemletter, hoek 4px, kop met groene streep. Alleen site-*-tokens.
 * Zelfde opzet als sites/edm: drie lagen. Basis = een gewone scrollende pagina, kantlijn 16px, tekst
 * minimaal 16px, tikdoelen minimaal 44px; tot 600px breed staan de kolommen onder elkaar en krijgt het
 * menu een eigen regel; vanaf 1280×800 past alles in één scherm en scrolt de cockpit zelf.
 * Geen script: de tabbladen zijn drie radioknoppen vooraan in .site; alles erna reageert via ~.
 * ====================================================================== */
html,body{margin:0;min-height:100%;background:var(--site-grond)}
.site{font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--site-inkt);background:var(--site-grond);min-height:100vh;display:flex;flex-direction:column}
.site *{box-sizing:border-box}
.site :focus-visible{outline:2px solid var(--site-accent);outline-offset:2px}
.site :where(a){color:var(--site-merk)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px;flex:1;min-height:0;display:flex;flex-direction:column}

.site-kop{font-family:var(--font-sans);color:var(--site-inkt);margin:0}
.site-kop--display{font-weight:700;font-size:clamp(30px,5vw,42px);line-height:1.08;letter-spacing:-.025em}

.site-knop{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font:600 16px/1.2 var(--font-sans);border:0;border-radius:var(--radius);padding:10px 18px;cursor:pointer;text-decoration:none;white-space:nowrap;background:var(--site-merk);color:var(--site-op-merk)}
.site-knop:hover{background:var(--merk-700);color:var(--white)}
.site-knop--secundair{background:none;color:var(--site-inkt);box-shadow:inset 0 0 0 1px var(--invoer-rand)}
.site-knop--secundair:hover{background:var(--site-vlak);color:var(--site-inkt)}
.site-rij{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Kopbalk als in de app: vol paars met een groene streep eronder. Een menu-item is een link of een label voor een tabblad. */
.site-nav{background:var(--site-kop);border-bottom:4px solid var(--site-accent)}
.site-nav__in{max-width:1180px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.site-naam{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--site-kop-inkt);text-decoration:none}
.site-naam__logo{display:inline-flex;padding:5px 8px;background:var(--kop-logo-vlak);border-radius:var(--radius)}
.site-naam__logo img{height:34px;width:auto;display:block}
.site-naam__tekst{display:flex;flex-direction:column;line-height:1.2}
.site-naam__tekst b{font-weight:700;font-size:16px}
.site-naam__tekst span{font-weight:500;font-size:14px}
.site-nav__menu{display:flex;flex-wrap:nowrap;gap:4px;margin:0 0 0 auto;padding:0;list-style:none}
.site-nav__item{display:flex;align-items:center;min-height:44px;color:var(--site-kop-inkt);padding:6px 12px;border-radius:var(--radius);font-size:16px;line-height:1.3;text-decoration:none;white-space:nowrap;cursor:pointer}
.site-nav__item:hover{background:var(--kop-hover)}
.site-nav__item[aria-current="page"]{background:var(--kop-actief);font-weight:500}
.site-nav .site-knop{padding:8px 14px}

/* Kop */
.site-hero{padding:24px 0 16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.site-kicker{margin:0;font-size:16px;font-weight:600;color:var(--site-merk)}
.site-hero__sub{margin:0;max-width:70ch;color:var(--site-gedempt);font-size:17px}

/* Tabbladen */
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tabkeuze{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tab{background:var(--site-vlak);border:1.5px solid var(--site-lijn);border-radius:var(--radius);min-height:76px;padding:12px 18px;display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:pointer;color:var(--site-inkt);text-align:left}
.tab:hover{border-color:var(--lijn-sterk)}
.tab__kop{font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.015em}
.tab__sub{color:var(--site-gedempt);font-size:15px}
.cockpit{display:flex;flex-direction:column;gap:14px;padding-bottom:16px}
.paneel{display:none}
#tab-hoe:checked~.wrap .paneel--hoe,#tab-oplevert:checked~.wrap .paneel--oplevert,#tab-waarom:checked~.wrap .paneel--waarom{display:grid}
#tab-hoe:checked~.wrap .tab--hoe,#tab-oplevert:checked~.wrap .tab--oplevert,#tab-waarom:checked~.wrap .tab--waarom{border-color:var(--site-accent);box-shadow:inset 0 0 0 1px var(--site-accent)}
#tab-hoe:checked~.site-nav .menu--hoe,#tab-oplevert:checked~.site-nav .menu--oplevert,#tab-waarom:checked~.site-nav .menu--waarom{background:var(--kop-actief);font-weight:500}
#tab-hoe:focus-visible~.wrap .tab--hoe,#tab-oplevert:focus-visible~.wrap .tab--oplevert,#tab-waarom:focus-visible~.wrap .tab--waarom{outline:2px solid var(--site-accent);outline-offset:2px}

/* Kaarten, stappen, punten, citaat */
.kolom{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.kaart{border:1px solid var(--site-lijn);border-top:4px solid var(--site-accent);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kaart h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.kaart p{margin:0;font-size:16px;color:var(--site-gedempt)}
.kaart p b{color:var(--site-inkt);font-weight:600}
.kaart--tekst{gap:10px}
.stap{display:grid;grid-template-columns:32px minmax(0,1fr);gap:4px 12px;align-items:center}
.stap__nr{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;background:var(--merk-vlak);color:var(--merk-sterk);border-radius:var(--radius);font-weight:700}
.stap p{grid-column:2}
.punten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-content:start;border-top:1px solid var(--site-lijn)}
.punt{padding:12px 0;border-bottom:1px solid var(--site-lijn)}
.punt b{font-size:16px;font-weight:600}
.punt p{margin:4px 0 0;font-size:16px;color:var(--site-gedempt)}
.citaat{margin:0;padding:18px 20px;background:var(--site-vlak);border-left:4px solid var(--site-accent);border-radius:var(--radius);align-self:start}
.citaat blockquote{margin:0;font-size:18px;line-height:1.5;font-weight:500;letter-spacing:-.01em}
.citaat figcaption{margin-top:12px;font-size:15px;color:var(--site-gedempt)}
.citaat figcaption b{color:var(--site-inkt);font-weight:600}

/* Het voorbeeld is een sectie uit de app, met de app-klassen hierboven */
.voorbeeld{margin:0;border:1px solid var(--site-lijn);border-radius:var(--radius);overflow:hidden;background:var(--oppervlak-2);font-size:14px;min-width:0}
.voorbeeld .kop{padding:8px 14px}
.voorbeeld .merknaam{font-size:16px}
.voorbeeld__in{padding:12px}
.voorbeeld .sectie{background:var(--oppervlak)}
.voorbeeld figcaption{padding:0 12px 10px;font-size:14px;color:var(--site-gedempt)}

/* Contactstrook en voetregel */
.site-contact{background:var(--site-merk);color:var(--site-op-merk);border-top:4px solid var(--site-accent)}
.site-contact__in{max-width:1180px;margin:0 auto;padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.site-contact h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;color:inherit}
.site-contact p{margin:2px 0 0;font-size:16px;color:inherit}
.site-contact .site-knop{background:var(--site-op-merk);color:var(--site-merk)}
.site-contact .site-knop:hover{background:var(--site-vlak);color:var(--site-inkt)}
.site-contact .site-knop--secundair{background:transparent;color:var(--site-op-merk);box-shadow:inset 0 0 0 1px var(--site-op-merk)}
.site-voet{max-width:1180px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;color:var(--site-gedempt)}
.site-voet a{color:var(--site-gedempt)}
.site-voet__edm{font-weight:700;color:var(--site-inkt)!important}

/* Aanraakmaten: telefoon en tablet (t/m 1024px breed). Tekst minimaal 16px, tikdoelen minimaal 44px. */
@media (max-width:1024px){
.voorbeeld,.voorbeeld .tabel,.voorbeeld .titel{font-size:16px}
.voorbeeld .titel-bijzaak,.voorbeeld .label,.voorbeeld .kop-zacht{font-size:14px;line-height:20px}
.voorbeeld .tabel th,.voorbeeld .tabel td{padding:8px 10px}
.site-voet{font-size:16px}
.site-voet a{display:inline-block;padding:10px 0;margin:-10px 0}
.voorbeeld .linkknop{font-size:14px}
}

/* Telefoon: menu op een eigen regel, de kolommen onder elkaar. */
@media (max-width:600px){
.site-nav__menu{flex:1 1 100%;order:3;margin-left:0;justify-content:space-between}
.site-nav__item{flex:1;justify-content:center;padding:6px 4px}
.site-nav .site-knop{margin-left:auto}
.raster-2,.raster-3,.punten{grid-template-columns:1fr}
.site-hero{padding-top:20px}
.site-hero .site-knop{flex:1}
.site-contact .site-rij{width:100%}
.site-contact .site-knop{flex:1}
}

/* Vanaf 1280×800: de pagina past in één scherm, de cockpit scrolt zelf. */
@media (min-width:1280px) and (min-height:800px){
html,body{height:100%}
.site{height:100vh;overflow:hidden}
.site-hero{padding:14px 0 10px;gap:4px}
.site-kop--display{font-size:36px}
.site-hero__sub{font-size:16px;max-width:90ch}
.tab{height:62px;padding:6px 18px}
.tab__kop{font-size:19px}
.tab__sub{font-size:14px}
.cockpit{flex:1;min-height:0;overflow:auto;padding-bottom:12px;gap:12px}
.kaart{padding:10px 14px;gap:4px}
.kaart p,.punt p{font-size:14px}
.kaart h3{font-size:17px}
.kolom{gap:10px}
.voorbeeld .tabel th,.voorbeeld .tabel td{padding:4px 12px}
.voorbeeld figcaption{padding:0 12px 8px;font-size:13px}
.site-contact__in{padding:10px 16px}
.site-contact h2{font-size:18px}
.site-contact p{font-size:15px}
.site-contact .site-knop{min-height:40px;padding:8px 16px}
.site-voet{padding:10px 16px}
}