/* Signature webfonts.

   BODY / RUNNING TEXT — real brand font, supplied by the client:
     ABN AMRO Sans, Regular (400) / SemiBold (600) / Bold (700).
     Files: assets/fonts/ABNAMROSans-*.otf — version 1.006.
     There is NO Light weight in the supplied set, so 400 is the lightest
     available for body copy and headings.

   There are no display or script faces: the wordmark is set in ABN AMRO Sans
   at wide tracking, as the client's own material does. */

@font-face {
  font-family: "ABN AMRO Sans";
  src: url("fonts/ABNAMROSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABN AMRO Sans";
  src: url("fonts/ABNAMROSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABN AMRO Sans";
  src: url("fonts/ABNAMROSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "ABN AMRO Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
:root {
  /* Depth comes from tonal steps in the teal ramp, not from shadow.
     Shadows exist only under light objects sitting on dark ground. */
  --shadow-none: none;
  --shadow-raised: 0 1px 2px rgba(1, 22, 26, 0.35);
  --shadow-button: 0 2px 6px rgba(1, 22, 26, 0.30);
  --shadow-overlay: 0 18px 48px rgba(1, 22, 26, 0.55);

  /* Protection gradient — laid over photography before text sits on it */
  --scrim-bottom: linear-gradient(to top, rgba(1, 28, 33, 0.86) 0%, rgba(1, 28, 33, 0.45) 42%, rgba(1, 28, 33, 0) 100%); /* @kind shadow */
  --scrim-left: linear-gradient(to right, rgba(1, 28, 33, 0.80) 0%, rgba(1, 28, 33, 0) 68%); /* @kind shadow */
  --scrim-flat: rgba(1, 28, 33, 0.42);

  /* The chevron watermark that opens every header */
  --chevron-stroke: rgba(255, 255, 255, 0.055);
}
:root {
  /* Teal — the whole world of Signature sits inside this ramp */
  --teal-950: #011c21;
  --teal-900: #02242a;
  --teal-800: #012f36;
  --teal-700: #01333a;
  --teal-600: #023d44;
  --teal-500: #0b4d54;
  --teal-400: #1c6068;
  --teal-300: #35787f;

  /* Gold — the single accent. Wordmark, dates, focus, links. Never a large fill. */
  --gold-600: #c08f0f;
  --gold-500: #e5ab16;
  --gold-400: #f2b62e;
  --gold-300: #f7cd6d;

  /* Neutrals */
  --white: #ffffff;
  --cream-100: #f6f3ec;
  --cream-200: #e8e2d5;
  --grey-400: #9aa9ab;
  --ink-900: #10201f;

  /* Semantic — surfaces */
  --surface-page: var(--teal-900);
  --surface-header: var(--teal-700);
  --surface-band: var(--teal-800);
  --surface-card: var(--teal-700);
  --surface-card-hover: var(--teal-600);
  --surface-rail: var(--teal-950);
  --surface-inverse: var(--white);
  /* Form fields sit two steps up the teal ramp from the page, with white type — light enough
     to read as a field, dark enough to leave pure white to the primary action. */
  --surface-field: var(--teal-500);

  /* Semantic — text */
  --text-primary: var(--white);
  --text-secondary: rgba(255, 255, 255, 0.74);
  --text-tertiary: rgba(255, 255, 255, 0.52);
  --text-accent: var(--gold-500);
  --text-on-light: var(--ink-900);
  --text-on-light-muted: #5a6a69;

  /* Semantic — lines */
  --line-hairline: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --line-accent: var(--gold-500);
  --line-on-light: var(--cream-200);

  /* Semantic — interactive */
  --action-primary-bg: var(--white);
  --action-primary-fg: var(--ink-900);
  --action-primary-bg-hover: var(--cream-100);
  --action-secondary-border: rgba(255, 255, 255, 0.42);
  --action-accent-bg: var(--gold-500);
  --action-accent-fg: var(--teal-900);
  --focus-ring: var(--gold-400);

  /* Semantic — status (form feedback only; no colourful status system in the source) */
  --status-error: #c9553d;
  --status-success: #3f7d63;
}
:root {
  /* Scale — 1.25 ratio, rounded to whole px. Body sits at 16/1.65. */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 34px;
  --text-3xl: 44px;
  --text-4xl: 56px;

  --leading-tight: 1.15;
  --leading-snug: 1.28;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ABN AMRO Sans ships Regular/SemiBold/Bold only — there is no Light face,
     so the "light" role resolves to 400. Never set 300 on body text: the browser
     would synthesise it. */
  --weight-light: 400;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Tracking — the wordmark and eyebrow labels are the only widely tracked type */
  --tracking-wordmark: 0.28em;
  --tracking-eyebrow: 0.18em;
  --tracking-tight: -0.01em;
  --tracking-none: 0;

  /* Named roles */
  --type-wordmark: var(--weight-regular) var(--text-3xl) / 1 var(--font-body);
  --type-page-title: var(--weight-light) var(--text-2xl) / var(--leading-tight) var(--font-body);
  --type-section-title: var(--weight-light) var(--text-xl) / var(--leading-snug) var(--font-body);
  --type-card-title: var(--weight-light) var(--text-lg) / var(--leading-snug) var(--font-body);
  --type-body: var(--weight-regular) var(--text-base) / var(--leading-relaxed) var(--font-body);
  --type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-body);
  --type-eyebrow: var(--weight-semibold) var(--text-xs) / 1.2 var(--font-body);
  --type-date: var(--weight-light) var(--text-lg) / 1 var(--font-body);
  --type-button: var(--weight-semibold) var(--text-sm) / 1 var(--font-body);
}
:root {
  /* 4px base. Signature layouts breathe: section rhythm is 40-72px. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;

  /* Layout */
  --page-max: 1160px;
  --page-gutter: 32px;
  --page-gutter-sm: 20px;
  --section-gap: var(--space-8);
  --card-pad: var(--space-7);
  --card-pad-sm: var(--space-5);
  --rail-width: 260px;
  --offer-tile-width: 76px;
  --offer-tile-height: 38px;
  /* The banner artwork is 603x106 — ratio 5.69:1. "full" follows that ratio;
     "compact" crops to a fixed height. */
  --banner-ratio: 5.6887; /* @kind other */
}
:root {
  /* Quiet, unhurried. Fades and small translations only — no bounce, no scale-up. */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 0.6, 0.28, 1); /* @kind other */
  --duration-fast: 140ms; /* @kind other */
  --duration-base: 240ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-reveal: 720ms; /* @kind other */

  --transition-hover: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  --transition-surface: background-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out);
}
:root {
  /* Signature is a squared-off brand. Nothing is pill-shaped; nothing is fully round
     except the small offer thumbnails, which stay square too. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-field: 3px;
  --radius-card: 0;
  --radius-button: 3px;
  --radius-thumb: 2px;
}

/* Minimal element defaults so specimen cards and kits share a baseline. */
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font: var(--type-body);
  text-wrap: pretty;
}

body{min-height:100vh;display:flex;flex-direction:column}
#root{display:flex;flex-direction:column;min-height:100vh}

h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-light); }
p { margin: 0; }
a { color: var(--text-accent); text-decoration: none; border-bottom: 1px solid rgba(229, 171, 22, 0.4); transition: var(--transition-hover); }
a:hover { color: var(--gold-300); border-bottom-color: var(--gold-300); }

