/* Appfabriek, site.css. Alles gescoped onder .af-site, geen globale reset. */
/* Self-hosted fonts (OFL), latin subset — covers Dutch, English, French, German. Never load from Google: the privacy rules forbid third-party font requests. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-latin-1.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: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-latin-1.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: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-latin-1.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-3.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-3.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-3.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-5.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-5.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-5.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;
}

.af-site {
  /* ----------  CORE PALETTE  ----------------------------------
     Drawn from a factory floor: molten orange, ink-black,
     blueprint blue, manila paper, signal green.
     ---------------------------------------------------------- */
  --af-orange:       #FF4D14;   /* hi-vis molten orange — primary */
  --af-orange-deep:  #C8330A;   /* pressed / hover                */
  --af-orange-soft:  #FFE4D6;   /* tint backgrounds               */
  --af-orange-text:  #C8330A;   /* orange as SMALL text on bone (4.7:1). Big headlines may use --af-orange */

  --af-blueprint:    #1F4FD4;   /* schematic blue                 */
  --af-blueprint-deep:#143A9E;
  --af-blueprint-soft:#E2EAFB;

  --af-signal:       #1F8A5B;   /* "ready to ship" green          */
  --af-signal-soft:  #DCEFE3;

  --af-warning:      #E8A317;   /* caution amber                  */
  --af-warning-soft: #FCEFCE;

  --af-danger:       #C8331C;   /* halt-the-line red              */
  --af-danger-soft:  #F8DAD2;

  /* ----------  NEUTRALS  --------------------------------------
     Bone-paper light, ink-stamp dark. Slight warm cast.
     ---------------------------------------------------------- */
  --af-bone:         #F4F1EA;   /* page background — manila paper */
  --af-bone-deep:    #ECE7DA;   /* card on bone                   */
  --af-paper:        #FAF8F2;   /* lifted surface                 */
  --af-white:        #FFFFFF;

  --af-ink:          #161413;   /* near-black, warm cast          */
  --af-ink-2:        #2A2624;
  --af-ink-3:        #4A433F;
  --af-ink-4:        #6B635C;   /* secondary text — 5.2:1 on bone (was #7A716A, failed AA) */
  --af-ink-5:        #A89E94;   /* tertiary / placeholder         */
  --af-ink-6:        #C9C0B2;   /* hairline / disabled            */
  --af-ink-7:        #DDD5C6;   /* faint divider                  */

  /* ----------  SEMANTIC FOREGROUND / BACKGROUND  -------------- */
  --af-fg-1: var(--af-ink);
  --af-fg-2: var(--af-ink-3);
  --af-fg-3: var(--af-ink-4);
  --af-fg-4: var(--af-ink-5);
  --af-fg-on-dark: var(--af-bone);
  --af-fg-on-accent: var(--af-ink);   /* hi-vis rule: ink on orange (6:1). Bone on orange fails AA */

  --af-bg-1: var(--af-bone);
  --af-bg-2: var(--af-paper);
  --af-bg-3: var(--af-bone-deep);
  --af-bg-inverse: var(--af-ink);

  --af-border-1: var(--af-ink-7);
  --af-border-2: var(--af-ink-6);
  --af-border-strong: var(--af-ink);

  --af-accent: var(--af-orange);
  --af-accent-fg: var(--af-ink);

  /* ----------  TYPE FAMILIES  --------------------------------- */
  --af-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --af-font-body:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --af-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ----------  TYPE SCALE  ------------------------------------
     Display sizes lean BIG — factory signage energy.
     ---------------------------------------------------------- */
  --af-text-xs:   12px;
  --af-text-sm:   13px;
  --af-text-base: 15px;
  --af-text-md:   17px;
  --af-text-lg:   20px;
  --af-text-xl:   24px;
  --af-text-2xl:  32px;
  --af-text-3xl:  44px;
  --af-text-4xl:  60px;
  --af-text-5xl:  84px;
  --af-text-6xl:  120px;

  --af-leading-tight: 1.05;
  --af-leading-snug:  1.2;
  --af-leading-normal:1.45;
  --af-leading-loose: 1.65;

  --af-tracking-tight:   -0.03em;
  --af-tracking-display: -0.02em;
  --af-tracking-normal:  0;
  --af-tracking-wide:    0.04em;
  --af-tracking-stamp:   0.14em;  /* for ALL-CAPS labels — "STAMPED" feel */

  /* ----------  SPACING  --------------------------------------- */
  --af-space-1: 4px;
  --af-space-2: 8px;
  --af-space-3: 12px;
  --af-space-4: 16px;
  --af-space-5: 24px;
  --af-space-6: 32px;
  --af-space-7: 48px;
  --af-space-8: 64px;
  --af-space-9: 96px;
  --af-space-10:128px;

  /* ----------  RADII  -----------------------------------------
     The factory is mostly square. Radii are subtle.
     ---------------------------------------------------------- */
  --af-radius-0: 0px;
  --af-radius-1: 2px;
  --af-radius-2: 4px;
  --af-radius-3: 8px;
  --af-radius-4: 12px;
  --af-radius-pill: 999px;

  /* ----------  BORDERS  ---------------------------------------
     Borders carry weight here. 1.5px hairlines for cards;
     2px for emphasis; thicker for "stamped" frames.
     ---------------------------------------------------------- */
  --af-stroke-hair: 1px;
  --af-stroke-1:    1.5px;
  --af-stroke-2:    2px;
  --af-stroke-3:    3px;

  /* ----------  SHADOWS  ---------------------------------------
     Hard, slightly-offset shadows — like printed ink, not soft glow.
     ---------------------------------------------------------- */
  --af-shadow-stamp: 3px 3px 0 var(--af-ink);
  --af-shadow-stamp-lg: 6px 6px 0 var(--af-ink);
  --af-shadow-soft: 0 1px 0 rgba(22,20,19,0.06), 0 8px 24px -8px rgba(22,20,19,0.12);
  --af-shadow-lift: 0 2px 0 rgba(22,20,19,0.06), 0 24px 48px -16px rgba(22,20,19,0.18);
  --af-shadow-inset: inset 0 0 0 1.5px var(--af-ink);

  /* ----------  REGISTERS  -------------------------------------
     Two registers share one palette.
     FABRIEK (business / product): square, bordered, stamped.
     MENS (personal / story): softer radius, no borders, looser
     leading, display at weight 500.
     ---------------------------------------------------------- */
  --af-fabriek-radius: var(--af-radius-2);
  --af-fabriek-weight: 600;
  --af-mens-radius:    var(--af-radius-3);
  --af-mens-weight:    500;
  --af-mens-leading:   var(--af-leading-loose);

  /* ----------  LAYOUT  ---------------------------------------- */
  --af-page-max:   1200px;
  --af-page-pad:   24px;
  --af-read-max:   40em;
  --af-section-y:  56px;

  /* ----------  MOTION  ---------------------------------------- */
  --af-ease-mech: cubic-bezier(0.7, 0, 0.2, 1); /* @kind other */     /* mechanical, snappy */
  --af-ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --af-dur-fast:  120ms; /* @kind other */
  --af-dur-base:  220ms; /* @kind other */
  --af-dur-slow:  420ms; /* @kind other */
}
.af-site{margin:0;background:var(--af-bone);color:var(--af-ink);font-family:var(--af-font-body);-webkit-font-smoothing:antialiased}
.af-site *,.af-site *::before,.af-site *::after{box-sizing:border-box}
.af-site a{color:var(--af-ink);text-underline-offset:3px}
.af-site a:hover{color:var(--af-orange-text)}
.af-site :focus-visible{outline:2px solid var(--af-ink);outline-offset:2px}
.af-site img{max-width:100%}
.af-site .af-skip{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.af-site .af-skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;z-index:100;background:var(--af-ink);color:var(--af-bone);padding:12px 16px}
.af-site .af-nav a{display:inline-flex;align-items:center;min-height:44px}
.af-site .af-btn{font-family:var(--af-font-body);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;text-decoration:none;border-radius:2px;border:1.5px solid var(--af-ink);cursor:pointer;box-shadow:3px 3px 0 var(--af-ink);transition:transform 120ms cubic-bezier(.7,0,.2,1),box-shadow 120ms cubic-bezier(.7,0,.2,1),background 120ms}
.af-site .af-btn--sm{font-size:12px;padding:7px 12px;box-shadow:2px 2px 0 var(--af-ink)}
.af-site .af-btn--md{font-size:14px;padding:11px 18px}
.af-site .af-btn--lg{font-size:16px;padding:14px 22px}
.af-site .af-btn--primary{background:var(--af-orange);color:var(--af-ink)}
.af-site .af-btn--primary:hover{background:var(--af-orange-deep);color:var(--af-ink)}
.af-site .af-btn--secondary{background:var(--af-bone);color:var(--af-ink)}
.af-site .af-btn--secondary:hover{background:var(--af-bone-deep);color:var(--af-ink)}
.af-site .af-btn--dark{background:var(--af-ink);color:var(--af-bone)}
.af-site .af-btn--dark:hover{background:var(--af-ink-2);color:var(--af-bone)}
.af-site .af-btn--ondark{box-shadow:3px 3px 0 var(--af-bone)}
.af-site .af-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--af-ink)}
/* Rollen */
.af-site[data-role="guest"] .af-member-only{display:none}
.af-site[data-role="user"] .af-guest-only,.af-site[data-role="admin"] .af-guest-only{display:none}
.af-site .af-login-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500}
/* {{updates_toggle}} */
.af-site .bvg-updates{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.af-site .bvg-updates__form{margin:0}
.af-site .bvg-updates__button{font-family:var(--af-font-body);font-weight:600;font-size:16px;min-height:44px;padding:12px 20px;border-radius:2px;border:1.5px solid var(--af-ink);background:var(--af-orange);color:var(--af-ink);box-shadow:3px 3px 0 var(--af-ink);cursor:pointer}
.af-site .bvg-updates__button:hover{background:var(--af-orange-deep)}
.af-site .bvg-updates__button:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--af-ink)}
.af-site .bvg-updates__button--off{background:transparent;color:inherit;border-color:currentColor;box-shadow:none;font-size:14px;padding:8px 14px}
.af-site .bvg-updates__status{font-family:var(--af-font-mono);font-size:13px;font-weight:600;letter-spacing:.04em}
/* {{account_menu}} */
.af-site .bvg-account{position:relative}
.af-site .bvg-account__toggle{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1.5px solid var(--af-ink);border-radius:2px;font-size:14px;font-weight:500;background:var(--af-bone)}
.af-site .bvg-account__toggle::-webkit-details-marker{display:none}
.af-site .bvg-account__email{font-family:var(--af-font-mono);font-size:12px;color:var(--af-ink-3);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-site .bvg-account__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:flex;flex-direction:column;background:var(--af-paper);border:1.5px solid var(--af-ink);border-radius:4px;box-shadow:0 24px 48px -16px rgba(22,20,19,.18);z-index:20}
.af-site .bvg-account__who{font-family:var(--af-font-mono);font-size:12px;color:var(--af-ink-4);padding:12px 16px;border-bottom:1px solid var(--af-ink-7)}
.af-site .bvg-account__item{display:flex;align-items:center;min-height:44px;padding:0 16px;font-size:15px;text-decoration:none;color:var(--af-ink);background:none;border:0;width:100%;text-align:left;font-family:inherit;cursor:pointer}
.af-site .bvg-account__item:hover{background:var(--af-bone-deep);color:var(--af-ink)}
.af-site .bvg-account__logout-form{margin:0;border-top:1px solid var(--af-ink-7)}
/* {{login_panel}} in dialog */
.af-site .af-login-dialog{margin:auto;width:min(440px, calc(100% - 32px));padding:32px 24px 24px;border:1.5px solid var(--af-ink);border-radius:4px;background:var(--af-bone);color:var(--af-ink);box-shadow:6px 6px 0 var(--af-ink)}
.af-site .af-login-dialog::backdrop{background:rgba(22,20,19,.6)}
.af-site .af-login-close{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--af-ink)}
.af-site .bvg-login{display:flex;flex-direction:column;gap:16px;font-family:var(--af-font-body)}
.af-site .bvg-login p{margin:0}
.af-site .bvg-login__lead{font-family:var(--af-font-display);font-size:24px;font-weight:600;letter-spacing:-0.02em;line-height:1.15;padding-right:32px}
.af-site .bvg-login__error{border:1.5px solid var(--af-danger);color:var(--af-danger);padding:10px 12px;font-size:14px;border-radius:2px}
.af-site .bvg-login__notice,.af-site .bvg-login__intent{border:1.5px solid var(--af-ink);padding:10px 12px;font-size:14px;border-radius:2px;background:var(--af-paper)}
.af-site .bvg-login__providers{display:flex;flex-direction:column;gap:10px}
.af-site .bvg-login__provider-form,.af-site .bvg-login__form,.af-site .bvg-login__inline-form{margin:0}
.af-site .bvg-login__provider{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:0 16px;border:1.5px solid var(--af-ink);border-radius:2px;background:var(--af-paper);color:var(--af-ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.af-site .bvg-login__provider:hover{background:var(--af-bone-deep)}
.af-site .bvg-login__provider svg{width:20px;height:20px;flex:none}
.af-site .bvg-login__divider{display:flex;align-items:center;gap:12px;font-family:var(--af-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--af-ink-4)}
.af-site .bvg-login__divider::before,.af-site .bvg-login__divider::after{content:"";flex:1;border-top:1px solid var(--af-ink-6)}
.af-site .bvg-login__form{display:flex;flex-direction:column;gap:8px}
.af-site .bvg-login__label{font-family:var(--af-font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.af-site .bvg-login__input{min-height:48px;padding:0 14px;border:1.5px solid var(--af-ink);border-radius:4px;background:var(--af-paper);font-family:inherit;font-size:16px;color:var(--af-ink)}
.af-site .bvg-login__input:focus{outline:2px solid var(--af-ink);outline-offset:2px}
.af-site .bvg-login__submit{min-height:48px;margin-top:4px;border:1.5px solid var(--af-ink);border-radius:2px;background:var(--af-ink);color:var(--af-bone);font-family:inherit;font-size:16px;font-weight:600;box-shadow:3px 3px 0 var(--af-orange);cursor:pointer}
.af-site .bvg-login__submit:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--af-orange)}
.af-site .bvg-login__secondary{display:flex;flex-wrap:wrap;gap:4px 20px}
.af-site .bvg-login__link{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;font-family:inherit;font-size:14px;color:var(--af-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:480px){.af-site .af-header nav{gap:0 14px}}