/* Adventurely — de etalagepagina.
   Huisstijl uit /stijl.css; hier staat alleen wat deze pagina extra heeft.

   LET OP met namen: /stijl.css wordt hiervóór geladen en bezet er al een
   paar. `.groot` is daar het schermvullende zwarte venster van de
   fotoviewer — die naam voor een alinea gebruiken legt een zwart doek
   over de pagina. Ook bezet: .cijfer(s), .raster, .kop, .knop, .held,
   .bord, .melding, .laden, .voet, .leeg. */

:root {
  /* Eén set curves voor de hele pagina. De ingebouwde CSS-easings zijn
     te slap; deze geven beweging richting en bedoeling. ease-in staat
     er niet bij en komt er ook niet in: die begint traag, precies op
     het moment dat je kijkt, en laat de pagina sloom aanvoelen. */
  --uit: cubic-bezier(0.23, 1, 0.32, 1);
  --heen-en-weer: cubic-bezier(0.77, 0, 0.175, 1);

  /* Hoekmaten als trap in plaats van overal 24px: grote vlakken mogen
     ronder dan kleine, anders oogt alles even zacht en even kinderlijk. */
  --hoek-s: 10px;
  --hoek-m: 14px;
  --hoek-l: 20px;
  --hoek-xl: 28px;

  --rand: 1px solid rgba(46, 42, 38, .09);
  --diepte: 0 1px 2px rgba(46, 42, 38, .04), 0 8px 24px -12px rgba(46, 42, 38, .14);
}

main { max-width: 1120px; }

/* ── Typografie ───────────────────────────────────────────────
   Grote letters horen dichter op elkaar te staan dan kleine: op
   kopformaat valt standaardspatiëring uit elkaar en leest het als een
   kinderboek. Daarom negatieve spatiëring en een strakke regelhoogte. */
h1 { letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.02em; line-height: 1.1;
     margin: 72px 0 12px; }
h3 { letter-spacing: -.01em; }
.onder { color: var(--inkt-zacht); margin: 0 0 20px; max-width: 62ch; font-size: 17px; }
.klein { color: var(--inkt-zacht); font-size: 14px; }

/* ── Knoppen ──────────────────────────────────────────────────
   Indrukken moet voelbaar zijn: een knop die niet reageert op je vinger
   laat de hele pagina dood aanvoelen. 160 ms is net genoeg om te zien
   en te kort om in de weg te zitten. */
.knop { transition: transform 160ms var(--uit), background-color 160ms ease,
                    border-color 160ms ease; }
.knop:active { transform: scale(.97); }
.knop.klein { padding: 9px 15px; border-radius: var(--hoek-m); font-size: 14px; }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; align-items: center; }

/* Zichtbare focus voor wie met het toetsenbord werkt. Zonder dit is de
   pagina voor hen onbruikbaar, en het kost een enkele regel. */
a:focus-visible, button:focus-visible, .tijdstrook:focus-visible {
  outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: var(--hoek-s);
}

/* ── In beeld schuiven ────────────────────────────────────────
   Alleen transform en opacity: die twee kan de browser op de
   videokaart afhandelen, de rest kost een herberekening van de hele
   pagina. Wie beweging heeft uitgezet krijgt het einde van de animatie
   meteen te zien — geen beweging, wel alle inhoud. */
.komt-op { opacity: 0; transform: translateY(14px);
           transition: opacity 420ms var(--uit), transform 420ms var(--uit); }