@media (min-width: 768px) {
  a[href^="tel:"] {
    border:0;
	transition:none;
	color:#fff;
	cursor:default;
  }
}
img { display: block; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: rgba(229, 171, 22, 0.32); }
/* Light fields (the unlock panel) take a dark placeholder; the sign-up form's fields sit on
   --teal-500 with white type, so they take a light one. Getting this backwards makes the
   placeholder invisible. */
input::placeholder, textarea::placeholder { color: #7d8786; }
[data-sig-form]:not([data-sig-form="login"]) input::placeholder, [data-sig-form] textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
select option { background: var(--teal-700); color: var(--white); }

/* Signature layouts are designed at 1240px.

   The event row is the layout signature: photograph BESIDE the calendar date and title,
   three of them directly under the welcome band. It must stay horizontal — stacking it
   turns each event into one tall photograph and the page stops reading as a list.
   So the rail drops below the events first (<=1080px), and the row itself only stacks on
   genuinely narrow screens (<=700px).

   The 1100px switch is chosen against real devices: laptops are 1280 or wider and keep
   the offers rail beside the events; an iPad in landscape (1024), in portrait (768) and
   every phone fall below it and stack. */

@media (max-width: 1100px) {
  /* Offers rail moves under the events; event page stacks. The unlock panel keeps its
     narrow image column beside the text at every width — stacked, the photograph reads as
     a hero and overpowers the events above it. */
  [data-sig-grid="home"],
  [data-sig-grid="event-hero"],
  [data-sig-grid="event-detail"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Stacked, the column governs the width and a fixed height governs the crop. Pairing
     aspect-ratio with max-height makes the ratio derive the width instead, leaving a gap
     beside the photograph. */
  [data-sig-grid="event-hero"] > figure {
    width: 100% !important;
    aspect-ratio: auto !important;
    height: 380px !important;
  }
}
@media (max-width: 860px) {
  /* The login text sits beside the photograph only while there is room for both; below that
     the photograph belongs to the banner alone and the text takes the full column. */
  [data-sig-grid="login"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-sig-hero-spacer="login"] { display: none !important; }
  [data-sig-hero-photo="login"] { height: 240px !important; }
  /* Give the text more of the row before giving up on the row. */
  [data-sig-grid="event-card"] { grid-template-columns: minmax(0, 36%) minmax(0, 64%) !important; }
}
@media (max-width: 760px) {
  [data-sig-grid="programme"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 700px) {
  [data-sig-grid="event-card"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-sig-grid="event-card"] > figure {
    width: 100% !important;
    aspect-ratio: auto !important;
    height: 240px !important;
  }
  [data-sig-grid="signup-head"],
  [data-sig-grid="benefit"],
  [data-sig-grid="contact-intro"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  [data-sig-form] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-sig-form] > * { grid-column: auto !important; }
}

.textblok{
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 52ch;
}
.textblok p{
	font: var(--type-body); 
	color: var(--text-secondary);
}

.textblok2{
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 100ch;
	padding-top: var(--space-9);
}
.textblok2 p{
  font: var(--type-body-sm);
  color: var(--text-secondary);
}
.textblok2 h2{
	font-size: var(--text-md); 
	line-height: auto; 
	color: var(--text-primary);
	margin-top:12px;
}
.textblok3 p{
	font: var(--type-body); 
	color: var(--text-secondary);
}
.textblok3 h2{
	font-size: var(--text-md); 
	line-height: auto; 
	color: var(--text-primary);
	margin-top:12px;
}

.textblok4{
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 100ch;
	padding-top: var(--space-9);
}
.textblok4 p{
	font: var(--type-body); 
  color: var(--text-secondary);
}
.textblok4 h2{
	font-size: var(--text-md); 
	line-height: auto; 
	color: var(--text-primary);
	margin-top:12px;
}

.practisch p{font: var(--type-body); color: var(--text-primary);padding-bottom:6px}
.practisch p strong{font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-tertiary);}
.practisch ul{margin:0;padding:0 0 6px 18px}
.practisch ul li{margin:0;padding:0 0 0 0px}

.GenericForm{display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); align-items: start;}
.GenericForm .coldivide{display: flex; flex-direction: column; min-width: 0px;}
.GenericForm .colfull{display: flex; flex-direction: column; min-width: 0px; grid-column: 1 / -1;}
.GenericForm .formfooter{grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2);}
.GenericForm .formfooter .colbutton{display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;}
.GenericForm .label1{display: block; font: var(--type-body-sm); color: var(--text-primary); margin-bottom: var(--space-2);}
.GenericForm .label1 .span{color: var(--text-secondary);}
.GenericForm .label2{display: block; font: var(--type-body-sm); color: var(--text-primary); margin-bottom: var(--space-2);position:relative;padding-left:30px}
.GenericForm .label2 .span{color: var(--text-secondary);}
.GenericForm .label2 input{position:absolute;left:0;top:0}
.GenericForm .input1{width: 100%; background: var(--surface-field); color: var(--text-primary); font: var(--type-body-sm); border-color: var(--line-hairline); border-radius: var(--radius-field); padding: 12px 14px;}
.GenericForm .submit{display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-sm); line-height: ; letter-spacing: 0.01em; border-radius: var(--radius-button); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: var(--transition-hover); white-space: nowrap; padding: 12px 22px; background: var(--action-primary-bg); color: var(--action-primary-fg); box-shadow: var(--shadow-button); opacity: 1;}
.GenericForm .textarea1{width: 100%; background: var(--surface-field); color: var(--text-primary); font: var(--type-body-sm); border: 1px solid var(--line-hairline); border-radius: var(--radius-field); padding: 12px 14px; resize: vertical;}

