:root{
  --slate:#0b0b0b;
  --paneel:#151515;
  --lijn:rgba(243,237,226,.14);
  --rood:#e2001a;
  --rood-diep:#a30014;
  --creme:#f3ede2;
  --dim:#a9a297;
  --groen:#00a14b;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --hand:"Caveat",cursive;
  --marge:clamp(1.1rem,4vw,3.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--slate);color:var(--creme);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--rood);outline-offset:3px}
.wrap{width:min(1220px,100%);margin-inline:auto;padding-inline:var(--marge)}

h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.95;margin:0;letter-spacing:-.005em}
.eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rood);margin:0 0 .75rem;
}

/* ---------- navigatie ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,11,11,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lijn);
}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;height:66px}
.nav ul{display:flex;gap:1.5rem;list-style:none;margin:0 0 0 auto;padding:0;font-size:.95rem;font-weight:500}
.nav a{text-decoration:none}
.nav a:hover{color:var(--rood)}
.nav .uren{font-size:.85rem;color:var(--dim);border-left:1px solid var(--lijn);padding-left:1.5rem}
@media(max-width:820px){ .nav ul,.nav .uren{display:none} }

/* woordmerk: de terugval als het logobestand ontbreekt */
.merk{display:flex;align-items:center;font-family:var(--display);font-weight:900;color:var(--rood);letter-spacing:-.01em;line-height:.8}
.nav .merk{font-size:1.9rem}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--lijn)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,11,11,.96) 0%,rgba(11,11,11,.9) 42%,rgba(11,11,11,.55) 100%);
}

.hero .wrap{position:relative;z-index:1;padding-block:clamp(3rem,8vw,6rem)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr} }

.hero h1{font-size:clamp(3rem,9.5vw,6rem);text-transform:uppercase}
.hero h1 .rood{color:var(--rood);display:block}
.hero .lead{font-size:clamp(1.05rem,2.2vw,1.2rem);color:var(--creme);max-width:44ch;margin:1.25rem 0 0}
.hand{font-family:var(--hand);font-size:1.6rem;color:var(--groen);display:block;margin-bottom:.2rem}

.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.knop{
  display:inline-block;text-decoration:none;font-family:var(--display);
  font-weight:800;font-size:1.2rem;letter-spacing:.03em;padding:.62rem 1.3rem;
  background:var(--rood);color:#fff;border:2px solid var(--rood);
  transition:background .15s ease;
}
.knop:hover{background:var(--rood-diep);border-color:var(--rood-diep)}
.knop.leeg{background:transparent;color:var(--creme);border-color:rgba(243,237,226,.35)}
.knop.leeg:hover{background:rgba(243,237,226,.08);border-color:var(--creme)}

.feiten{display:flex;flex-wrap:wrap;gap:0;margin-top:2.4rem;border-top:1px solid var(--lijn)}
.feit{padding:1rem 1.6rem 0 0;margin-right:1.6rem;border-right:1px solid var(--lijn)}
.feit:last-child{border-right:0}
@media(max-width:640px){.feiten{display:grid;grid-template-columns:1fr 1fr;gap:0}.feit{border-right:0;margin-right:0;padding:.9rem 1rem .9rem 0}}
.feit b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.01em}
.feit span{font-size:.82rem;color:var(--dim)}

