/* Appuccino: warme koffiekaart. Crème als ondergrond, espresso voor tekst,
   elke app op zijn eigen kleur. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --ondergrond: #F4EDE2;
  --vlak: #FBF7F0;
  --tekst: #2A1B12;
  --zacht: #6E5A4A;
  --lijn: rgba(42, 27, 18, .12);
  --espresso: #3B2418;
  --crema: #D9A066;
  --schuim: #FBF6EE;
  --schotel: #E3D3BD;
  --accent: #A8622E;
  --merk: #3B2418;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --rond: 28px;
  --rond-klein: 14px;
  --breedte: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ondergrond: #17100B;
    --vlak: #21170F;
    --tekst: #F3E9DC;
    --zacht: #B9A693;
    --lijn: rgba(243, 233, 220, .12);
    --espresso: #0E0906;
    --crema: #C98A4B;
    --schuim: #F3E9DC;
    --schotel: #3A2A1F;
    --accent: #E0A469;
    --merk: #FBF6EE;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--ondergrond);
  color: var(--tekst);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; color: var(--accent); font-weight: 400; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

.overslaan { position: absolute; left: -999px; top: 8px; background: var(--tekst); color: var(--ondergrond); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.overslaan:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Kop */
.kop { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--ondergrond) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; }
.kop-binnen { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; letter-spacing: -.01em; }
.logo { width: 34px; height: 34px; flex: none; }
.kop-nav { display: flex; gap: 4px; }
.kop-nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; color: var(--zacht); font-size: .95rem; transition: background .2s, color .2s; }
.kop-nav a:hover { background: var(--vlak); color: var(--tekst); }

/* Knoppen */
.knop { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px; background: var(--tekst); color: var(--ondergrond); text-decoration: none; font-weight: 600; font-size: .98rem; transition: transform .25s var(--ease), box-shadow .25s; }
.knop:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(42, 27, 18, .5); }
.knop-licht { background: #fff; color: var(--app, #2A1B12); }

/* Held */
.held { padding: 72px 0 96px; overflow: hidden; }
.held-binnen { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.bovenregel { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); margin-bottom: 20px; font-weight: 600; }
.held h1 { font-size: clamp(3.2rem, 8vw, 6.4rem); }
.intro { margin: 28px 0 36px; max-width: 34em; font-size: 1.15rem; color: var(--zacht); }
.held-404 { padding: 120px 0 140px; }

/* Stapel app-iconen naast de titel, als een handvol kaarten op tafel */
.stapel { list-style: none; margin: 0; padding: 0; position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; justify-self: center; }
.stapel::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--crema) 0 30%, var(--schotel) 31% 62%, transparent 63%); opacity: .55; }
.stapel li { position: absolute; width: 34%; animation: zweef 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.stapel li:nth-child(1) { left: 8%;  top: 12%; --r: -10deg; }
.stapel li:nth-child(2) { left: 56%; top: 6%;  --r: 8deg; }
.stapel li:nth-child(3) { left: 60%; top: 52%; --r: -6deg; }
.stapel li:nth-child(4) { left: 14%; top: 58%; --r: 7deg; }
.stapel li:nth-child(5) { left: 37%; top: 32%; --r: -3deg; width: 30%; }
.stapel li:nth-child(6) { left: 38%; top: 74%; --r: 12deg; width: 24%; }
.stapel-icoon { width: 100%; aspect-ratio: 1; border-radius: 22.5%; box-shadow: 0 24px 40px -18px rgba(42, 27, 18, .55), 0 2px 6px rgba(42, 27, 18, .12); transform: rotate(var(--r)); }
@keyframes zweef { 50% { translate: 0 -10px; } }

/* Monogram als een app geen icoon heeft */
.monogram { display: grid; place-items: center; background: var(--app); color: #fff; font-family: var(--serif); font-weight: 500; font-size: 2.2rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.stapel .monogram { font-size: clamp(2.4rem, 6vw, 4rem); }

/* De kaart */
.kaart-sectie { padding: 24px 0 110px; scroll-margin-top: 68px; }
.sectie-kop { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.sectie-kop h2 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font: inherit; font-size: .92rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--lijn); background: transparent; color: var(--tekst); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--tekst); }
.chip[aria-pressed="true"] { background: var(--tekst); color: var(--ondergrond); border-color: var(--tekst); }

.raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.kaart { grid-column: span 2; }
.kaart-breed { grid-column: span 3; }
.kaart[hidden] { display: none; }
/* Gezet door site.js: de laatste kaarten vullen de rij op */
.kaart.vol { grid-column: span 6; }
.kaart.half { grid-column: span 3; }
.leeg { color: var(--zacht); padding: 40px 0; }

