@font-face{font-family:'Appanter Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Poppins-Bold.woff) format('woff')}
@font-face{font-family:'Appanter Display';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/Poppins-Light.woff) format('woff')}
@font-face{font-family:'Appanter Tekst';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Inter-Regular.woff) format('woff')}
@font-face{font-family:'Appanter Tekst';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Inter-SemiBold.woff) format('woff')}
@font-face{font-family:'Appanter Games';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/BarlowCondensed-Bold.woff2) format('woff2')}
@font-face{font-family:'Appanter Games';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/BarlowCondensed-ExtraBold.woff2) format('woff2')}
/* Stijl van appanter.nl, voor alle pagina's. maak.mjs zet de lettertypen (@font-face) ervoor.
   Opbouw: kleuren, basis, kop en voet, knoppen, daarna per pagina (home, roosterapp, invalplanning, privacy). */
:root {
  --paper: #f4f7fc;
  --surface: #ffffff;
  --ink: #0f1a2e;
  --ink-soft: #4a566d;
  --line: #d8e1ee;
  --blue: #1563e0;
  --blue-hi: #1797fe;
  --blue-deep: #0a6cf0;
  --tint: #e5effd;
  --tint-ink: #0a4fb8;
  --btn-bg: #1563e0;
  --btn-ink: #ffffff;
  --frame: #0f1a2e;
  --band: #0f1a2e;
  --band-ink: #eef3fb;
  --band-soft: #b4c2da;
  --panter-filter: none;
  --schaduw: 0 1px 2px rgba(15, 26, 46, .06), 0 18px 40px -18px rgba(15, 26, 46, .28);
  /* kleuren van de twee apps */
  --rooster: #00686a; --rooster-bg: #d5eded;
  --inval: #1f5f4f; --inval-bg: #dcefe7;
  /* dienstkleuren uit de roosterapp zelf */
  --zon-bg: #fbe5a0; --zon-ink: #5f4500;
  --koraal-bg: #f8cdb6; --koraal-ink: #73300d;
  --nacht-bg: #cfd4f6; --nacht-ink: #232c6b;
  --salie-bg: #cde6d2; --salie-ink: #22502b;
  --font-display: 'Appanter Display', 'Poppins', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Appanter Tekst', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --breed: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a1120; --surface: #111b2e; --ink: #e9eef8; --ink-soft: #a7b3c9; --line: #23314b;
    --blue: #79b0ff; --blue-hi: #3aaaff; --blue-deep: #4b8ff5; --tint: #13274a; --tint-ink: #a9cbff;
    --btn-bg: #79b0ff; --btn-ink: #06142b; --frame: #2a3955;
    --band: #050b16; --band-ink: #e9eef8; --band-soft: #a7b3c9;
    --panter-filter: drop-shadow(0 0 .6px rgba(170, 205, 255, .95)) drop-shadow(0 0 10px rgba(70, 140, 255, .28));
    --schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -18px rgba(0, 0, 0, .7);
    --rooster: #5fcfd1; --rooster-bg: #123b3c; --inval: #7fd3b4; --inval-bg: #143a2f;
    --zon-bg: #4a3b0c; --zon-ink: #f6d877; --koraal-bg: #4f2816; --koraal-ink: #f6b896;
    --nacht-bg: #262d5e; --nacht-ink: #bcc4f6; --salie-bg: #1e3b26; --salie-ink: #a9d9b2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a1120; --surface: #111b2e; --ink: #e9eef8; --ink-soft: #a7b3c9; --line: #23314b;
  --blue: #79b0ff; --blue-hi: #3aaaff; --blue-deep: #4b8ff5; --tint: #13274a; --tint-ink: #a9cbff;
  --btn-bg: #79b0ff; --btn-ink: #06142b; --frame: #2a3955;
  --band: #050b16; --band-ink: #e9eef8; --band-soft: #a7b3c9;
  --panter-filter: drop-shadow(0 0 .6px rgba(170, 205, 255, .95)) drop-shadow(0 0 10px rgba(70, 140, 255, .28));
  --schaduw: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -18px rgba(0, 0, 0, .7);
  --rooster: #5fcfd1; --rooster-bg: #123b3c; --inval: #7fd3b4; --inval-bg: #143a2f;
  --zon-bg: #4a3b0c; --zon-ink: #f6d877; --koraal-bg: #4f2816; --koraal-ink: #f6b896;
  --nacht-bg: #262d5e; --nacht-ink: #bcc4f6; --salie-bg: #1e3b26; --salie-ink: #a9d9b2;
  color-scheme: dark;
}

* { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30;
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.12rem; letter-spacing: -.005em; }
p { margin: 0; }
.wrap {
  max-width: var(--breed); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
.eyebrow {
  font: 600 .78rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.badge {
  justify-self: start; align-self: flex-start; display: inline-block;
  background: var(--tint); color: var(--tint-ink); font: 600 .86rem/1.3 var(--font-body);
  padding: 6px 14px; border-radius: 999px;
}
.badge.rooster { background: var(--rooster-bg); color: var(--rooster); }
.badge.inval { background: var(--inval-bg); color: var(--inval); }
.sectie { padding-block: clamp(56px, 8vw, 96px); }
.sectie.vlak { background: var(--surface); border-block: 1px solid var(--line); }
.sectie.direct { padding-top: 0; }
.band a.licht { color: #cfe3ff; }
.sectiekop { display: grid; gap: 14px; max-width: 46rem; }
.sectiekop p:not(.eyebrow):not(.badge) { color: var(--ink-soft); font-size: 1.08rem; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- kop ---------- */
.kop {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.merk img { width: 42px; height: 42px; object-fit: contain; filter: var(--panter-filter); }
.woord { display: grid; line-height: 1; }
.woord b {
  font: 700 1.32rem/1 var(--font-display); letter-spacing: -.01em; color: var(--ink);
}
.woord b span {
  background: linear-gradient(100deg, var(--blue-hi), var(--blue-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.woord small { font: 300 .56rem/1 var(--font-display); letter-spacing: .52em; color: var(--ink-soft); margin-top: 5px; padding-left: .1em; }
.menu { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 28px); }
.menu a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--blue); }
.menu .knop.vol, .menu .knop.vol:hover { color: var(--btn-ink); }
@media (max-width: 820px) { .menu .tekstlink:not(.blijft) { display: none; } }
@media (max-width: 400px) {
  .menu .tekstlink { display: none; }
  .kop .wrap { gap: 10px; }
  .kop .merk img { width: 36px; height: 36px; }
  .menu .knop.klein { padding: 0 14px; }
}

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: 600 1rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: transform .15s ease, background-color .15s ease;
}
.knop.vol { background: var(--btn-bg); color: var(--btn-ink); }
.knop.vol:hover { transform: translateY(-1px); }
.knop.rand { background: var(--surface); color: var(--ink); border-color: var(--line); }
.knop.rand:hover { border-color: var(--blue); color: var(--blue); }
.knop.klein { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.knop svg { width: 18px; height: 18px; flex: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.pijl { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pijl::after { content: "→"; transition: transform .15s ease; }
.pijl:hover::after { transform: translateX(3px); }

/* ---------- held (alle pagina's) ---------- */
.held { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 104px); overflow: hidden; }
.held .wrap { display: grid; gap: clamp(40px, 5vw, 64px); align-items: center; }
@media (min-width: 980px) { .held .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }
.held-tekst { display: grid; gap: 22px; min-width: 0; }
.held-tekst h1 .accent { color: var(--blue); }
.lead { font-size: 1.16rem; color: var(--ink-soft); max-width: 36rem; }
.noot { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); max-width: 34rem; }
.noot svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }

.venster {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--schaduw); overflow: hidden;
}
.venster-balk { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.venster-balk span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.venster img { width: 100%; }
.telefoon {
  margin: 0; background: #000; border: 7px solid var(--frame); border-radius: 30px; overflow: hidden;
  box-shadow: var(--schaduw); aspect-ratio: 780 / 1688; max-width: 100%;
}
.telefoon img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 560px) {
  .telefoon { border-width: 5px; border-radius: 20px; }
}

/* ---------- home: twee telefoons in de held ---------- */
.telefoons { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 3vw, 28px); min-width: 0; }
.telefoons .telefoon { width: min(250px, 46%); flex: none; border-width: 8px; border-radius: 34px; }
.telefoons .telefoon:first-child { transform: translateY(-28px); }
@media (max-width: 560px) { .telefoons .telefoon { border-width: 5px; border-radius: 22px; } .telefoons .telefoon:first-child { transform: translateY(-16px); } }

/* een scherm van de invalplanning, nagebouwd (de app staat nog niet in een demo) */
.mock { background: #f3f8f6; color: #0f1a2e; display: flex; flex-direction: column; font-size: clamp(9px, 1.05vw, 12px); line-height: 1.35; }
.mock-kop { background: #2a7f69; color: #fff; padding: 1.7em 1.2em 1.2em; display: grid; gap: .2em; }
.mock-kop b { font: 700 1.35em/1.2 var(--font-display); }
.mock-kop span { font-size: .92em; opacity: .9; }
.mock-lijst { padding: 1em .85em; display: grid; gap: .7em; }
.mock-dienst { background: #fff; border: 1px solid #d3e4dc; border-radius: .9em; padding: .75em .85em; display: grid; gap: .25em; }
.mock-dienst b { font-size: 1.06em; }
.mock-dienst span { color: #4a566d; }
.mock-dienst i { justify-self: start; font-style: normal; font-weight: 600; border-radius: 999px; padding: .1em .7em; }
.m-groen { background: #dcefe7; color: #1f5f4f; }
.m-geel { background: #fbe5a0; color: #5f4500; }
.m-blauw { background: #e5effd; color: #0a4fb8; }

/* ---------- home: wat we maken ---------- */
.kaarten { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 760px) { .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kaart {
  display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 30px); border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); min-width: 0;
}
.kaart h3 { font-size: 1.45rem; letter-spacing: -.01em; }
.kaart p { color: var(--ink-soft); }
.kaart .links { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.kaart.maatwerk { background: linear-gradient(140deg, var(--blue-hi), var(--blue-deep) 75%); border-color: transparent; color: #fff; }
.kaart.maatwerk .eyebrow { color: #eaf3ff; }
.kaart.maatwerk p { color: #eaf3ff; }
.kaart.maatwerk a { color: #fff; }
.kaart.rooster a { color: var(--rooster); }
.kaart.inval a { color: var(--inval); }

/* ---------- home: wat voor apps ---------- */
.soorten { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 640px) { .soorten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .soorten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.soort { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.soort svg { width: 28px; height: 28px; color: var(--blue); }
.soort p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- home: zo werken we ---------- */
.werkstappen { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .werkstappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .werkstappen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.werkstappen li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.werkstappen .nr {
  width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
  background: var(--tint); color: var(--tint-ink); font: 700 1rem/1 var(--font-display);
}
.werkstappen p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- donkere band (home: waarom, roosterapp: privacy) ---------- */
.band { background: var(--band); color: var(--band-ink); }
.band .eyebrow { color: var(--blue-hi); }
.band .sectiekop p:not(.eyebrow) { color: var(--band-soft); }
.band h2, .band h3 { color: var(--band-ink); }
.waarom { display: grid; gap: 36px 56px; align-items: start; }
@media (min-width: 940px) { .waarom { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.punten { display: grid; gap: 26px 36px; }
@media (min-width: 640px) { .punten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.punten div { display: grid; gap: 6px; align-content: start; }
.punten p { color: var(--band-soft); }

/* ---------- contact (alle pagina's) ---------- */
.contactkaart {
  display: grid; gap: 24px 32px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: 28px;
  background: var(--surface); border: 1px solid var(--line);
}
@media (min-width: 860px) { .contactkaart { grid-template-columns: minmax(0, 1fr) auto; } }
.contactkaart > div { display: grid; gap: 10px; }
.contactkaart p { color: var(--ink-soft); max-width: 40rem; }
.contactkaart .knop { font-size: 1.08rem; min-height: 56px; padding: 0 28px; overflow-wrap: anywhere; }

/* ---------- voet ---------- */
.voet { border-top: 1px solid var(--line); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); }
.voet .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; font-size: .9rem; color: var(--ink-soft); }
.voet .merk img { width: 32px; height: 32px; }
.voet .woord b { font-size: 1.05rem; }
.voet .woord small { font-size: .48rem; }
.voet nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.voet nav a { color: var(--ink-soft); }
.voet nav a:hover { color: var(--blue); }
.voet .klein { width: 100%; font-size: .84rem; }

/* ---------- roosterapp ---------- */
.held-beeld { display: grid; min-width: 0; }
.held-beeld > figure { grid-area: 1 / 1; }
.held-beeld .venster { width: 86%; justify-self: start; align-self: start; }
.held-beeld .telefoon { width: 34%; justify-self: end; align-self: end; margin-top: 17%; position: relative; z-index: 1; }

.tijdlijn { margin-top: 44px; }
.tijdlijn-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: .9rem; color: var(--ink-soft); margin-bottom: 14px; }
.tijdlijn-kop b { color: var(--ink); font-weight: 600; }
.tijdas { position: relative; height: 40px; }
.tijdas .lijn { position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: var(--line); }
.tijdas .vak {
  position: absolute; top: 6px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; padding: 0 10px 0 var(--vak-in, 10px); font: 600 .82rem/1 var(--font-body); white-space: nowrap; overflow: hidden;
}
.tijdas .punt {
  position: absolute; top: 9px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px currentColor;
}
.tijdas .vlag { position: absolute; right: 0; top: 4px; height: 32px; width: 3px; border-radius: 2px; background: var(--ink); }
.k-wensen { background: var(--zon-bg); color: var(--zon-ink); }
.k-concept { background: var(--nacht-bg); color: var(--nacht-ink); }
.k-ruilen { background: var(--koraal-bg); color: var(--koraal-ink); }
.k-definitief { background: var(--salie-bg); color: var(--salie-ink); }
.ticks { position: relative; height: 22px; margin-top: 6px; font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ticks span:first-child { transform: none; }
.ticks span:last-child { transform: translateX(-100%); font-weight: 600; color: var(--ink); }
@media (max-width: 520px) { .ticks .t-concept { display: none; } }

.stappen { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stap { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); min-width: 0; }
.stap-kop { display: flex; align-items: center; gap: 12px; }
.stap-nr {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font: 700 1rem/1 var(--font-display); flex: none;
}
.stap-wie { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.stap-datum { font-size: .9rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.stap p { font-size: .96rem; color: var(--ink-soft); }
.naloop { margin-top: 20px; display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: .98rem; max-width: 52rem; }
.naloop svg { flex: none; width: 22px; height: 22px; color: var(--blue); margin-top: 2px; }

.duo { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .duo.omgekeerd > .duo-beeld { order: -1; }
}
.duo.boven { align-items: start; }
.duo-tekst { display: grid; gap: 18px; min-width: 0; }
.duo-tekst > p:not(.eyebrow):not(.badge) { color: var(--ink-soft); font-size: 1.06rem; }
.lijst { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; }
.lijst li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.lijst li::before {
  content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px;
  background: radial-gradient(circle at center, var(--blue) 0 4px, var(--tint) 4.6px);
}
.lijst b { color: var(--ink); font-weight: 600; }
.lijst span { color: var(--ink-soft); }
.duo-beeld { min-width: 0; display: grid; justify-items: center; gap: 14px; }
.duo-beeld .telefoon { width: min(300px, 78%); }
.bijschrift { font-size: .88rem; color: var(--ink-soft); text-align: center; max-width: 28rem; }
.diensten { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dienst { display: inline-flex; align-items: center; gap: 7px; }
.dienst i { font: 600 .8rem/1 var(--font-body); font-style: normal; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; }
.d-v { background: var(--zon-bg); color: var(--zon-ink); }
.d-l { background: var(--koraal-bg); color: var(--koraal-ink); }
.d-n { background: var(--nacht-bg); color: var(--nacht-ink); }
.d-h { background: var(--salie-bg); color: var(--salie-ink); }
.planner-kop { display: grid; gap: 28px 64px; }
@media (min-width: 900px) { .planner-kop { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.planner-kop .lijst { margin-top: 4px; }
.planner-beeld { margin-top: clamp(36px, 5vw, 56px); }
.planner-beeld + .diensten { margin-top: 20px; }
.diensten + .bijschrift { margin: 10px auto 0; }

.tegels { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 640px) { .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tegel { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.tegel svg { width: 26px; height: 26px; color: var(--blue); }
.tegel p { color: var(--ink-soft); font-size: .96rem; }
.tegel code { font: 500 .9em/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--ink); background: var(--tint); padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere; }

.privacy-raster { display: grid; gap: 28px 40px; margin-top: 40px; }
@media (min-width: 760px) { .privacy-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.privacy-raster div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; }
.privacy-raster svg { grid-row: span 2; width: 28px; height: 28px; color: var(--blue-hi); margin-top: 2px; }
.privacy-raster p { color: var(--band-soft); font-size: .98rem; }

.start-raster { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .start-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.startlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.startlijst li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.startlijst li:last-child { border-bottom: 1px solid var(--line); }
.startlijst .nr { grid-row: span 2; font: 700 1.5rem/1 var(--font-display); color: var(--blue); padding-top: 2px; }
.startlijst p { color: var(--ink-soft); font-size: .98rem; }

.demo-band { padding-block: 0 clamp(56px, 8vw, 96px); }
.demo-kaart {
  display: grid; gap: 28px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 22px;
  background: linear-gradient(120deg, var(--blue-hi), var(--blue-deep) 70%); color: #ffffff;
}
@media (min-width: 820px) { .demo-kaart { grid-template-columns: minmax(0, 1fr) auto; } }
.demo-kaart h2 { color: #ffffff; }
.demo-kaart p { color: #eaf3ff; max-width: 40rem; margin-top: 12px; }
.demo-kaart .knop { background: #ffffff; color: #0a3f9c; }
.demo-kaart .knop:hover { transform: translateY(-1px); }
.contact-na { padding-block: 0 clamp(56px, 8vw, 96px); }

/* ---------- invalplanning ---------- */
.inval-held .telefoons .telefoon { width: min(280px, 72%); transform: none; }

/* ---------- tekstpagina (privacy) ---------- */
.tekst { max-width: 46rem; display: grid; gap: 14px; }
.tekst h2 { font-size: 1.4rem; margin-top: 22px; }
.tekst ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.tekst .zacht { color: var(--ink-soft); }

/* ---------- pilot (appanter.nl/pilot/, voor Herbergiers) ---------- */
.held.pilot { padding-bottom: clamp(48px, 6vw, 72px); }
.held.pilot .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 26px; }
.held.pilot .held-tekst { justify-items: center; max-width: 46rem; gap: 18px; }
.held.pilot .lead { max-width: 40rem; }
.held.pilot .accent { color: var(--rooster); }
.held.pilot .knoppen { justify-content: center; }
.held.pilot .noot { text-align: left; }
.held.pilot .noot svg { color: var(--rooster); }
.pilot-merk { display: inline-flex; align-items: center; gap: 14px; margin: 0; }
.pilot-merk img { height: 44px; width: auto; display: block; }
.pilot-merk span { font: 700 1.3rem/1 var(--font-display); color: var(--rooster); padding-left: 14px; border-left: 1px solid var(--line); }
.film { width: 100%; max-width: 980px; margin: 0; display: grid; gap: 10px; }
.film video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: #0f2a2b; box-shadow: var(--schaduw); display: block; }
.film figcaption { font-size: .9rem; color: var(--ink-soft); }
.aanmeld-raster { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .aanmeld-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.aanmeld-raster .lijst a { color: var(--blue); }
.aanmeldkaart { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--schaduw); min-width: 0; }
.aanmeldkaart form { display: grid; gap: 16px; }
.veld { display: grid; gap: 6px; }
.veld label { font-weight: 600; font-size: .95rem; }
.veld .zacht { font-weight: 400; color: var(--ink-soft); }
.veld input, .veld textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; min-height: 48px; width: 100%; box-sizing: border-box; }
.veld textarea { resize: vertical; }
.veld input:focus, .veld textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.verstopt { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.melding { margin: 0; background: var(--koraal-bg); color: var(--koraal-ink); border-radius: 10px; padding: 12px 14px; font-size: .95rem; }
.melding a { color: inherit; font-weight: 600; }
.knop.breed { width: 100%; justify-content: center; }
.aanmeldkaart .klein { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.aanmeldkaart .klein a { color: inherit; }
.bedankt { display: grid; gap: 10px; justify-items: start; }
.bedankt svg { width: 40px; height: 40px; color: var(--rooster); }
.bedankt:focus { outline: none; }
.tegel-noot { margin: 20px 0 0; font-size: .9rem; color: var(--ink-soft); max-width: 46rem; }

/* ---------- ingang (/): links Appanter Software, rechts Appanter Games ---------- */
:root { --geel: #ffd23f; --font-games: 'Appanter Games', 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; }
body.ingang { background: var(--paper); }
.ingang-main { display: flex; flex-wrap: wrap; min-height: 100vh; min-height: 100svh; }
.helft {
  flex: 1 1 560px; min-width: 0; position: relative; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 40px);
  padding: clamp(28px, 4vw, 44px) max(20px, env(safe-area-inset-right, 0px)) clamp(24px, 3vw, 40px) max(20px, env(safe-area-inset-left, 0px));
}
@media (min-width: 700px) { .helft { padding-inline: clamp(32px, 4vw, 56px); } }
.helft .merk img { width: 46px; height: 46px; }
.helft .woord b { font-size: 1.4rem; }
.helft-midden { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; flex: 1 1 auto; }
.helft-tekst { flex: 1 1 320px; min-width: 0; display: grid; gap: 20px; justify-items: start; }
.helft-tekst .lead { font-size: 1.1rem; max-width: 30rem; }
.helft-voet {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 0;
  font-size: .88rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 18px;
}
.helft-voet a { color: inherit; }

/* software: licht, met de roosterapp */
.helft.software { background: var(--paper); color: var(--ink); }
.helft.software h2 { font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; }
.helft.software h2 .accent { color: var(--blue); }
.helft-beeld { flex: 0 0 auto; display: grid; justify-items: center; gap: 14px; margin: 0 auto; }
.helft-beeld .telefoon { width: 214px; border-width: 9px; border-radius: 34px; }
.labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.labels .badge { text-decoration: none; font-size: .82rem; padding: 4px 12px; }
@media (max-width: 560px) {
  /* op de telefoon alleen het bovenste stuk van het scherm, zodat de gameskant eerder in beeld komt */
  .helft-beeld .telefoon { width: 180px; height: 230px; aspect-ratio: auto; border-width: 6px; border-radius: 24px; }
  .helft-beeld .labels { display: none; }
}

/* games: Appanter-blauw met lowpoly, geel accent, smalle stoere letter */
.helft.games { background: #1563e0 url(/img/lowpoly-blauw.svg) center / cover no-repeat; color: #ffffff; overflow: hidden; }
.helft.games .merk { color: #ffffff; }
.helft.games .merk img { filter: none; }
.helft.games .woord b { font: 800 1.62rem/1 var(--font-games); letter-spacing: .04em; color: #ffffff; }
.helft.games .woord small { font: 700 .86rem/1 var(--font-games); letter-spacing: .42em; color: var(--geel); margin-top: 2px; }
.helft.games .helft-midden { flex-direction: column; align-items: stretch; justify-content: center; gap: 28px; }
.helft.games .helft-tekst { flex: none; }
.pil {
  margin: 0; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4); color: #ffffff;
  font: 600 .8rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}
.helft.games h2 {
  font: 800 clamp(3.4rem, 6.6vw, 5.75rem)/.88 var(--font-games); letter-spacing: 0; text-transform: uppercase; color: #ffffff;
}
.helft.games h2 .accent { color: var(--geel); }
.helft.games .lead { color: #e6efff; }
.knop.geel { background: var(--geel); color: #0f1a2e; box-shadow: 0 14px 30px -12px rgba(5, 25, 70, .6); }
.knop.geel:hover { transform: translateY(-1px); }
.knop.glas { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #ffffff; }
.knop.glas:hover { background: rgba(255, 255, 255, .22); }
.helft.games a:focus-visible { outline-color: var(--geel); }
.collage { position: relative; width: 100%; max-width: 600px; aspect-ratio: 600 / 270; }
.collage img {
  position: absolute; aspect-ratio: 16 / 10; object-fit: cover; border: 5px solid #ffffff; border-radius: 16px;
  box-shadow: 0 28px 50px -20px rgba(5, 25, 70, .75);
}
.collage .c1 { left: 0; top: 9%; width: 55%; transform: rotate(-4deg); }
.collage .c2 { left: 47%; top: 0; width: 50%; transform: rotate(4deg); }
.sticker {
  position: absolute; left: 38%; top: 70%; background: var(--geel); color: #0f1a2e; font-weight: 700; font-size: .88rem;
  padding: 8px 14px; border-radius: 999px; transform: rotate(-5deg); white-space: nowrap;
}
.helft.games .helft-voet { color: #dbe7ff; border-top-color: rgba(255, 255, 255, .3); }
.ingang-voet {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 16px max(20px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--band); color: var(--band-soft); font-size: .84rem;
}
.ingang-voet a { color: var(--band-soft); }