/* Info pages (about, contact, imprint, what's new, terms, privacy): hero with an illustration, section cards with
   icons, a facts strip, a map of where we are, a timeline and a table of contents for the legal pages.
   Only layout and pictures: every text stays the same element, so the translations keep working. */
.ihero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding-block:clamp(28px,5vw,64px) clamp(20px,3vw,36px)}
.ihero .ptitle{padding:0}
.ihero-art{position:relative;aspect-ratio:1/1;max-width:340px;justify-self:end;width:100%}
.ihero-art::before{content:"";position:absolute;inset:6%;border-radius:38% 62% 55% 45%/48% 42% 58% 52%;
  background:radial-gradient(120% 120% at 30% 20%,var(--acc-soft),transparent 70%),var(--hl);opacity:.9}
.ihero-art svg{position:relative;width:100%;height:100%;display:block}
.art-paper{fill:var(--surface);stroke:var(--line);stroke-width:2}
.art-line{stroke:var(--line);stroke-width:5;stroke-linecap:round}
.art-acc{fill:var(--acc)}
.art-acc-s{stroke:var(--acc);fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.art-soft{fill:var(--acc-soft)}
.art-good{fill:var(--good)}
.art-ink{fill:var(--ink)}
.art-white{fill:#fff}
.art-float{animation:artFloat 6s ease-in-out infinite}
.art-float.d2{animation-delay:-2s}.art-float.d3{animation-delay:-4s}
@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.art-float{animation:none}}

/* badge under the intro: Made in the Netherlands */
.ibadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ibadge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink)}
.ibadge svg{width:22px;height:15px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* facts strip */
.ifacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 28px}
.ifact{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px}
.ifact b{display:block;font-family:var(--f-display);font-size:clamp(28px,3.4vw,38px);letter-spacing:-.03em;line-height:1;color:var(--acc-text)}
.ifact span{display:block;margin-top:8px;color:var(--muted);font-size:14px}

/* section cards */
.icards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.icard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;margin:0}
.icard.wide{grid-column:1/-1}
.icard-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.icard-h h2{margin:0;font-size:19px}
.ic-ico{width:40px;height:40px;border-radius:12px;background:var(--acc-soft);color:var(--acc-text);display:grid;place-items:center;flex:none}
.ic-ico svg{width:20px;height:20px}
.icard ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;color:var(--muted)}
.icard li{position:relative;padding-inline-start:26px;line-height:1.55}
.icard li::before{content:"";position:absolute;inset-inline-start:0;top:.32em;width:16px;height:16px;border-radius:50%;
  background:var(--acc-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%236D5DFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.icard.plain li::before{background:var(--acc);width:6px;height:6px;top:.62em;inset-inline-start:6px}

/* where we are: map of the Netherlands with Breda */
.imap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;overflow:hidden;padding:0}
.imap-art{background:linear-gradient(160deg,var(--acc-soft),var(--sunk));display:grid;place-items:center;padding:18px;min-height:240px}
.imap-art svg{width:100%;max-width:250px;height:auto}
.map-sea{fill:none}
.map-land{fill:var(--surface);stroke:var(--acc-line);stroke-width:1.6;stroke-linejoin:round}
.map-lake{fill:var(--acc-soft);stroke:var(--acc-line);stroke-width:1.2}
.map-city{fill:var(--muted)}
.map-label{font:600 9.5px var(--f-body);fill:var(--muted)}
.map-pin{fill:var(--acc)}
.map-pulse{fill:var(--acc);opacity:.25;transform-box:fill-box;transform-origin:center;animation:mapPulse 2.4s ease-out infinite}
.map-name{font:800 12px var(--f-display);fill:var(--ink)}
@keyframes mapPulse{0%{transform:scale(.6);opacity:.45}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.map-pulse{animation:none}}
.imap-txt{padding:22px}
.imap-txt .icard-h{margin-bottom:10px}
.imap-txt p{margin:0 0 6px;color:var(--muted)}
.imap-txt .btn{margin-top:12px}

/* what's new: timeline */
.itime{position:relative;margin:0;padding:0;list-style:none}
.itime li{position:relative;padding:0 0 18px 34px;color:var(--ink);line-height:1.55}
.itime li::before{content:"";position:absolute;left:7px;top:12px;bottom:-4px;width:2px;background:var(--line)}
.itime li:last-child::before{display:none}
.itime li::after{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:4px solid var(--acc);box-sizing:border-box}
.itime li:first-child::after{background:var(--acc);box-shadow:0 0 0 5px var(--acc-soft)}
[dir="rtl"] .itime li{padding:0 34px 18px 0}[dir="rtl"] .itime li::before{left:auto;right:7px}[dir="rtl"] .itime li::after{left:auto;right:0}
.imonth{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:14px;margin:0 0 16px}
.imonth h2{all:unset}

/* legal pages: table of contents beside the text */
.ilegal{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start}
.itoc{position:sticky;top:84px;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px 10px;font-size:14px}
.itoc b{display:block;padding:0 10px 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.itoc a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;line-height:1.35}
.itoc a:hover{background:var(--soft);color:var(--ink)}
.itoc a.on{background:var(--acc-soft);color:var(--acc-text);font-weight:600}
.ilegal-body h2{scroll-margin-top:84px}
.ilegal-body > section,.ilegal-body > div > section{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:0 0 12px}
.ilegal-body > section > h2,.ilegal-body > div > section > h2{margin-top:0}

@media (max-width:900px){
  .ihero{grid-template-columns:1fr}
  .ihero-art{max-width:220px;justify-self:start;order:-1;margin-bottom:-8px}
  .ifacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .icards{grid-template-columns:1fr}
  .imap{grid-template-columns:1fr}
  .ilegal{grid-template-columns:1fr}
  .itoc{position:static}
}
@media print{.ihero-art,.itoc,.imap-art{display:none!important}.ilegal{display:block}}
.wrap.legal:has(.ilegal){max-width:1120px}
.cmap .imap-art{border-radius:12px;margin:-2px -2px 10px;min-height:0;padding:10px}
.cmap .imap-art svg{max-width:190px}
.cmap a{display:inline-block;margin-top:6px}
.icard .itime li{padding-inline-start:34px}
.icard .itime li::before{background:var(--line);width:2px;height:auto;border-radius:0;top:14px;bottom:-4px;inset-inline-start:7px}
.icard .itime li::after{content:"";position:absolute;inset-inline-start:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:4px solid var(--acc);box-sizing:border-box}
.icard .itime li:first-child::after{background:var(--acc);box-shadow:0 0 0 5px var(--acc-soft)}