.kaart-link {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 300px; padding: 26px;
  border-radius: var(--rond); text-decoration: none; color: #fff; overflow: hidden; isolation: isolate;
  background: var(--app);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Zacht licht van linksboven, zodat elke kleur diepte krijgt */
.kaart-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .22), transparent 55%), radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, .28), transparent 60%); }
.kaart-link:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -24px color-mix(in srgb, var(--app) 80%, #000); }
.kaart-breed .kaart-link { min-height: 360px; }

.kaart-boven { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.icoon { width: 68px; height: 68px; border-radius: 22.5%; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14); }
.kaart-breed .icoon { width: 84px; height: 84px; }
.status { display: inline-block; font-family: var(--sans); font-size: .75rem; font-weight: 600; letter-spacing: .04em; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; vertical-align: middle; }

.kaart-tekst { margin-top: auto; padding-top: 36px; }
.kaart-cat { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .72; font-weight: 600; margin-bottom: 8px; }
.kaart h3 { font-size: 2.1rem; }
.kaart-breed h3 { font-size: clamp(2.4rem, 4vw, 3rem); }
.kaart-tagline { margin-top: 8px; opacity: .88; max-width: 26em; }

.platformen { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.platformen li { font-size: .75rem; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); opacity: .9; }
.pijl { position: absolute; right: 24px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); font-size: 1.1rem; transition: transform .35s var(--ease), background .35s; }
.kaart-link:hover .pijl { transform: translateX(4px); background: #fff; color: var(--app); }
.kaart .platformen { padding-right: 52px; }

/* Over */
.over { padding: 100px 0 120px; background: var(--vlak); border-top: 1px solid var(--lijn); scroll-margin-top: 68px; }
.over h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 14em; }
.over-punten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.over-punten > div { border-top: 1px solid var(--lijn); padding-top: 22px; }
.over-punten h3 { font-size: 1.5rem; margin-bottom: 10px; }
.over-punten p { color: var(--zacht); }

/* Detailpagina */
.app-held { background: var(--app); color: #fff; position: relative; overflow: hidden; isolation: isolate; padding: 36px 0 64px; }
.app-held::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 0% 0%, rgba(255, 255, 255, .2), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(0, 0, 0, .3), transparent 60%); }
.terug { display: inline-flex; gap: 8px; text-decoration: none; opacity: .8; font-size: .95rem; }
.terug:hover { opacity: 1; }
.app-held-kern { display: flex; align-items: center; gap: 28px; margin-top: 44px; }
.icoon-groot { width: 128px; height: 128px; flex: none; }
.icoon-groot.monogram { font-size: 4rem; }
.app-held h1 { font-size: clamp(3rem, 8vw, 5.6rem); margin-top: 4px; }
.app-held .kaart-cat { display: flex; align-items: center; gap: 12px; }
.app-tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.7rem); opacity: .9; margin-top: 8px; }
.app-held-acties { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; }
.app-held-acties .platformen { margin: 0; }

.app-inhoud { padding: 72px 0 40px; }
.app-inhoud-binnen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.app-beschrijving { font-family: var(--serif); font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.45; }
.kenmerken { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kenmerken li { position: relative; padding: 16px 18px 16px 50px; border-radius: var(--rond-klein); background: var(--vlak); border: 1px solid var(--lijn); }
.kenmerken li::before { content: ""; position: absolute; left: 18px; top: 21px; width: 16px; height: 16px; border-radius: 50%; background: var(--app); box-shadow: 0 0 0 4px color-mix(in srgb, var(--app) 20%, transparent); }
@media (prefers-color-scheme: dark) {
  .kenmerken li::before { background: color-mix(in srgb, var(--app) 55%, #fff); }
}

.meer { padding: 64px 0 110px; }
.meer .sectie-kop h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.tekstlink { color: var(--zacht); text-decoration: none; }
.tekstlink:hover { color: var(--tekst); }
.raster-klein .kaart, .raster-klein .kaart-breed { grid-column: span 2; }
.raster-klein .kaart-link { min-height: 260px; }
.raster-klein .kaart-breed .icoon { width: 68px; height: 68px; }
.raster-klein .kaart-breed h3 { font-size: 2.1rem; }

/* Voet */
.voet { border-top: 1px solid var(--lijn); padding: 36px 0; color: var(--zacht); font-size: .95rem; }
.voet-binnen { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.merk-klein { font-size: 1.15rem; color: var(--tekst); }
.merk-klein .logo { width: 28px; height: 28px; }
.voet a[href^="mailto"] { margin-left: auto; }

/* Smaller */
@media (max-width: 960px) {
  .held-binnen { grid-template-columns: 1fr; }
  .stapel { max-width: 340px; order: -1; margin-bottom: -12px; }
  .raster { grid-template-columns: repeat(2, 1fr); }
  .kaart, .kaart-breed, .raster-klein .kaart, .raster-klein .kaart-breed { grid-column: span 1; }
  .kaart.vol, .kaart.half { grid-column: span 1; }
  .kaart.kaart-breed, .kaart.vol-smal { grid-column: span 2; }
  .over-punten { grid-template-columns: 1fr; gap: 28px; }
  .app-inhoud-binnen { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 620px) {
  .held { padding: 32px 0 64px; }
  .stapel { max-width: 260px; }
  .raster { grid-template-columns: 1fr; }
  .kaart.kaart-breed, .kaart.vol, .kaart.half, .kaart.vol-smal { grid-column: span 1; }
  .kaart-link, .kaart-breed .kaart-link { min-height: 270px; padding: 22px; }
  .app-held-kern { flex-direction: column; align-items: start; gap: 18px; margin-top: 28px; }
  .icoon-groot { width: 96px; height: 96px; }
  .kop-nav a { padding: 8px 10px; }
  .voet a[href^="mailto"] { margin-left: 0; }
}