/* uitgelichte actie */
.topper{background:var(--paneel);border:1px solid var(--lijn);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.topper-foto{position:relative;aspect-ratio:16/10;overflow:hidden}
.topper-foto img{width:100%;height:100%;object-fit:cover}
.badge{
  position:absolute;left:0;top:1rem;background:var(--rood);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.32rem .8rem;
}
.topper-body{padding:1.4rem 1.5rem 1.6rem}
.topper-body h2{font-size:clamp(2rem,5vw,2.6rem)}
.topper-body p{margin:.5rem 0 1.2rem;color:var(--dim);font-size:.95rem}
.prijsrij{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;border-top:1px solid var(--lijn);padding-top:1.1rem}
.vanprijs{font-size:.95rem;color:var(--dim);text-decoration:line-through;text-decoration-color:var(--rood);text-decoration-thickness:2px}
.prijs{font-family:var(--display);font-weight:900;color:var(--rood);line-height:.85;display:block;font-size:3.4rem}
.prijs .euro{font-size:.45em;vertical-align:.7em;margin-right:.03em}
.prijs .cent{font-size:.5em;vertical-align:.78em}
.eenheid{font-size:.85rem;color:var(--dim)}
.tot-wanneer{text-align:right;font-size:.85rem;color:var(--dim);max-width:13ch}

/* ---------- lopende band ---------- */
.band{background:var(--rood);color:#fff;overflow:hidden;padding:.6rem 0;border-block:1px solid var(--rood-diep)}
.band-spoor{display:flex;width:max-content;animation:schuif 32s linear infinite}
.band span{
  font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.06em;
  text-transform:uppercase;padding-inline:1.4rem;white-space:nowrap;
}
.band span::after{content:"◆";margin-left:1.4rem;opacity:.55;font-size:.7em;vertical-align:.25em}
@keyframes schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- waarom ---------- */
.waarom{padding:clamp(2.5rem,6vw,4rem) 0;border-bottom:1px solid var(--lijn)}
.waarom-grid{display:grid;gap:1.5rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.waarom h3{font-size:1.35rem;margin:.6rem 0 .3rem;letter-spacing:.01em}
.waarom p{margin:0;color:var(--dim);font-size:.93rem;max-width:32ch}
.waarom svg{width:30px;height:30px;color:var(--rood)}

/* ---------- acties ---------- */
.acties{padding:clamp(3rem,7vw,5rem) 0}
.sectiekop{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem 2rem;margin-bottom:2rem}
.sectiekop h2{font-size:clamp(2.2rem,6vw,3.4rem);text-transform:uppercase}
.sectiekop .geldig{margin-left:auto;color:var(--dim);font-size:.95rem}
.sectiekop .geldig b{color:var(--creme);font-weight:600}

.kaarten{display:grid;gap:1.25rem;grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media(min-width:620px){.kaarten{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.kaarten{grid-template-columns:repeat(3,1fr)}}
.kaart{background:var(--paneel);border:1px solid var(--lijn);display:flex;flex-direction:column}
.kaart-foto{position:relative;aspect-ratio:3/2;overflow:hidden}
.kaart-foto img{width:100%;height:100%;object-fit:cover}
.kaart-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.kaart h3{font-size:1.75rem}
.kaart p{margin:.35rem 0 1.1rem;font-size:.92rem;color:var(--dim)}
.kaart .prijsrij{margin-top:auto;align-items:center}
.kaart .prijs{font-size:2.6rem}
.kleine-letter{margin-top:1.6rem;font-size:.85rem;color:var(--dim)}

/* ---------- assortiment ---------- */
.assortiment{background:var(--paneel);padding:clamp(3rem,7vw,4.5rem) 0;border-block:1px solid var(--lijn)}
.assortiment p.intro{color:var(--dim);max-width:56ch;margin:.7rem 0 2rem}
.tegels{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.tegel{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--lijn)}
.tegel img{width:100%;height:100%;object-fit:cover}
.tegel figcaption{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .7rem;
  background:linear-gradient(transparent,rgba(11,11,11,.9));
  font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;
}

/* ---------- winkel ---------- */
.winkel{padding:clamp(3rem,7vw,4.5rem) 0}
.winkel-grid{display:grid;gap:2.5rem}
@media(min-width:900px){ .winkel-grid{grid-template-columns:.9fr 1.1fr;align-items:start} }
.winkel h2{font-size:clamp(2rem,5.5vw,3rem);text-transform:uppercase;margin-bottom:1.4rem}
.gegevens{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.gegevens h3{font-size:1.25rem;color:var(--rood);letter-spacing:.02em;margin-bottom:.4rem}
.gegevens p{margin:0 0 .25rem}
.gegevens a{text-underline-offset:3px}
.gegevens a:hover{color:var(--rood)}
.kaartje{border:1px solid var(--lijn);aspect-ratio:4/3;width:100%}
.kaartje iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)}

/* ---------- logo ---------- */
/* Het beeldmerk staat in img/fontijn-logo.png. Ontbreekt dat bestand, dan
   valt de pagina terug op het woordmerk in letters (zie de onerror-regel). */
/* staat het logo er, dan verdwijnt het woordmerk; faalt het laden, dan
   haalt onerror het <img> weg en verschijnt het woordmerk vanzelf weer */
.logo + .woordmerk{display:none}
.logo{display:block;width:auto;height:46px}
.nav .logo{height:46px}
footer .logo{height:92px;margin:0 auto 1.1rem}
@media(max-width:560px){.nav .logo{height:34px}footer .logo{height:64px}}

/* ---------- ontbrekende foto's ---------- */
/* Zolang img/ nog niet gevuld is, toont de browser een stukgelopen plaatje.
   Dit maakt er een leeg vlak van, zodat de pagina onaf oogt in plaats van
   kapot. Zodra een foto er wel staat, gebeurt er niets. */
img.geen-foto{background:var(--paneel)}

/* ---------- instagram ---------- */
.insta{padding:clamp(3rem,7vw,4.5rem) 0;border-top:1px solid var(--lijn)}
.insta[hidden]{display:none}
.nav li[hidden]{display:none}
.insta .sectiekop{margin-bottom:1.6rem}
.insta .handle{margin-left:auto;color:var(--dim);font-size:.95rem;text-decoration:none}
.insta .handle:hover{color:var(--rood)}
.insta-grid{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);list-style:none;margin:0;padding:0}
@media(min-width:700px){.insta-grid{grid-template-columns:repeat(4,1fr)}}
.insta-tegel{position:relative;display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--lijn)}
.insta-tegel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.insta-tegel:hover img,.insta-tegel:focus-visible img{transform:scale(1.07)}
.insta-tegel .tekst{
  position:absolute;inset:auto 0 0 0;padding:2.2rem .8rem .7rem;
  background:linear-gradient(transparent,rgba(11,11,11,.92));
  font-size:.8rem;line-height:1.35;color:var(--creme);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  opacity:0;transition:opacity .25s ease;
}
.insta-tegel:hover .tekst,.insta-tegel:focus-visible .tekst{opacity:1}
.insta-tegel .soort{
  position:absolute;top:.5rem;right:.5rem;width:19px;height:19px;color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
@media(hover:none){.insta-tegel .tekst{opacity:1}}

/* ---------- paaltjes ---------- */
/* Amsterdammertjes langs de voet van de pagina, zoals op fontijn.eu.
   Geen strook met randen: de band kleurt van boven uit het niets op en de
   stoeprand dooft naar de zijkanten uit. De kruisjes zijn echte uitsparingen
   in de tekening, dus de band schijnt er doorheen. */
.paaltjes{
  position:relative;
  height:clamp(58px,8vw,86px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 146 80%22%3E%3Cg transform=%22translate%28-27 0%29%22%3E%3Cpath fill=%22%23f3ede2%22 fill-opacity=%22.1%22 fill-rule=%22evenodd%22 d=%22M100 1.5A5 5 0 0 1 103.2 10.34L103.2 13L108.5 13L108.5 17.5L106.6 17.5L109.3 70.5L113.5 70.5L113.5 80L86.5 80L86.5 70.5L90.7 70.5L93.4 17.5L91.5 17.5L91.5 13L96.8 13L96.8 10.34A5 5 0 0 1 100 1.5ZM100 38.98L97.74 41.24L95.76 39.26L98.02 37L95.76 34.74L97.74 32.76L100 35.02L102.26 32.76L104.24 34.74L101.98 37L104.24 39.26L102.26 41.24ZM100 50.98L97.74 53.24L95.76 51.26L98.02 49L95.76 46.74L97.74 44.76L100 47.02L102.26 44.76L104.24 46.74L101.98 49L104.24 51.26L102.26 53.24ZM100 62.98L97.74 65.24L95.76 63.26L98.02 61L95.76 58.74L97.74 56.76L100 59.02L102.26 56.76L104.24 58.74L101.98 61L104.24 63.26L102.26 65.24Z%22/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(to bottom,
      rgba(243,237,226,0) 0%,
      rgba(243,237,226,.012) 45%,
      rgba(243,237,226,.045) 100%);
  background-repeat:repeat-x,no-repeat;
  background-position:center bottom,center;
  background-size:auto 100%,100% 100%;
}
/* stoeprand: dunne lijn die naar de zijkanten toe oplost */
.paaltjes::after{
  content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(to right,
    transparent, rgba(243,237,226,.2) 18%, rgba(243,237,226,.2) 82%, transparent);
}
/* de stoeprand is de scheidslijn, de footer hoeft er geen tweede naast */
.paaltjes + footer{border-top:0}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--lijn);padding:2.8rem 0 3.2rem;text-align:center}
footer .merk{justify-content:center;font-size:3rem}
footer .tot{font-family:var(--hand);font-size:2.2rem;margin-top:.6rem}
footer .streep{width:110px;height:3px;background:var(--rood);margin:.5rem auto 1.5rem}
footer small{color:var(--dim);font-size:.82rem}
footer .socials{display:flex;gap:1.2rem;justify-content:center;margin-bottom:1.2rem}
footer .socials a{color:var(--creme);text-decoration:none}
footer .socials a:hover{color:var(--rood)}
footer .socials svg{width:26px;height:26px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band-spoor{animation:none}
  *{transition:none!important}
}

/* ---------- laadscherm ---------- */
/* Praktisch boven mooi: het scherm verdwijnt sowieso, ook als javascript het
   laat afweten. De animatie hieronder ruimt zichzelf op na 2,2 seconden, en
   javascript haalt hem eerder weg zodra de pagina klaar is. Zo kan een bezoeker
   nooit achter een laadscherm blijven hangen. */
.laadscherm{
  position:fixed;inset:0;z-index:999;
  background:var(--slate);
  display:flex;align-items:center;justify-content:center;
  animation:laadweg .7s ease 2.2s forwards;
}
@keyframes laadweg{to{opacity:0;visibility:hidden;pointer-events:none}}
.laadscherm.weg{animation:laadweg .7s ease forwards}

.laadscherm .pan{width:min(310px,58vw);height:auto;color:var(--creme)}
.laadscherm .pan .vorm{fill:none;stroke:currentColor;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round}
.laadscherm .pan .vlees{fill:var(--rood)}
.laadscherm .pan .vet{fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;opacity:.5}
/* de rook tekent zichzelf en begint daarna opnieuw */
.laadscherm .pan .rook{
  fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:62;stroke-dashoffset:62;
  animation:rook 3.2s ease-in-out infinite;
}
.laadscherm .pan .rook:nth-of-type(2){animation-delay:.5s}
@keyframes rook{
  0%{stroke-dashoffset:62;opacity:0}
  25%{opacity:.85}
  70%{stroke-dashoffset:0;opacity:.5}
  100%{stroke-dashoffset:-62;opacity:0}
}

.laadscherm .praat{
  position:absolute;left:50%;top:50%;
  transform:translate(2.5rem,5.5rem);
  display:flex;align-items:center;gap:.5rem;
}
.laadscherm .praat svg{width:46px;height:26px;color:var(--dim);flex:none}
.laadscherm .praat span{font-family:var(--hand);font-size:1.5rem;color:var(--groen)}
@media(max-width:560px){
  .laadscherm .praat{transform:translate(-50%,6.5rem);flex-direction:column;gap:.1rem}
  .laadscherm .praat svg{transform:rotate(-20deg)}
}

.laadscherm .hoek{
  position:absolute;bottom:clamp(1.1rem,4vw,2.6rem);
  left:var(--marge);right:var(--marge);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.laadscherm .hoek img{height:34px;width:auto}
.laadscherm .teller{
  font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--creme);line-height:1;font-variant-numeric:tabular-nums;
}

/* ---------- binnenkomen bij het scrollen ---------- */
/* alleen verbergen als javascript draait: anders blijft de inhoud onzichtbaar
   wanneer het script niet laadt */
.beweegt .kom-op{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.beweegt .kom-op.erin{opacity:1;transform:none}
.kom-op.traag-1{transition-delay:.08s}
.kom-op.traag-2{transition-delay:.16s}
.kom-op.traag-3{transition-delay:.24s}

/* Wie beweging liever niet ziet, krijgt alles stil en meteen. */
@media(prefers-reduced-motion:reduce){
  .laadscherm{display:none}
  .laadscherm .pan .rook{animation:none}
  .beweegt .kom-op{opacity:1;transform:none;transition:none}
}

/* ---------- contact ---------- */
.contact{padding:clamp(2.5rem,7vw,4.5rem) 0}
.contact-grid{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:900px){.contact-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.contact h1{font-size:clamp(2.6rem,7vw,4.2rem);text-transform:uppercase;margin-bottom:.6rem}
.contact .lead{color:var(--dim);max-width:46ch;margin:0 0 2rem}

form{display:grid;gap:1rem}
.veld{display:grid;gap:.35rem}
.veld label{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.veld input,.veld select,.veld textarea{
  font-family:var(--body);font-size:1rem;color:var(--creme);
  background:var(--paneel);border:1px solid var(--lijn);
  padding:.75rem .85rem;width:100%;border-radius:0;
  transition:border-color .15s ease,background .15s ease;
}
.veld textarea{min-height:150px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  /* background-color en niet de background-shorthand: die zou het pijltje
     van het keuzeveld wissen zodra je erin klikt */
  outline:none;border-color:var(--rood);background-color:#1a1a1a;
}
.veld input::placeholder,.veld textarea::placeholder{color:#6d6761}
.veld select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.twee-op-een-rij{display:grid;gap:1rem}
@media(min-width:620px){.twee-op-een-rij{grid-template-columns:1fr 1fr}}
form .knop{border:2px solid var(--rood);cursor:pointer;justify-self:start;font-size:1.25rem}
.kleine-regel{font-size:.82rem;color:var(--dim);margin:0}
/* honingpot: alleen bots vullen dit in, mensen zien het niet */
.honingpot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.naast{background:var(--paneel);border:1px solid var(--lijn);padding:clamp(1.4rem,3vw,2rem)}
.naast h2{font-size:1.9rem;margin-bottom:1rem}
.naast .rij{display:flex;gap:.9rem;padding:.85rem 0;border-top:1px solid var(--lijn)}
.naast .rij:first-of-type{border-top:0;padding-top:0}
.naast .rij svg{width:20px;height:20px;color:var(--rood);flex:none;margin-top:.15rem}
.naast .rij b{display:block;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.02em}
.naast .rij span,.naast .rij a{font-size:.95rem;color:var(--dim);display:block}
.naast .rij a:hover{color:var(--rood)}

/* ---------- bedankt ---------- */
.bedankt{min-height:62vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(3rem,10vw,6rem) 0}
.bedankt h1{font-size:clamp(2.6rem,8vw,4.5rem);text-transform:uppercase}
.bedankt .hand{font-size:2.2rem;margin:.4rem 0 1.2rem}
.bedankt p{color:var(--dim);max-width:44ch;margin:0 auto 2rem}

/* ---------- aftellen naar de opening ---------- */
/* De pagina staat standaard in de stand "nog niet open", want dat is nu waar.
   Zonder javascript blijft hij daar dus ook in staan, en dat klopt tot 5
   november. Na die datum zet opening.js de klasse na-opening en keert alles om. */
.alleen-na{display:none}
.na-opening .alleen-na{display:revert}
.na-opening .alleen-voor{display:none}

.aftellen{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 0}
.aftellen div{
  background:var(--paneel);border:1px solid var(--lijn);
  padding:.7rem 0 .55rem;text-align:center;min-width:76px;flex:1 1 76px;max-width:110px;
}
.aftellen b{
  display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(1.9rem,5vw,2.6rem);line-height:1;color:var(--rood);
  font-variant-numeric:tabular-nums;
}
.aftellen span{
  display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:.3rem;
}
.open-datum{color:var(--rood);display:block}
.aftellen[hidden]{display:none}