@font-face {
font-family: "Newsreader Fallback";
src: local("Georgia");
size-adjust: 94%;
ascent-override: 92%;
}
@font-face {
font-family: "Source Sans 3 Fallback";
src: local("Helvetica Neue"), local("Arial");
size-adjust: 96%;
}
:root {
color-scheme: light;
--muur: #F6F4EF;
--papier: #FEFEFD;
--inkt: #483F31;
--inktwas: #6B5E4C;
--lijst: #E3DED3;
--potlood: #CFC8BA;
--oranje: #A64014;
--oranje-hover: #B84818;
--serif: Newsreader, "Newsreader Fallback", Georgia, serif;
--sans: "Source Sans 3", "Source Sans 3 Fallback", system-ui, sans-serif;
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
--s12: 96px; --s16: 128px; --s20: 160px;
--sectie: 96px;
--gutter: 24px;
--card-max: 320px;
--fs-14: 0.8235rem;
--fs-15: 0.8824rem;
--fs-17: 1rem;
--fs-18: 1.0588rem;
--fs-22: 1.2941rem;
--fs-display-1: 2.1176rem;
--fs-serie-h1: 2rem;
--fs-display-2: 1.7647rem;
--fs-ondertitel: 1.1765rem;
--fs-muur: 1.1176rem;
--fs-adres: 1.5294rem;
--fs-rij-titel: 1.5294rem;
--shadow-card: 0 1px 2px rgba(72,63,49,.08), 0 12px 28px -16px rgba(72,63,49,.25);
--shadow-lift: 0 1px 2px rgba(72,63,49,.08), 0 18px 32px -16px rgba(72,63,49,.32);
--shadow-bar: 0 -1px 0 var(--lijst);
--ease: cubic-bezier(.2,.7,.2,1);
--kaart-outline: var(--lijst);
}
@media (min-width: 768px) {
:root {
--gutter: 48px;
--fs-14: 0.7778rem;
--fs-15: 0.8333rem;
--fs-17: 0.9444rem;
--fs-18: 1rem;
--fs-22: 1.2222rem;
--fs-display-1: 3.3333rem;
--fs-serie-h1: 2.8889rem;
--fs-display-2: 2.4444rem;
--fs-ondertitel: 1.3333rem;
--fs-muur: 1.1667rem;
--fs-adres: 1.6667rem;
--fs-rij-titel: 1.7778rem;
}
}
@media (min-width: 1024px) {
:root { --sectie: 160px; }
}
@media (min-width: 1200px) {
:root { --gutter: 96px; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: 106.25%;
-webkit-text-size-adjust: 100%;
background: var(--muur);
}
@media (min-width: 768px) {
html { font-size: 112.5%; }
}
body {
margin: 0;
background: var(--muur);
color: var(--inkt);
font-family: var(--serif);
font-size: 1rem;
line-height: 1.55;
font-optical-sizing: auto;
font-variant-numeric: tabular-nums;
padding-bottom: 80px;
}
@media (min-width: 1024px) {
body { padding-bottom: 0; }
}
img { max-width: 100%; height: auto; }
h1, h2, h3, p, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
a { color: var(--oranje); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: color 150ms var(--ease), text-decoration-thickness 150ms var(--ease); }
a:hover { text-decoration-thickness: 2px; }
.adres-groot a:hover { color: var(--oranje-hover); }
:focus-visible { outline: 2px solid var(--oranje); outline-offset: 3px; }
.visueel-verborgen {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.blok .container > *, .prijzen .container > *, .pagina-kop > *, .serie-kop > *, .entree-tekst > *,
.serie-tekst > *, .over-tekst > *, .site-voet .container > *, .nietgevonden > * { min-width: 0; }
.container {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip {
position: absolute; left: var(--s2); top: -100px;
padding: var(--s1) var(--s2);
background: var(--papier); color: var(--inkt);
font-family: var(--sans); font-size: 1rem;
z-index: 20;
}
.skip:focus { top: var(--s2); }
.display-1 {
font-family: var(--serif); font-weight: 300;
font-size: var(--fs-display-1); line-height: 1.05; letter-spacing: -0.01em;
color: var(--inkt); overflow-wrap: break-word;
}
.display-1.serie-h1 { font-size: var(--fs-serie-h1); }
.display-2 {
font-family: var(--serif); font-weight: 300;
font-size: var(--fs-display-2); line-height: 1.1; color: var(--inkt); overflow-wrap: break-word;
}
.ondertitel {
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: var(--fs-ondertitel); line-height: 1.3; color: var(--inktwas); overflow-wrap: break-word;
}
.muurtekst {
font-family: var(--serif); font-weight: 400;
font-size: var(--fs-muur); line-height: 1.5; max-width: 34ch;
hyphens: auto; overflow-wrap: break-word;
}
.muurtekst p + p { margin-top: var(--s2); }
.tekst, .tekst p {
font-family: var(--serif); font-size: 1rem; line-height: 1.55; max-width: 62ch;
hyphens: auto; overflow-wrap: break-word;
}
.tekst p + p { margin-top: var(--s2); }
.overline, .nav-links a, .kop-bestel {
font-family: var(--sans); font-weight: 500; font-size: var(--fs-15);
letter-spacing: 0.08em; font-variant-caps: all-small-caps;
}
.overline { color: var(--inktwas); display: flex; align-items: center; gap: 10px; }
.meta {
font-family: var(--sans); font-weight: 400; font-size: var(--fs-14); line-height: 1.4; color: var(--inktwas);
}
.prijs { font-family: var(--sans); font-weight: 500; font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.chip {
display: inline-block; width: 10px; height: 10px; flex: none;
background: var(--chip, var(--potlood));
}
.knop {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 var(--s3);
background: var(--oranje); color: var(--papier);
font-family: var(--sans); font-weight: 500; font-size: var(--fs-17); letter-spacing: 0.02em;
text-decoration: none; border: 0; border-radius: 0;
transition: background-color 150ms var(--ease);
width: 100%;
}
.knop:hover { background: var(--oranje-hover); color: var(--papier); }
.knop[aria-disabled="true"] { background: var(--inktwas); }
@media (min-width: 768px) {
.knop { width: auto; }
}
.site-kop { background: var(--muur); }
.kop-rij1 {
display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
min-height: 56px;
}
.woordmerk {
font-family: var(--serif); font-weight: 400; font-size: var(--fs-22); color: var(--inkt);
text-decoration: none; line-height: 1.2; padding: var(--s1) 0;
}
.woordmerk:hover { color: var(--inkt); }
.kop-bestel {
font-family: var(--sans); font-weight: 500; font-size: var(--fs-17);
letter-spacing: 0; font-variant-caps: normal;
padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center;
}
.kop-bestel[aria-current="page"] { text-decoration-thickness: 2px; }
.nav-links {
display: flex; flex-wrap: wrap; gap: 0 24px;
padding: 0; min-height: 44px; align-items: center;
border-bottom: 1px solid var(--potlood);
}
.nav-links a {
color: var(--inkt); padding: 13px 0; line-height: 1.2;
text-decoration: underline; text-decoration-color: transparent;
text-decoration-thickness: 1px; text-underline-offset: 4px;
transition: text-decoration-color 150ms var(--ease);
}
.nav-links a:hover { text-decoration-color: var(--inkt); text-decoration-thickness: 1px; }
.nav-links a[aria-current="page"] { text-decoration-color: var(--inkt); }
.kaart { margin: 0; width: min(300px, 100%); }
.kaart img {
display: block; width: 100%; max-width: var(--card-max); height: auto;
background: var(--papier);
outline: 1px solid var(--kaart-outline);
box-shadow: var(--shadow-card);
transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.label {
display: flex; flex-direction: column; margin-top: 12px; text-align: left; min-width: 0; overflow-wrap: break-word;
}
.label-nr, .label-medium, .label-noot { font-family: var(--sans); font-size: var(--fs-14); line-height: 1.4; color: var(--inktwas); }
.label-titel {
font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-18); line-height: 1.3; color: var(--inkt);
border-bottom: 1px solid transparent; align-self: flex-start;
}
.label a, .label-verkocht { font-family: var(--sans); font-size: var(--fs-15); line-height: 1.4; display: inline-block; align-self: flex-start; }
.label a { padding: 12px 0; }
.label-verkocht { padding: 8px 0; color: var(--inktwas); }
@media (min-width: 768px) {
.kaart { width: var(--card-max); }
}
@media (hover: hover) and (pointer: fine) {
.kaart:hover img, .kaart:focus-within img { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.kaart:hover .label-titel, .kaart:focus-within .label-titel { border-bottom-color: var(--inkt); }
}
@media (prefers-contrast: more) {
:root { --kaart-outline: var(--potlood); }
}
.kaart.is-wachtend { opacity: 0; transform: translateY(6px); }
.kaart.is-wachtend.is-gehangen {
opacity: 1; transform: none;
transition: opacity 600ms var(--ease), transform 600ms var(--ease);
transition-delay: calc(var(--i, 0) * 60ms);
}
.duim { display: block; width: 120px; height: auto; background: var(--papier); outline: 1px solid var(--kaart-outline); box-shadow: var(--shadow-card); flex: none; }
@media (min-width: 768px) { .duim { width: 160px; } }
.entree { padding-block: var(--s6) var(--sectie); }
.entree-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.entree-kaart .kaart { margin-inline: auto; }
.entree-tekst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.entree-tekst .display-1 { max-width: 22ch; }
.entree-tekst .tekst { max-width: 40ch; }
.entree-tekst > a { align-self: start; justify-self: start; display: inline-block; padding: 9px 0; font-family: var(--sans); font-size: var(--fs-17); }
@media (min-width: 1024px) {
.entree { min-height: 70vh; display: flex; align-items: center; }
.entree > .container { width: 100%; }
.entree-grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s8); row-gap: var(--s3);
grid-template-areas: "kaart overline" "kaart tekst";
align-content: center;
}
.entree-overline { grid-area: overline; align-self: end; }
.entree-kaart { grid-area: kaart; align-self: center; }
.entree-kaart .kaart { margin-inline: 0; }
.entree-tekst { grid-area: tekst; align-self: start; }
}
.serie-home { padding-block: 0 var(--sectie); }
.serie-home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.serie-tekst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-content: start; }
.serie-tekst .muurtekst { margin-top: var(--s1); }
.serie-links { display: flex; flex-wrap: wrap; gap: 0 var(--s3); font-family: var(--sans); font-size: var(--fs-17); margin-top: var(--s1); }
.serie-links a { display: inline-block; padding: 9px 0; }
.hang-rail {
display: flex; gap: var(--s2);
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
margin-inline: calc(-1 * var(--gutter)); padding: var(--s2) var(--gutter);
-webkit-overflow-scrolling: touch;
}
.hang-rail .kaart { flex: 0 0 256px; width: 256px; scroll-snap-align: start; }
.hang-rail::after { content: ""; flex: 0 0 1px; }
@media (min-width: 768px) {
.hang-rail {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);
overflow: visible; margin-inline: 0; padding: var(--s2) 0; scroll-snap-type: none;
}
.hang-rail .kaart { width: auto; max-width: var(--card-max); }
}
@media (min-width: 1024px) {
.serie-home-grid { grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); column-gap: var(--s6); align-items: start; }
.serie-home.is-even .serie-home-grid { grid-template-columns: minmax(0, 8fr) minmax(260px, 4fr); }
.serie-home.is-even .serie-tekst { order: 2; }
.hang-rail { gap: var(--s3); }
}
.prijzen { padding-block: 0 var(--sectie); }
.prijzen .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.prijslijst {
width: 100%; border-collapse: collapse; background: var(--papier);
border-top: 1px solid var(--potlood);
caption-side: top;
}
.prijslijst caption { text-align: left; padding-bottom: var(--s3); background: var(--muur); }
.prijslijst th, .prijslijst td { padding: var(--s2); border-bottom: 1px solid var(--lijst); text-align: left; vertical-align: top; font-weight: 400; }
.prijslijst th { font-family: var(--serif); font-size: var(--fs-18); line-height: 1.3; }
.prijslijst th .meta { display: block; margin-top: 2px; }
.prijslijst td.prijs { text-align: right; white-space: nowrap; }
.prijslijst td.actie { font-family: var(--sans); font-size: var(--fs-15); text-align: right; white-space: nowrap; }
.prijslijst td.actie a { display: inline-block; padding: 11px 0; }
@media (max-width: 479px) {
.prijslijst, .prijslijst tbody, .prijslijst tr, .prijslijst th, .prijslijst td { display: block; }
.prijslijst caption { display: block; }
.prijslijst tr { border-bottom: 1px solid var(--lijst); padding: var(--s2); position: relative; }
.prijslijst th, .prijslijst td { padding: 0; border: 0; }
.prijslijst th { padding-right: 90px; }
.prijslijst td.prijs { position: absolute; right: var(--s2); top: var(--s2); }
.prijslijst td.actie { text-align: left; white-space: normal; }
}
.prijzen-noten { max-width: 62ch; }
.prijzen-tekst { max-width: 62ch; }
.prijzen-link { font-family: var(--sans); font-size: var(--fs-17); justify-self: start; display: inline-block; padding: 9px 0; }
.serie-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-block: var(--s6) var(--sectie); }
.serie-kop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-content: start; }
.serie-kop .muurtekst { margin-top: var(--s1); }
.prijsblok {
background: var(--papier); outline: 1px solid var(--lijst); padding: var(--s3);
margin-top: var(--s2); display: grid; gap: 4px;
}
.prijsblok-l1 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.serie-kop .knop { margin-top: var(--s1); }
@media (min-width: 768px) and (max-width: 1023px) { .serie-kop .knop { justify-self: start; } }
.link-stil { font-family: var(--sans); font-size: var(--fs-15); justify-self: start; display: inline-block; padding: 11px 0; }
.hang-serie { display: grid; gap: 56px; justify-items: center; }
.hang-serie .kaart { scroll-margin-top: 24px; }
@media (min-width: 768px) {
.hang-serie { grid-template-columns: repeat(2, minmax(0, var(--card-max))); gap: var(--s8) var(--s6); justify-content: start; justify-items: start; }
.hang-serie .kaart { width: 100%; }
}
@media (min-width: 1024px) {
.serie-pagina { grid-template-columns: 260px minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.serie-kop { position: sticky; top: 48px; }
.hang-serie { gap: var(--s8) var(--s4); }
}
@media (min-width: 1200px) {
.serie-pagina { grid-template-columns: 300px minmax(0, 1fr); column-gap: var(--s6); }
.hang-serie { gap: var(--s8) var(--s6); }
}
.serie-nav { border-top: 1px solid var(--lijst); padding-block: var(--s6) var(--sectie); }
.serie-nav-grid { display: flex; flex-direction: column-reverse; gap: var(--s4); }
.serie-nav a {
display: flex; align-items: center; gap: var(--s2);
font-family: var(--sans); font-size: var(--fs-17); padding: 4px 0;
}
.serie-nav a span { flex: 1 1 auto; }
.serie-nav .volgende { text-align: right; flex-direction: row-reverse; }
@media (min-width: 768px) {
.serie-nav-grid { flex-direction: row; justify-content: space-between; }
.serie-nav a { max-width: 45%; }
}
.pagina-kop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s6) var(--s8); }
.pagina-kop .lede { font-family: var(--serif); font-size: var(--fs-muur); line-height: 1.5; max-width: 34ch; color: var(--inkt); }
.blok { padding-block: 0 var(--sectie); }
.blok .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.blok .tekst, .blok .muurtekst { margin: 0; }
.blok .lees { font-family: var(--sans); font-size: var(--fs-17); justify-self: start; display: inline-block; padding: 9px 0; }
.product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); justify-items: center; }
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; } }
.product-caption { grid-column: 1 / -1; justify-self: start; }
.waaier { position: relative; width: 300px; max-width: 100%; height: 240px; margin-inline: auto; }
.waaier img {
position: absolute; left: 38px; top: 35px; width: 224px; height: auto;
background: var(--papier); outline: 1px solid var(--lijst); box-shadow: var(--shadow-card);
transform: rotate(var(--r)) translate(var(--dx), var(--dy));
}
.waaier img:nth-child(1) { --r: -3deg;   --dx: -9px; --dy: -9px; }
.waaier img:nth-child(2) { --r: -2deg;   --dx: -6px; --dy: -6px; }
.waaier img:nth-child(3) { --r: -1deg;   --dx: -3px; --dy: -3px; }
.waaier img:nth-child(4) { --r: 0deg;    --dx: 0;    --dy: 0; }
.waaier img:nth-child(5) { --r: 1deg;    --dx: 3px;  --dy: 3px; }
.waaier img:nth-child(6) { --r: 2deg;    --dx: 6px;  --dy: 6px; }
.waaier img:nth-child(7) { --r: 2.5deg;  --dx: 9px;  --dy: 9px; }
.waaier img:nth-child(8) { --r: 3deg;    --dx: 12px; --dy: 12px; }
@media (min-width: 768px) {
.waaier { width: 360px; height: 300px; }
.waaier img { width: 256px; left: 52px; top: 45px; }
}
.achterkant {
position: relative; width: 300px; max-width: 100%; min-height: 212px; height: auto;
background: var(--papier); outline: 1px solid var(--lijst);
padding: var(--s2); display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: var(--s2);
}
.achterkant::before { content: ""; position: absolute; left: 55%; top: var(--s2); bottom: var(--s2); width: 1px; background: var(--potlood); }
.achterkant-links { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding-right: var(--s2); min-width: 0; overflow-wrap: break-word; }
.achterkant-titel { font-family: var(--serif); font-style: italic; font-size: var(--fs-18); line-height: 1.3; }
.achterkant-rechts { display: grid; grid-template-rows: auto 1fr; padding-left: var(--s2); }
.postzegel { justify-self: end; width: 44px; height: 52px; border: 1px dashed var(--potlood); display: flex; align-items: center; justify-content: center; }
.postzegel img { width: 44px; height: auto; display: block; }
.adreslijnen { align-self: end; display: grid; gap: 14px; padding-bottom: 6px; }
.adreslijnen span { display: block; height: 1px; background: var(--potlood); }
@media (min-width: 768px) { .achterkant { width: 320px; min-height: 226px; } }
.composer .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.composer-rijen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.composer-rij {
display: flex; align-items: center; gap: var(--s2); min-height: 64px; min-width: 0;
padding: var(--s1) var(--s2); border-left: 2px solid transparent; cursor: pointer;
transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.composer-rij:hover { background: var(--papier); }
.composer-rij:has(input:checked), .composer-rij.is-gekozen { border-left-color: var(--oranje); background: var(--papier); }
.composer-rij input {
appearance: none; -webkit-appearance: none;
width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer;
border: 1px solid var(--potlood); border-radius: 0;
background-color: var(--papier); background-repeat: no-repeat; background-position: center; background-size: 100% 100%;
transition: background-color 150ms var(--ease), border-color 150ms var(--ease);
}
.composer-rij input:checked {
background-color: var(--oranje); border-color: var(--oranje);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5l4 4 8-9' fill='none' stroke='%23FEFEFD' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}
.composer-tekst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; overflow-wrap: break-word; }
.composer-titel { font-family: var(--serif); font-style: italic; font-size: var(--fs-18); line-height: 1.3; }
.samenvatting { font-family: var(--sans); font-size: var(--fs-17); font-variant-numeric: tabular-nums; min-height: 1.5em; margin-bottom: var(--s2); }
.samenvatting.is-puls { animation: puls 150ms var(--ease); }
@keyframes puls { 0% { color: var(--oranje); } 100% { color: var(--inkt); } }
.composer .knop { justify-self: start; }
.composer .meta { max-width: 62ch; }
.over-kop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-block: var(--s6) var(--sectie); }
.over-kop .kaart { margin-inline: auto; }
.over-tekst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-content: start; }
@media (min-width: 1024px) {
.over-kop { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s8); align-items: center; }
.over-kop .kaart { margin-inline: 0; }
}
.serie-lijst { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.serie-rij { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.serie-rij-tekst { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.serie-rij-tekst .display-2 { font-size: var(--fs-rij-titel); }
.serie-rij-tekst a { font-family: var(--sans); font-size: var(--fs-17); display: inline-block; padding: 9px 0; justify-self: start; }
.adres-groot { font-family: var(--serif); font-weight: 400; font-size: var(--fs-adres); line-height: 1.3; word-break: break-word; }
.contact .knop { justify-self: start; }
.contact .tekst a { display: inline-block; padding: 9px 0; max-width: 100%; word-break: break-word; }
.nietgevonden { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s8) var(--sectie); }
.nietgevonden ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s3); font-family: var(--sans); font-size: var(--fs-17); }
.nietgevonden li a { padding: 9px 0; display: inline-block; }
.bestelbalk {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
min-height: calc(56px + env(safe-area-inset-bottom));
padding: 6px var(--gutter) calc(6px + env(safe-area-inset-bottom));
background: var(--papier); box-shadow: var(--shadow-bar);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s2);
animation: balk-in 240ms var(--ease);
}
.bestelbalk[hidden] { display: none; }
.bestelbalk-tekst { font-family: var(--sans); font-size: var(--fs-15); color: var(--inktwas); line-height: 1.3; flex: 1 1 80px; min-width: 0; }
.bestelbalk .knop { width: auto; min-height: 44px; padding: 0 var(--s2); flex: 0 1 auto; min-width: 0; max-width: 100%; }
@keyframes balk-in { from { transform: translateY(100%); } to { transform: none; } }
@media (min-width: 1024px) {
.bestelbalk { display: none; }
}
.site-voet {
border-top: 1px solid var(--potlood);
padding-block: var(--s6) var(--s8);
font-family: var(--sans); font-size: var(--fs-15); color: var(--inktwas);
}
.site-voet .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
.site-voet a { padding: 11px 0; display: inline-block; }
.voet-nav { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin-top: var(--s2); }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
.kaart img, .kaart.is-wachtend.is-gehangen, .bestelbalk, .samenvatting.is-puls, a, .knop, .composer-rij, .composer-rij input, .nav-links a {
transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0ms !important;
}
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}