/* Gedeelde basis: lettertypen en kleuren uit de huisstijl van adequateadministraties.nl */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Kleuren uit het brandbook (versie 1.0, oktober 2026): goud, inkt en papier */
  color-scheme: light;
  --bg: #f5f4f0;          /* papier */
  --vlak: #ffffff;
  --vlak-2: #fbfbfa;
  --lijn: rgba(20,18,15,.1);
  --lijn-sterk: rgba(20,18,15,.2);
  --tekst: #14120f;       /* inkt */
  --tekst-2: #4d4a43;     /* grijs, lopende tekst */
  --tekst-3: #6f6a61;     /* kleine tekst */
  --donker: #08080a;      /* nacht */
  --goud: #8a6a15;        /* goudtekst: gouden tekst op licht */
  --goud-licht: #d4af37;  /* accent: lijnen en iconen, niet voor tekst op wit */
  --goud-donker: #a67c1a; /* vinkjes en hoverranden */
  --goud-vlak: #f6efd9;
  --goud-verloop: linear-gradient(135deg, #f7e196 0%, #e2c559 38%, #d4af37 72%, #bb9429 100%);
  --groen: #1f7a4d; --groen-vlak: #e5f4ec;
  --rood: #a5281b;  --rood-vlak: #f8e3e0;
  --blauw: #2457a6; --blauw-vlak: #e7eefa;
  --grijs-vlak: #ecebe6;
  --focus: #8a6a15;
  --radius: 8px;          /* knoppen en velden */
  --radius-kaart: 12px;   /* kaarten */
  --kop: 'Outfit', 'Inter', system-ui, sans-serif;
  --lijf: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--lijf); font-size: 15px; line-height: 1.55; color: var(--tekst); background: var(--bg); }
h1, h2, h3 { font-family: var(--kop); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.02em; color: var(--tekst); }
/* Kop in twee gewichten met gouden leesteken, zoals op de website */
.duo strong { font-weight: 800; letter-spacing: -.035em; }
.duo span { font-weight: 300; letter-spacing: -.03em; }
.duo i { font-style: normal; color: #b8912a; }
.label { display: block; font: 600 11.5px/1.2 var(--kop); letter-spacing: .26em; text-transform: uppercase; color: var(--goud); }
.woordmerk { display: grid; line-height: 1; font-family: var(--kop); }
.woordmerk b { font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; }
.woordmerk small { font-weight: 400; font-size: .55rem; letter-spacing: .32em; margin-top: .3rem; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--goud); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; padding: .5rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--tekst);
  font: 600 14px/1.2 var(--kop); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knop:hover { border-color: var(--goud-donker); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.knop--goud {
  background: var(--goud-verloop); border-color: transparent; color: #14110a;
  box-shadow: 0 8px 30px -8px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.45);
}
.knop--goud:hover { border-color: transparent; filter: brightness(1.04); }
.knop--donker { background: var(--donker); border-color: var(--donker); color: #fff; }
.knop--rood { color: var(--rood); }
.knop--rood:hover { border-color: var(--rood); }
.knop--klein { min-height: 32px; padding: .3rem .7rem; font-size: 13px; }
.knop--tekst { border-color: transparent; background: none; padding-inline: .5rem; }
.knop svg { width: 16px; height: 16px; flex: none; stroke-width: 1.6; }

.veld { display: grid; gap: .3rem; }
.veld > span { font-size: 13px; font-weight: 600; color: var(--tekst-2); }
input, select, textarea {
  font: inherit; color: var(--tekst); background: var(--vlak);
  border: 1px solid var(--lijn-sterk); border-radius: var(--radius);
  padding: .55rem .7rem; width: 100%; min-height: 40px;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--goud-donker); box-shadow: 0 0 0 3px rgba(212,175,55,.2); }

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--concept { background: var(--grijs-vlak); color: var(--tekst-2); }
.badge--verstuurd { background: var(--blauw-vlak); color: var(--blauw); }
.badge--geaccepteerd { background: var(--groen-vlak); color: var(--groen); }
.badge--afgewezen { background: var(--rood-vlak); color: var(--rood); }
.badge--verlopen { background: var(--goud-vlak); color: var(--goud); }
.badge--nieuw { background: var(--goud-vlak); color: var(--goud); }
.badge--in_behandeling { background: var(--blauw-vlak); color: var(--blauw); }
.badge--afgehandeld { background: var(--groen-vlak); color: var(--groen); }
.badge--geen_klant { background: var(--grijs-vlak); color: var(--tekst-2); }

.melding { padding: .75rem 1rem; border-radius: var(--radius); font-size: 14px; }
.melding--fout { background: var(--rood-vlak); color: var(--rood); }
.melding--ok { background: var(--groen-vlak); color: var(--groen); }