.komt-op.erin { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .komt-op { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── De etalage ───────────────────────────────────────────────
   Geen witte kaart meer: de kop staat rechtstreeks op de achtergrond.
   Dat geeft lucht en haalt de "alles is een doosje"-indruk weg. */
.held { background: none; padding: clamp(28px, 5vw, 56px) 0 0; overflow: visible;
        display: grid; gap: clamp(24px, 5vw, 56px); align-items: center;
        grid-template-columns: 1fr; }
.held::after { display: none; }
@media (min-width: 900px) { .held { grid-template-columns: 1.05fr .95fr; } }
.kopje { font: 600 12px var(--tekst); color: var(--terracotta);
         text-transform: uppercase; letter-spacing: .14em; margin: 0 0 14px; }
.held h1 { margin-bottom: 18px; }
.held .inleiding { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55;
                   color: var(--inkt-zacht); max-width: 46ch; }

/* ── De app in het klein ──────────────────────────────────────
   Zwaardere schaduw dan de rest van de pagina: dit is het ene beeld dat
   naar voren mag komen. */
.telefoon { justify-self: center; width: min(320px, 86vw); background: #1C1A18;
            border-radius: 44px; padding: 11px; position: relative;
            box-shadow: 0 2px 6px rgba(28,26,24,.2), 0 40px 80px -28px rgba(28,26,24,.5); }
.telefoon::before { content: ''; position: absolute; top: 22px; left: 50%;
                    transform: translateX(-50%); width: 86px; height: 22px;
                    background: #1C1A18; border-radius: 999px; z-index: 2; }
.scherm { background: var(--zand); border-radius: 34px; overflow: hidden;
          display: flex; flex-direction: column; height: 580px; }
.appkop { background: var(--wit); padding: 34px 16px 10px;
          border-bottom: 1px solid rgba(46,42,38,.07); }
.appmerk { font: 600 17px var(--kop); color: var(--terracotta); display: block;
           letter-spacing: -.01em; }
.appdag { font-size: 12px; color: var(--inkt-zacht); }
.appinhoud { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px;
             scrollbar-width: thin; scrollbar-color: var(--steen) transparent;
             transition: opacity 180ms var(--uit), filter 180ms var(--uit); }
.appinhoud::-webkit-scrollbar { width: 5px; }
.appinhoud::-webkit-scrollbar-thumb { background: var(--steen); border-radius: 999px; }
/* Het wisselen van scherm: kort en met vervaging, zodat je één beweging
   ziet en niet twee schermen die over elkaar heen liggen. */
.appinhoud.wisselt { opacity: 0; filter: blur(3px); }

.apptabs { display: flex; background: var(--wit); border-top: 1px solid rgba(46,42,38,.07);
           padding-bottom: 6px; }
.apptabs button { flex: 1; border: 0; background: none; padding: 9px 2px 10px;
                  font: 500 10px var(--tekst); color: var(--inkt-zacht);
                  transition: color 160ms ease; }
.apptabs button span { display: block; font-size: 17px; margin-bottom: 3px;
                       filter: grayscale(1); opacity: .5;
                       transition: filter 200ms var(--uit), opacity 200ms var(--uit),
                                   transform 200ms var(--uit); }
.apptabs button[aria-current="true"] { color: var(--terracotta); font-weight: 700; }
.apptabs button[aria-current="true"] span { filter: none; opacity: 1; transform: translateY(-1px); }
.apptabs button:active span { transform: scale(.92); }

.kaartje { background: var(--wit); border-radius: var(--hoek-l); padding: 14px;
           border: var(--rand); }
.kaartje + .kaartje { margin-top: 10px; }
.etiket { display: inline-block; font: 600 10px var(--tekst); letter-spacing: .08em;
          text-transform: uppercase; border-radius: 999px; padding: 4px 10px;
          background: var(--zand); color: var(--inkt-zacht); }
.etiket.vandaag { background: #FBEBE4; color: #B2552F; }
.etiket.punten { background: #FAF1DC; color: #8A6B15; }
.kaartje h4 { font: 700 16px var(--kop); margin: 10px 0 5px; letter-spacing: -.01em; }
.kaartje p { margin: 0; font-size: 14px; color: var(--inkt-zacht); line-height: 1.5; }
.appfoto { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--hoek-m);
           margin-top: 10px; background: var(--steen); }
.reacties { display: flex; gap: 6px; margin-top: 10px; }
.reacties span { background: var(--zand); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.spelerrij { display: flex; align-items: center; gap: 9px; }
.bolletje { width: 30px; height: 30px; border-radius: 50%; display: grid;
            place-items: center; font-size: 15px; color: var(--wit); flex: none; }
.naam { font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.tijd { font-size: 12px; color: var(--inkt-zacht); }
.schermuitleg { font-size: 13px; color: var(--inkt-zacht); margin: 0 0 10px; }
.spelvakken { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.spelvak { background: var(--wit); border: var(--rand); border-radius: var(--hoek-l);
           padding: 12px 10px; text-align: center; }
.spelvak span { font-size: 22px; display: block; }
.spelvak b { display: block; font: 700 14px var(--kop); margin-top: 4px; }
.spelvak i { font-style: normal; font-size: 10px; color: var(--inkt-zacht); }
.jachtraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; }
.jachtraster span { aspect-ratio: 1; border-radius: 5px; }
.puntenbol { background: var(--zand); border-radius: 999px; padding: 4px 11px;
             font: 700 13px var(--kop); color: var(--terracotta); }
.vlagje { font-size: 16px; margin-left: auto; }
.reiscode { display: flex; align-items: center; justify-content: space-between;
            background: var(--zand); border-radius: var(--hoek-m); padding: 9px 12px;
            margin-top: 10px; }
.reiscode span { font-size: 12px; color: var(--inkt-zacht); }
.reiscode b { font: 700 16px var(--kop); color: var(--terracotta); letter-spacing: .08em; }
.planregel { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--zand);
             font-size: 13px; }
.planregel b { color: var(--terracotta); flex: none; width: 64px; }
.planregel span { color: var(--inkt-zacht); }

/* ── Zo gaat een dag ──────────────────────────────────────────
   Geen kaarten maar kolommen met een lijn erboven: rustiger, en het
   leest als een redactionele pagina in plaats van als een spel. */
.drie { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.stap { border-top: 2px solid var(--inkt); padding-top: 16px; }
.stap .uur { font: 600 11px var(--tekst); color: var(--terracotta);
             text-transform: uppercase; letter-spacing: .14em; }
.stap h3 { font-size: 19px; margin: 8px 0 7px; }
.stap p { margin: 0; color: var(--inkt-zacht); font-size: 15px; line-height: 1.55; }

/* ── De tijdlijn: zijwaarts door een hele reis ─────────────── */
.tijdstrook { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 20px;
              scroll-snap-type: x mandatory; scrollbar-color: var(--steen) transparent; }
.tijdstrook::-webkit-scrollbar { height: 8px; }
.tijdstrook::-webkit-scrollbar-thumb { background: var(--steen); border-radius: 999px; }
.tijdkaart { flex: 0 0 290px; scroll-snap-align: start; background: var(--wit);
             border: var(--rand); border-radius: var(--hoek-xl); padding: 16px;
             box-shadow: var(--diepte);
             transition: transform 260ms var(--uit), box-shadow 260ms var(--uit); }
/* Hover alleen waar een muis is: op een telefoon blijft een hover-stand
   na het tikken hangen, en dan klopt er niets meer. */
@media (hover: hover) and (pointer: fine) {
  .tijdkaart:hover { transform: translateY(-3px);
                     box-shadow: 0 2px 4px rgba(46,42,38,.05),
                                 0 18px 40px -16px rgba(46,42,38,.26); }
}
.tijdkaart img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
                 border-radius: var(--hoek-m); margin-top: 10px; background: var(--steen); }
.dagmerk { display: inline-block; font: 700 10px var(--tekst); letter-spacing: .12em;
           text-transform: uppercase; color: #B2552F; background: #FBEBE4;
           border-radius: 999px; padding: 4px 11px; margin-bottom: 12px; }
.opdrachtregel { font: 600 13px var(--tekst); color: var(--inkt-zacht); margin-top: 9px; }
.bijschrift { margin: 10px 0 0; font-size: 14px; color: var(--inkt); line-height: 1.5; }
.opmerking { margin-top: 10px; background: var(--zand); border-radius: var(--hoek-m);
             padding: 9px 11px; font-size: 13px; color: var(--inkt-zacht); }

/* ── De kaart ─────────────────────────────────────────────── */
.kaartdoos { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .kaartdoos { grid-template-columns: 1.6fr 1fr; align-items: stretch; } }
/* De tekening bepaalt de hoogte, niet andersom: zo staan de spelden
   altijd precies op hun land. De verhouding komt uit de viewBox van
   europa.svg (1000 × 1010) — verandert het venster in site-kaart.py, dan
   verandert dit mee. */
#kaart { position: relative; aspect-ratio: 1000 / 1010; overflow: hidden;
         border-radius: var(--hoek-xl); background: var(--wit); border: var(--rand); }
.europa { display: block; width: 100%; height: 100%; object-fit: contain;
          user-select: none; -webkit-user-drag: none; }
.kaartkaartje { background: var(--wit); border: var(--rand); border-radius: var(--hoek-xl);
                padding: 22px; align-self: start; box-shadow: var(--diepte); }
@media (min-width: 820px) {
  .kaartkaartje { align-self: stretch; overflow: visible; }
}
.kaartkaartje img { border-radius: var(--hoek-m); aspect-ratio: 1; object-fit: cover; width: 100%; }
.kaartkaartje h3 { font-size: 22px; margin: 14px 0 2px; }
.kaartkaartje .land { color: var(--inkt-zacht); font-size: 14px; }
.kaartkaartje h4 { font: 600 11px var(--tekst); color: var(--terracotta); letter-spacing: .12em;
                   text-transform: uppercase; margin: 18px 0 5px; }
.kaartkaartje p { margin: 0; font-size: 15px; line-height: 1.55; }
.speld { position: absolute; transform: translate(-50%, -50%); border: 0; cursor: pointer;
         background: var(--inkt); color: #fff; border-radius: 999px;
         font: 600 11px var(--tekst); padding: 5px 11px; white-space: nowrap;
         box-shadow: 0 4px 12px rgba(28,26,24,.35);
         transition: background-color 200ms var(--uit), transform 200ms var(--uit); }
.speld:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
@media (hover: hover) {
  .speld:hover { transform: translate(-50%, calc(-50% - 2px)); }
}
.speld:active { transform: translate(-50%, -50%) scale(.97); }
.speld.actief { background: var(--terracotta); }
@media (prefers-reduced-motion: reduce) { .speld { transition: none; } }

/* ── Wat erin zit ─────────────────────────────────────────────
   Getekende lijniconen in plaats van emoji: acht gekleurde emoji onder
   elkaar leest als een kinderwebsite, en op elk toestel anders. */
.dingenraster { display: grid; gap: 1px; background: rgba(46,42,38,.1);
                border: var(--rand); border-radius: var(--hoek-xl); overflow: hidden;
                grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ding { background: var(--zand); padding: 24px 22px 26px; }
.ding svg { width: 22px; height: 22px; stroke: var(--terracotta); fill: none;
            stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ding h3 { font-size: 16px; margin: 14px 0 5px; }
.ding p { margin: 0; color: var(--inkt-zacht); font-size: 14px; line-height: 1.55; }

/* ── De poster ────────────────────────────────────────────── */
.posterdoos { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr;
              background: var(--wit); border: var(--rand); border-radius: var(--hoek-xl);
              padding: clamp(22px, 4vw, 40px); box-shadow: var(--diepte); }
@media (min-width: 820px) { .posterdoos { grid-template-columns: .8fr 1.2fr; } }
.posterdoos img { width: 100%; border-radius: var(--hoek-s);
                  box-shadow: 0 2px 6px rgba(46,42,38,.08),
                              0 30px 60px -24px rgba(46,42,38,.4); }
.posteruitleg p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; }
.posterlijst { list-style: none; padding: 0; margin: 0; }
.posterlijst li { padding: 10px 0 10px 28px; position: relative;
                  border-top: 1px solid rgba(46,42,38,.08); font-size: 15px; }
.posterlijst li::before { content: ''; position: absolute; left: 4px; top: 18px;
                          width: 7px; height: 7px; border-radius: 50%;
                          background: var(--terracotta); }

/* ── Slot ─────────────────────────────────────────────────── */
.slot { background: var(--inkt); color: var(--zand); border-radius: var(--hoek-xl);
        padding: clamp(32px, 6vw, 64px); margin-top: 72px; text-align: center; }
.slot h2 { margin: 0 0 12px; color: var(--zand); }
.slot p { color: rgba(247,241,232,.72); max-width: 48ch; margin: 0 auto; font-size: 17px; }
.slot .knoppen { justify-content: center; }
.slot .knop.stil { color: var(--zand); border-color: rgba(247,241,232,.4); }
.voet { margin-top: 40px; }

/* ── De vlaggenrij ────────────────────────────────────────── */
.vlaggenrij { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.vlagbol { width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
           display: block; background: var(--wit);
           box-shadow: 0 0 0 1.5px rgba(46,42,38,.1), 0 2px 6px rgba(46,42,38,.08); }
.vlagbol svg { width: 100%; height: 100%; display: block; }
@media (max-width: 560px) { .vlagbol { width: 36px; height: 36px; } }

/* ── De winkelknoppen ─────────────────────────────────────── */
.winkels { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.winkelknop { display: inline-block; line-height: 0; border-radius: var(--hoek-s);
              transition: transform 160ms var(--uit); }
.winkelknop:active { transform: scale(.97); }
.winkelknop img { height: 48px; width: auto; display: block; }

/* Delen hoort bij de winkelknoppen, dus even hoog en even rond. Stond
   het eerder hoger en ronder, dan leest de rij als drie losse dingen. */
.knoppen #deelknop { height: 48px; padding: 0 22px; border-radius: var(--hoek-s);
                     border-width: 1.5px; }
.winkelpaar { display: inline-flex; align-items: center; gap: 8px; }
.straks { font: 600 10px var(--tekst); letter-spacing: .1em; text-transform: uppercase;
          color: var(--inkt-zacht); background: var(--zand); border: var(--rand);
          border-radius: 999px; padding: 4px 9px; }
.slot .straks { background: rgba(247,241,232,.12); border-color: rgba(247,241,232,.2);
                color: rgba(247,241,232,.8); }

/* ── Het merk boven de kop ────────────────────────────────── */
.merkteken { width: 88px; height: 88px; border-radius: 22px; display: block;
             margin-bottom: 20px; box-shadow: 0 2px 6px rgba(46,42,38,.1),
                                              0 18px 36px -18px rgba(46,42,38,.4); }

/* ── Privacy ──────────────────────────────────────────────────
   Donker blok, zoals de banners op polarsteps.com: één duidelijke
   belofte, en daarnaast wat die belofte concreet inhoudt. */
.privacybalk { background: #10212B; color: var(--zand); border-radius: var(--hoek-xl);
               padding: clamp(28px, 5vw, 52px); margin-top: 72px;
               display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .privacybalk { grid-template-columns: .9fr 1.1fr; } }
.privacybalk h2 { margin: 0 0 12px; color: var(--zand); }
.privacytekst p { color: rgba(247,241,232,.72); font-size: 17px; line-height: 1.6;
                  margin: 0 0 22px; max-width: 42ch; }
.privacybalk .knop.stil { color: var(--zand); border-color: rgba(247,241,232,.4); }
.privacylijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px;
                grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.privacylijst li { padding: 16px 18px; background: rgba(247,241,232,.05);
                   border-radius: var(--hoek-m); }
.privacylijst b { display: block; font: 700 14px var(--kop); margin-bottom: 5px;
                  letter-spacing: -.01em; }
.privacylijst span { font-size: 13px; color: rgba(247,241,232,.66); line-height: 1.5; }

/* ── Na de reis ───────────────────────────────────────────── */
.nareis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          margin-bottom: 18px; }
.nakaart { background: var(--wit); border: var(--rand); border-radius: var(--hoek-xl);
           padding: 24px 22px 26px; }
.nateken { font-size: 24px; display: block; }
.nakaart h3 { font-size: 17px; margin: 12px 0 6px; }
.nakaart p { margin: 0; color: var(--inkt-zacht); font-size: 14px; line-height: 1.6; }

/* ── De keuze uit drie posters ────────────────────────────── */
.posterkeuze { display: grid; gap: 8px; margin: 0 0 20px; }
.postersoort { text-align: left; background: var(--zand); border: 1.5px solid transparent;
               border-radius: var(--hoek-m); padding: 12px 14px; cursor: pointer;
               transition: border-color 160ms var(--uit), background-color 160ms var(--uit),
                           transform 160ms var(--uit); }
.postersoort:active { transform: scale(.985); }
.postersoort b { display: block; font: 700 15px var(--kop); color: var(--inkt);
                 letter-spacing: -.01em; }
.postersoort span { display: block; font-size: 13px; color: var(--inkt-zacht);
                    line-height: 1.5; margin-top: 3px; }
.postersoort[aria-pressed="true"] { border-color: var(--terracotta); background: #FBEBE4; }
.postersoort[aria-pressed="true"] b { color: #B2552F; }

/* ── Het merk bovenin, groter ─────────────────────────────── */
.kop .merk img { width: 54px; height: 54px; border-radius: 13px; }
.kop .merk span { font-size: 34px; letter-spacing: -.5px; }
/* De knoppen in de kop staan naast de vlaggetjes (30 x 24 inclusief
   rand). Even hoog en met dezelfde ronding leest het als één rij in
   plaats van twee soorten dingen die toevallig naast elkaar staan. */
.kop #kopnav { align-items: center; }
.kop #kopnav .knop { padding: 5px 13px; font-size: 13px; border-radius: 9px;
                     line-height: 1.45; border-width: 1.5px; }

/* Op slot tot er iemand is ingelogd: meekijken en het plan maken
   vragen allebei een account. */
.achterslot { opacity: .4; pointer-events: none; }

@media (max-width: 560px) {
  .kop .merk img { width: 42px; height: 42px; }
  .kop .merk span { font-size: 27px; }
  /* Drie knopjes naast een groot logo passen niet op 375 pixels: ze
     schoven over het merk heen en liepen de pagina uit. Op een smal
     scherm gaat de navigatie dus onder het logo, op een eigen regel. */
  .kop { flex-wrap: wrap; }
  .kop #kopnav { width: 100%; flex-wrap: wrap; gap: 8px; }
  .kop #kopnav .knop { padding: 8px 13px; }
}

/* De tijdlijn is te slepen, dus dat mag de muiswijzer laten zien. */
.tijdstrook { cursor: grab; }
.tijdstrook:active { cursor: grabbing; }
.tijdkaart img { -webkit-user-drag: none; user-select: none; }

/* De officiële winkelknoppen van Apple en Google, ongewijzigd en even
   hoog. Apple schrijft voor dat hun knop niet kleiner mag zijn dan die
   van een andere winkel ernaast. */
.winkelknop img { height: 46px; }

/* Allebei even hoog en even breed. De knoppen van Apple en Google
   hebben niet dezelfde verhouding (2,99 tegen 3,36), dus zonder vaste
   breedte oogt die van Google langer. object-fit houdt ze scherp en
   onvervormd — vervormen mag niet van hun voorwaarden. */
.winkelknop { width: 160px; }
.winkelknop img { width: 100%; height: 48px; object-fit: contain; }