/* Bezoekerspagina's van Realm of Rogues: de balk, de rondleiding op de startpagina, de paginakop, de poort voor inloggen en de oproep onderaan. @author Ferhat Remory */
.ld { margin:0; background:#211c16; color:var(--color-ink); }

/* De rondleiding: elke kaart is een eigen laag, de camera beweegt met translate en scale, en tussen kaarten vloeit het beeld over. */
.rl { position:relative; height:calc(100svh - 64px); min-height:560px; overflow:hidden; background:#0e0c0a; color:var(--color-card); }
.rl-laag { position:absolute; left:0; top:0; transform-origin:0 0; opacity:0; background:center / 100% 100%; transition:transform 4.2s cubic-bezier(.65, 0, .35, 1), opacity 1.6s ease; will-change:transform; }
.rl-laag.is-aan { opacity:1; }
.rl::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 70% 65% at 50% 45%, transparent 40%, rgb(14 12 10 / .78)); }
.rl-schrift { position:absolute; z-index:3; left:56px; bottom:120px; max-width:540px; }
.rl-schrift > * { transition:opacity .7s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.rl-schrift.is-weg > * { opacity:0; transform:translateY(14px); }
.rl-schrift small { display:block; font:600 10.5px/1 var(--font-sans); letter-spacing:.26em; text-transform:uppercase; color:#e3b47a; }
.rl-schrift h2 { margin:10px 0; font:700 clamp(46px, 6vw, 92px)/.92 var(--font-kop); color:var(--color-card); text-shadow:0 4px 30px rgb(0 0 0 / .9); transition-delay:.08s; }
.rl-schrift p { font:italic 500 clamp(18px, 1.6vw, 22px)/1.45 var(--font-kop); color:#efe5d0; text-shadow:0 2px 14px rgb(0 0 0 / .95); transition-delay:.16s; }
.rl-wie { display:flex; align-items:center; gap:12px; margin-top:16px; transition-delay:.24s; }
.rl-wie img { width:52px; height:52px; object-fit:cover; object-position:top; border-radius:26px 26px 3px 3px; background:#2c2722; border:1px solid rgb(227 180 122 / .4); }
.rl-wie span { font:600 10px/1 var(--font-sans); letter-spacing:.18em; text-transform:uppercase; color:#cfc3ae; }
.rl-welkom { position:absolute; z-index:3; right:56px; top:40px; width:340px; padding:26px 26px 20px; background:rgb(247 243 235 / .95); color:var(--color-ink); border-radius:3px; outline:1px solid var(--color-line); outline-offset:-6px; box-shadow:0 30px 60px rgb(0 0 0 / .5); }
.rl-welkom h1 { font:700 30px/1.05 var(--font-kop); }
.rl-welkom > p { margin-top:8px; font-size:14px; line-height:1.55; color:var(--color-muted); }
.rl-welkom form { display:block; margin-top:16px; }
.rl-welkom .ld-knop { display:flex; width:100%; margin-top:10px; }
.rl-welkom form .ld-knop { margin:0; }
.ld-knop.ld-goud { background:linear-gradient(180deg, #fbe7b6, #d9a556 60%, #b07a32); border-color:#fff0c8; color:var(--color-ink); box-shadow:0 0 0 1px #8a5a22, 0 0 26px rgb(240 170 80 / .35); }
.ld-knop.ld-goud:hover { background:linear-gradient(180deg, #fff0c8, #e3b062 60%, #b98238); }
.rl-welkom .ld-stand { margin-top:16px; }
.rl-welkom .ld-stand dd { font-size:16px; white-space:nowrap; }
.rl-kroniek { position:absolute; z-index:3; right:56px; bottom:112px; width:340px; display:grid; gap:8px; }
.rl-regel { display:grid; grid-template-columns:36px minmax(0, 1fr); gap:10px; align-items:center; padding:9px 12px; background:rgb(14 12 10 / .8); border:1px solid rgb(227 180 122 / .22); border-radius:3px; backdrop-filter:blur(6px); font-size:12.5px; line-height:1.4; color:#d8cdb9; animation:rl-binnen .7s cubic-bezier(.2, .8, .2, 1); }
.rl-regel img { width:36px; height:36px; object-fit:contain; }
.rl-regel time { display:block; font:600 9px/1.4 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:#8a7f6c; }
@keyframes rl-binnen { from { opacity:0; transform:translateX(30px); } }
/* Op een laag scherm past maar één regel onder het welkom. */
@media (max-height:820px) and (min-width:861px) { .rl-welkom { top:24px; } .rl-kroniek .rl-regel:not(:last-child) { display:none; } }
/* Onderaan het beeld: de voortgang per halte, waar we zijn, en pauze. */
.rl-balk { position:absolute; z-index:4; left:0; right:0; bottom:0; display:flex; align-items:center; gap:22px; height:76px; padding:0 34px; background:#0e0c0a; }
.rl-stops { display:flex; gap:6px; }
.rl-stops button { position:relative; width:46px; height:14px; padding:0; border:0; background:none; cursor:pointer; }
.rl-stops button::before, .rl-stops button::after { content:""; position:absolute; left:0; top:6px; height:3px; width:100%; background:rgb(247 243 235 / .18); }
.rl-stops button::after { width:0; background:#e3b47a; }
.rl-stops button.is-klaar::after { width:100%; }
.rl-stops button.is-nu::after { animation:rl-vol var(--duur) linear forwards; }
.rl.is-stil .rl-stops button.is-nu::after { animation:none; width:100%; }
@keyframes rl-vol { to { width:100%; } }
.rl-waar { font:600 10px/1 var(--font-sans); letter-spacing:.2em; text-transform:uppercase; color:#8a7f6c; }
.rl-waar b { color:#e3b47a; }
.rl-pauze { margin-left:auto; padding:8px 0; border:0; background:none; font:600 10px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:#8a7f6c; cursor:pointer; }
.rl-pauze:hover { color:var(--color-card); }

.ld-paneel { grid-column:1; grid-row:1; position:relative; z-index:3; align-self:center; justify-self:center; margin:40px 20px; width:min(440px, calc(100% - 40px)); padding:30px 32px 24px; background:var(--color-card); border:1px solid var(--color-line); outline:1px solid var(--color-line); outline-offset:-6px; border-radius:3px; box-shadow:0 24px 60px rgb(0 0 0 / .45); }
.ld-paneel h1 { margin:0 0 10px; font:700 40px/1.05 var(--font-kop); }
.ld-paneel > p { color:var(--color-muted); font-size:15px; line-height:1.6; }
.ld-knoppen { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.ld-knop { display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:3px; border:1px solid var(--color-ink); background:var(--color-ink); color:var(--color-card); font:700 12px/1 Inter, sans-serif; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.ld-knop:hover { background:#000; }
.ld-lijn { background:transparent; color:var(--color-ink); }
.ld-lijn:hover { background:var(--color-card-deep); }
.ld-stand { display:grid; grid-template-columns:repeat(3, 1fr); margin:18px 0 0; border:1px solid var(--color-line); }
.ld-stand div { padding:9px 10px; border-right:1px solid var(--color-line); }
.ld-stand div:last-child { border-right:0; }
.ld-stand dt { font:600 8.5px/1 Inter, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--color-muted); }
.ld-stand dd { margin:5px 0 0; font:700 18px/1 var(--font-kop); }
.ld-feiten h2 { text-align:center; font:700 clamp(32px, 4vw, 52px)/1 var(--font-kop); }
.ld-feiten { background:var(--color-card-deep); border-top:1px solid var(--color-line); }
.ld-feiten > div { max-width:1180px; margin:0 auto; padding:54px 24px 20px; display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.ld-feiten b { display:block; font:700 46px/1 var(--font-kop); color:var(--color-accent); }
.ld-feiten h3 { font:700 22px var(--font-kop); }
.ld-feiten p { margin-top:6px; font-size:14px; line-height:1.55; color:var(--color-muted); }
.ld-vraag { max-width:1180px; margin:0 auto; padding:10px 24px 50px; font-size:13.5px; color:var(--color-muted) !important; }
.ld-vraag a { color:var(--color-accent); font-weight:600; }
.ld-voet { background:var(--color-ink); padding:26px 16px; }
.ld-voet footer, .ld-voet footer a, .ld-voet .lang-switch button { color:#bfb5a4; }
.ld-anim [data-in] { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.ld-anim [data-in].ld-zicht { opacity:1; transform:none; }
@media (max-width:860px) {
  .rl { height:calc(100svh - 64px); min-height:600px; }
  .rl-kroniek, .rl-pauze, .rl-wie { display:none; }
  .rl-schrift { left:18px; right:18px; top:22px; bottom:auto; }
  .rl-schrift h2 { font-size:42px; }
  .rl-welkom { left:14px; right:14px; top:auto; bottom:70px; width:auto; padding:18px 18px 16px; }
  .rl-welkom h1 { font-size:24px; }
  .rl-welkom .ld-stand { display:none; }
  .rl-balk { height:56px; padding:0 16px; gap:14px; }
  .rl-stops button { width:26px; }
  .ld-stand dd { font-size:15px; }
  .ld-feiten > div { grid-template-columns:1fr; }
}

/* De balk bovenaan elke bezoekerspagina: woordmerk, de gidsen, inloggen en spelen. Op de gsm klapt het menu open onder de balk. */
.og-balk { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:30px; height:64px; padding:0 28px; background:rgb(23 19 15 / .94); border-bottom:1px solid rgb(247 243 235 / .08); backdrop-filter:blur(8px); }
.og-merk { font-size:23px; text-decoration:none; }
.og-merk .lotl-logo { color:var(--color-card); }
.og-merk .lotl-logo i { color:#e3b47a; }
.og-menu { display:flex; gap:24px; }
.og-menu a, .og-in { position:relative; padding:6px 0; font:600 10.5px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:#cfc3ae; text-decoration:none; white-space:nowrap; }
.og-menu a:hover, .og-in:hover { color:var(--color-card); }
.og-menu a[aria-current="page"] { color:var(--color-card); }
.og-menu a[aria-current="page"]::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--color-accent); }
.og-acties { display:flex; align-items:center; gap:20px; margin-left:auto; }
.og-acties .ld-knop { padding:11px 16px; font-size:10.5px; }
.ld-licht { background:var(--color-card); border-color:var(--color-card); color:var(--color-ink); }
.ld-licht:hover { background:#fff; }
.ld-lijn.ld-donker { border-color:rgb(247 243 235 / .45); color:var(--color-card); }
.ld-lijn.ld-donker:hover { background:rgb(247 243 235 / .08); }
.og-gsm { display:none; }
.og-gsm summary { display:grid; place-items:center; width:40px; height:40px; list-style:none; color:var(--color-card); cursor:pointer; border:1px solid rgb(247 243 235 / .25); border-radius:3px; }
.og-gsm summary::-webkit-details-marker { display:none; }
.og-gsm nav { position:absolute; left:0; right:0; top:64px; display:flex; flex-direction:column; padding:8px 20px 18px; background:#17130f; border-bottom:1px solid rgb(247 243 235 / .1); box-shadow:0 20px 40px rgb(0 0 0 / .4); }
.og-gsm nav a { padding:14px 0; border-bottom:1px solid rgb(247 243 235 / .08); font:600 11px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:#cfc3ae; text-decoration:none; }
.og-gsm nav a:last-child { border-bottom:0; }
@media (max-width:1060px) { .og-menu, .og-in { display:none; } .og-gsm { display:block; } .og-acties { gap:12px; } }
@media (max-width:480px) { .og-balk { gap:12px; padding:0 14px; } .og-merk { font-size:19px; } .og-acties .ld-knop { padding:10px 12px; letter-spacing:.1em; } }

/* Kop van een gewone pagina: donker, met de stadskaart er vaag achter; links het kruimelpad, de titel en de inleiding. */
.og-kop { position:relative; overflow:hidden; background:#211c16; color:var(--color-card); }
.og-kop::before { content:""; position:absolute; inset:0; background:var(--kop-beeld) center 45% / cover; opacity:.32; }
.og-kop::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, #211c16 20%, rgb(33 28 22 / .55) 70%, rgb(33 28 22 / .25)); }
.og-kop-in { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:30px; align-items:center; max-width:1080px; margin:0 auto; padding:50px 28px 46px; }
.og-pad { display:flex; flex-wrap:wrap; gap:8px; font:600 10px/1.4 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:#e3b47a; }
.og-pad a { color:#e3b47a; text-decoration:none; }
.og-pad a:hover { color:var(--color-card); }
.og-pad span[aria-hidden] { color:rgb(247 243 235 / .35); }
.og-kop h1 { margin-top:12px; font:700 clamp(36px, 5vw, 58px)/1.02 var(--font-kop); color:var(--color-card); }
.og-kop-in > div > p { max-width:640px; margin-top:14px; font-size:16px; line-height:1.6; color:#d8cdb9; }
.og-kop-beeld { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 18px 26px rgb(0 0 0 / .55)); }
.og-kop-beeld.is-buste { width:170px; height:auto; border-radius:85px 85px 3px 3px; background:#2c2722; filter:none; box-shadow:0 18px 30px rgb(0 0 0 / .5); }

/* Het perkament eronder: een brede kolom, met tekstblokken in een dubbel kader zoals op de startpagina. */
.og-vel { background:var(--color-card); }
.og-vel-in { max-width:1080px; margin:0 auto; padding:48px 28px 64px; }
.og-tekst { max-width:740px; }
.og-zij { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:40px; align-items:start; }
.og-zij > aside { position:sticky; top:88px; }
.og-blok { padding:20px 22px; background:var(--color-card); border:1px solid var(--color-line); outline:1px solid var(--color-line); outline-offset:-6px; border-radius:3px; }
.og-blok + .og-blok { margin-top:16px; }
.og-tegels > .og-blok { margin-top:0; }
.og-blok h2, .og-h2 { font:700 23px/1.15 var(--font-kop); color:var(--color-ink); }
.og-blok h2 + p, .og-blok h2 + div, .og-blok h2 + dl, .og-blok h2 + ul { margin-top:8px; }
.og-blok p { font-size:14.5px; line-height:1.7; color:var(--color-muted); }
.og-h2 { margin:44px 0 16px; font-size:30px; }
.og-label { display:block; font:600 10px/1.3 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); }
.og-tegels { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; list-style:none; margin:0; padding:0; }
.og-tegel { display:grid; grid-template-columns:64px minmax(0, 1fr); grid-template-rows:auto 1fr auto; gap:4px 16px; align-items:start; height:100%; padding:18px 20px; color:inherit; text-decoration:none; background:var(--color-card); border:1px solid var(--color-line); outline:1px solid var(--color-line); outline-offset:-6px; border-radius:3px; transition:transform .25s, border-color .25s, box-shadow .25s; }
.og-tegel:hover { transform:translateY(-3px); border-color:var(--color-line-strong); box-shadow:0 14px 26px rgb(29 27 24 / .1); }
.og-tegel img { grid-row:span 3; width:64px; height:64px; object-fit:contain; }
.og-tegel b { font:700 21px/1.15 var(--font-kop); }
.og-tegel span { font-size:13.5px; line-height:1.55; color:var(--color-muted); }
.og-tegel small { margin-top:6px; font:600 9.5px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); }
.og-lijst { list-style:none; margin:0; padding:0; }
.og-lijst a { display:grid; grid-template-columns:36px minmax(0, 1fr); gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--color-line); color:var(--color-ink); text-decoration:none; font:600 16px/1.2 var(--font-kop); }
.og-lijst a:hover { color:var(--color-accent); }
.og-lijst img { width:36px; height:36px; object-fit:contain; }
.og-vraag { margin-top:26px; font-size:14px; color:var(--color-muted); }
.og-vraag a, .og-tekst a:not(.btn):not(.ld-knop), .og-blok a:not(.btn):not(.ld-knop) { color:var(--color-accent); font-weight:600; }
.og-faq { border-top:1px solid var(--color-ink); }
.og-faq details { border-bottom:1px solid var(--color-line); }
.og-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 2px; list-style:none; cursor:pointer; }
.og-faq summary::-webkit-details-marker { display:none; }
.og-faq summary h2 { font:700 20px/1.25 var(--font-kop); }
.og-faq summary::after { content:"+"; flex:none; font:400 26px/1 var(--font-kop); color:var(--color-accent); transition:transform .2s; }
.og-faq details[open] summary::after { transform:rotate(45deg); }
.og-faq details p { padding:0 2px 20px; max-width:680px; font-size:15px; line-height:1.7; color:var(--color-muted); }
.og-nieuws { list-style:none; margin:0; padding:0; border-top:1px solid var(--color-ink); }
.og-nieuws a { display:grid; grid-template-columns:110px minmax(0, 1fr); gap:20px; padding:20px 2px; border-bottom:1px solid var(--color-line); color:inherit; text-decoration:none; }
.og-nieuws a:hover h2, .og-nieuws a:hover h3 { color:var(--color-accent); }
.og-nieuws time { padding-top:5px; font:600 10px/1.3 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--color-faint); }
.og-nieuws h2, .og-nieuws h3 { font:700 21px/1.2 var(--font-kop); transition:color .2s; }
.og-nieuws p { margin-top:5px; font-size:14px; line-height:1.6; color:var(--color-muted); }
.og-artikel { font-size:16px; line-height:1.75; color:var(--color-ink); }
.og-artikel p + p { margin-top:14px; }
.og-artikel > p:first-child::first-letter { float:left; margin:6px 10px 0 0; font:700 62px/.8 var(--font-kop); color:var(--color-accent); }
.og-mijlpalen { list-style:none; margin:16px 0 0; padding:0 0 0 22px; border-left:1px solid var(--color-ink); }
.og-mijlpalen li { position:relative; padding:0 0 16px 8px; }
.og-mijlpalen li::before { content:""; position:absolute; left:-30px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--color-card); border:2px solid var(--color-accent); }
.og-mijlpalen b { display:block; font:600 10px/1.3 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent); }
.og-mijlpalen span { font:500 18px/1.35 var(--font-kop); color:var(--color-ink); }
.og-citaat { margin:6px 0 0; padding:18px 22px; border-left:3px solid var(--color-accent); background:var(--color-card-deep); font:italic 500 19px/1.5 var(--font-kop); color:var(--color-ink); }
.og-citaat p { font:inherit !important; color:inherit !important; }

/* De poort: inloggen, spelen, wachtwoord en fouten. Links het perkament, rechts de stad. */
.og-poort { display:grid; grid-template-columns:max(500px, 38vw) 1fr; min-height:max(600px, calc(100svh - 64px)); background:radial-gradient(ellipse at 20% 50%, #3a2f24, #211c16 70%); }
.og-poort-kaart { grid-column:2; grid-row:1; position:relative; background:var(--kop-beeld) center / cover; box-shadow:-30px 0 60px rgb(0 0 0 / .5); }
.og-poort-kaart::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgb(33 28 22 / .55), rgb(33 28 22 / 0) 18%); }
.og-poort .ld-paneel h1 { font-size:36px; }
.og-poort .ld-paneel > p { margin-bottom:20px; }
.og-poort .ld-stand { margin-top:22px; }
.og-heraut { display:grid; grid-template-columns:54px minmax(0, 1fr); gap:12px; align-items:center; margin:0 0 18px; padding:12px; background:var(--color-card-deep); border-radius:3px; }
.og-heraut img { width:54px; height:54px; object-fit:cover; object-position:top; border-radius:27px 27px 3px 3px; background:#2c2722; }
.og-heraut q { font:italic 500 16px/1.35 var(--font-kop); color:var(--color-ink); quotes:"“" "”"; }
.og-heraut small { display:block; margin-top:3px; font:600 8.5px/1 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); }

/* De oproep onderaan: donker, met de Heraut en de knoppen. */
.og-slot { position:relative; overflow:hidden; background:#211c16; color:var(--color-card); }
.og-slot::before { content:""; position:absolute; inset:0; background:var(--kop-beeld) center 60% / cover; opacity:.22; }
.og-slot-in { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:30px; align-items:center; max-width:1080px; margin:0 auto; padding:54px 28px; }
.og-slot img { width:118px; border-radius:59px 59px 3px 3px; background:#2c2722; box-shadow:0 14px 30px rgb(0 0 0 / .45); }
.og-slot h2 { font:700 clamp(28px, 3.4vw, 42px)/1.05 var(--font-kop); color:var(--color-card); }
.og-slot p { margin-top:8px; max-width:520px; font-size:15px; line-height:1.6; color:#d8cdb9; }
.og-slot .ld-knoppen { margin:0; flex-wrap:nowrap; }

/* Uit het Rijk op de startpagina: het laatste nieuws en wie er nu heerst. */
.ld-rijk { background:var(--color-card); border-top:1px solid var(--color-line); }
.ld-rijk > div { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:48px; max-width:1180px; margin:0 auto; padding:60px 24px 64px; }
.ld-rijk h2 { margin-bottom:16px; font:700 32px/1 var(--font-kop); }
.ld-heersers { margin:0; border-top:1px solid var(--color-ink); }
.ld-heersers div { display:flex; justify-content:space-between; gap:14px; padding:14px 2px; border-bottom:1px solid var(--color-line); }
.ld-heersers dt { font:600 10px/1.6 var(--font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--color-muted); }
.ld-heersers dd { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 18px/1.2 var(--font-kop); text-align:right; }
.ld-heersers .is-lang { display:block; }
.ld-heersers .is-lang dd { margin-top:6px; white-space:normal; text-align:left; }

@media (max-width:860px) {
  .og-kop-in { grid-template-columns:1fr; padding:34px 18px 32px; }
  .og-kop-beeld { display:none; }
  .og-vel-in { padding:30px 18px 44px; }
  .og-zij { grid-template-columns:1fr; gap:30px; }
  .og-zij > aside { position:static; }
  .og-tegels { grid-template-columns:1fr; }
  .og-nieuws a { grid-template-columns:1fr; gap:4px; }
  .og-poort { display:block; min-height:0; }
  .og-poort-kaart { height:190px; box-shadow:none; }
  .og-poort-kaart::after { background:linear-gradient(0deg, rgb(33 28 22 / .7), transparent 60%); }
  .og-poort .ld-paneel { margin:-60px auto 30px; }
  .og-poort .ld-paneel h1 { font-size:30px; }
  .og-slot-in { grid-template-columns:1fr; gap:18px; padding:40px 18px; text-align:center; justify-items:center; }
  .og-slot img { width:90px; }
  .og-slot .ld-knoppen { flex-wrap:wrap; justify-content:center; }
  .ld-rijk > div { grid-template-columns:1fr; gap:36px; padding:44px 18px; }
}