/* Gedeelde klantomgeving: dezelfde leesrichting en typografie op elke stap.
 * Jost voor koppen én tekst komt uit de actuele website (14 september 2026).
 * Alleen .kt-account gebruikt deze laag; de verkoopapp houdt haar eigen thema.
 */
.kt-account {
  --kt-font: "Jost", "Helvetica Neue", Arial, sans-serif;
  --kt-content-max: 1200px;
  --kt-gutter: 20px;
  --v6-font-display: var(--kt-font);
  --v6-font-body: var(--kt-font);
  --md-sys-typescale-font: var(--kt-font);
  --q-font: var(--kt-font);
  --quote-font: var(--kt-font);
  --c-font: var(--kt-font);

  /* De oudere bestel- en planningscomponenten gebruiken deze M3-rollen.
     Ze krijgen dezelfde accountkleuren, zonder globale CRM-tokens te wijzigen. */
  --md-sys-color-primary: var(--v6-accent);
  --md-sys-color-on-primary: var(--v6-surface);
  --md-sys-color-primary-container: var(--v6-accent-soft);
  --md-sys-color-on-primary-container: var(--v6-on-accent-soft);
  --md-sys-color-surface: var(--v6-bg);
  --md-sys-color-surface-container: var(--v6-bg);
  --md-sys-color-surface-container-lowest: var(--v6-surface);
  --md-sys-color-surface-container-low: var(--v6-surface-alt);
  --md-sys-color-surface-container-high: var(--v6-bg-canvas);
  --md-sys-color-surface-container-highest: var(--v6-border);
  --md-sys-color-on-surface: var(--v6-text);
  --md-sys-color-on-surface-variant: var(--v6-text-muted);
  --md-sys-color-outline: var(--v6-line-strong);
  --md-sys-color-outline-variant: var(--v6-border);
  --md-sys-color-tertiary: var(--v6-success);
  --md-sys-color-on-tertiary: var(--v6-surface);
  --md-sys-color-tertiary-container: var(--v6-success-bg);
  --md-sys-color-on-tertiary-container: var(--v6-on-success);
  --md-sys-color-error: var(--v6-on-danger);
  --md-sys-color-error-container: var(--v6-danger-bg);
  --md-sys-color-on-error-container: var(--v6-on-danger);

  --q-bg: var(--v6-bg);
  --q-surface: var(--v6-surface);
  --q-surface-2: var(--v6-surface-alt);
  --q-text: var(--v6-text);
  --q-muted: var(--v6-text-muted);
  --q-primary: var(--v6-accent);
  --q-primary-c: var(--v6-accent-soft);
  --q-on-prim: var(--v6-surface);
  --q-on-prim-c: var(--v6-on-accent-soft);
  --q-outline: var(--v6-border);
  --quote-bg: var(--v6-bg);
  --quote-surface: var(--v6-surface);
  --quote-surface-2: var(--v6-surface-alt);
  --quote-text: var(--v6-text);
  --quote-muted: var(--v6-text-muted);
  --quote-primary: var(--v6-accent);
  --quote-primary-c: var(--v6-accent-soft);
  --quote-on-prim: var(--v6-surface);
  --quote-on-prim-c: var(--v6-on-accent-soft);
  --quote-outline: var(--v6-border);

  font-family: var(--kt-font);
  font-weight: 400;
  background: var(--v6-bg);
  color: var(--v6-text);
  line-height: 1.55;
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.kt-account.kt-width-form { --kt-content-max: 620px; }
.kt-account.kt-width-reading { --kt-content-max: 760px; }
.kt-account.kt-width-medium { --kt-content-max: 900px; }

.kt-account *, .kt-account *::before, .kt-account *::after { box-sizing: border-box; }
.kt-account :is(button, input, select, textarea) { font-family: var(--kt-font); }
.kt-account :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--kt-font);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.kt-account .kt-container, .kt-account .kt-nav-inner, .kt-account .footer-inner {
  width: 100%;
  max-width: var(--kt-content-max);
  margin-inline: auto;
  padding-inline: var(--kt-gutter);
}
.kt-account .header-inner { min-height: 64px; padding-block: 12px; }
.kt-account .kt-nav-inner { min-width: 0; }
/* De accountheader blijft gelijk, ook boven een smaller formulier. */
.kt-account .kt-nav-account .kt-nav-inner { max-width: 1200px; }
.kt-account .kt-nav-merk { min-width: 0; }
.kt-account .kt-nav-merk span { overflow-wrap: anywhere; }
.kt-account .kt-nav-merk img { flex: none; }
.kt-account .kt-nav-menu { max-width: calc(100vw - 2 * var(--kt-gutter)); }
.kt-account :is(.header-inner, .kt-nav-inner) :is(.logo-name, .logo, .kt-nav-merk) {
  font-family: var(--kt-font);
  font-weight: 400;
}

@media (min-width: 900px) {
  .kt-account { --kt-gutter: 32px; }
  .kt-account .header-inner { min-height: 72px; }
}
@media (max-width: 380px) {
  .kt-account .kt-nav-merk span { font-size: 13px; }
}