#homebig{display:none}
#homesmall{display:block}

@media (min-width: 861px) { 
	#homesmall{display:none}
	#homebig{display:block}
}

.GenericForm .inputfooter{width: 100%; color: var(--text-primary); font: var(--type-body-sm); border-color: var(--line-hairline); border-radius: var(--radius-field); padding: 12px 0;}

.programma{font: var(--type-body-sm); color: var(--text-secondary); max-width:620px}
.programma *{font: var(--type-body-sm); color: var(--text-secondary)}
.programma p{padding: 0 0 21px 0}

.programma div strong{font: var(--type-body-sm); color: var(--gold-500); padding: 8px 0;display:block}
.programma h2{font-size: var(--text-md); color: var(--text-primary);padding:0 0 9px 0}


.binnenkorth2{font: var(--text-base); color: var(--gold-500);text-transform:uppercase;letter-spacing:3px;display:flex;margin:24px 0 12px 0;line-height:24px;justify-content: flex-start;}
.binnenkorth2 span{margin-right:20px}
.binnenkorth2::after {content: ""; height: 1px; background: var(--gold-500); flex: 1; margin-top:12px;}

.binnenkort{background: var(--surface-card);}
.binnenkort figure{display: flex; justify-content: center; align-items: center; margin: 0; min-width: 0;aspect-ratio: auto; overflow: hidden; border-radius: var(--radius-thumb); background: var(--teal-950); width: 100%; min-height: 180px;height:240px}
.binnenkort figure img{width: 100%; height: 100%; object-fit: cover;}
.binnenkort h3{font: var(--type-card-title); color: var(--text-primary);padding:0 0 8px 0;}
.binnenkort .txt{padding:24px 24px 0 24px;display:flex;  align-items: center; justify-content: flex-start;}
.binnenkort .txt p{font: var(--type-body-sm); color: var(--text-secondary);padding: 0 0 24px 0;}

@media (min-width: 701px) { 
	.binnenkort{display:flex}
	.binnenkort figure{max-width:150px;height:auto}
	.binnenkort .txt{flex:1}
}

.event{background: var(--surface-card);}
.event figure{margin: 0; overflow: hidden; background: var(--teal-950); width: 100%;height:240px}
.event figure img{width: 100%; height: 100%; object-fit: cover;}
.event h3{font: var(--type-card-title); color: var(--text-primary);padding:0 0 8px 0;}
.event .txt{padding:0;display:flex;  align-items: center; justify-content: flex-start;}

@media (min-width: 701px) { 
	.event{display:flex;}
	.event figure{width:32%;height:auto}
	.event figure img{width:100%}
	.event .txt{flex:1}
	.event:nth-child(even) {
		flex-direction: row-reverse;
	}
}
@media (min-width: 861px) { 
	.event{display:flex}
	.event figure{width:36%}
	.event .txt{flex:1}
}


/*breadcrumb*/
.breadcrumb{display:none}

  .pw-wrapper {
    position: relative;
    width: 100%;
                  flex: 1 1 260px;
                  min-width: 0px;
  }

  .pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    border: 0;
    background: none;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
  }