/* ============================================================
   HISTORISCHES ZENTRUM REMSCHEID — Brand-Tokens
   Echte Farben aus dem Screendesign. An theme-tokens.css anhaengen.
   Drei Haus-Signaturfarben: Magenta (Haus Cleff), Blau (Werkzeugmuseum),
   Gold (Stadtarchiv). Basis-Brand nutzt alle drei.
   ============================================================ */

@import url("https://use.typekit.net/vnd8mcq.css");
:root {
  --ds-color-rem-magenta-50:#FCF3F7; --ds-color-rem-magenta-100:#F9D1E4; --ds-color-rem-magenta-200:#F5ACCD; --ds-color-rem-magenta-300:#EE7FAC; --ds-color-rem-magenta-400:#E3568C; --ds-color-rem-magenta-500:#D3376E; --ds-color-rem-magenta-600:#B02659; --ds-color-rem-magenta-700:#8A1B45; --ds-color-rem-magenta-800:#641230; --ds-color-rem-magenta-900:#4C0B1F;
  --ds-color-rem-blue-50:#ECF0FF; --ds-color-rem-blue-100:#DDE4FF; --ds-color-rem-blue-200:#C0C8FF; --ds-color-rem-blue-300:#9A9FFF; --ds-color-rem-blue-400:#7B7DFF; --ds-color-rem-blue-500:#5F61FF; --ds-color-rem-blue-600:#4547D9; --ds-color-rem-blue-700:#33348F; --ds-color-rem-blue-800:#26265F; --ds-color-rem-blue-900:#1A1650;
  --ds-color-rem-gold-50:#FFFDF4; --ds-color-rem-gold-100:#FFF4DC; --ds-color-rem-gold-200:#FFD7A6; --ds-color-rem-gold-300:#F5B865; --ds-color-rem-gold-400:#E19E33; --ds-color-rem-gold-500:#CE8208; --ds-color-rem-gold-600:#A66908; --ds-color-rem-gold-700:#7E5006; --ds-color-rem-gold-800:#693800; --ds-color-rem-gold-900:#4A2800;
}

[data-brand="remscheid"] {
  --ds-color-background-canvas:var(--ds-color-neutral-0);
  --ds-color-background-surface:var(--ds-color-neutral-50);
  --ds-color-background-surface-raised:var(--ds-color-neutral-0);
  --ds-color-background-surface-sunken:var(--ds-color-neutral-100);
  --ds-color-background-inverse:var(--ds-color-neutral-900);
  --ds-color-background-overlay:#0A0C0EB3;
  --ds-color-text-default:var(--ds-color-neutral-900);
  --ds-color-text-muted:var(--ds-color-neutral-700);
  --ds-color-text-subtle:var(--ds-color-neutral-500);
  --ds-color-text-disabled:var(--ds-color-neutral-400);
  --ds-color-text-on-emphasis:var(--ds-color-neutral-0);
  --ds-color-text-accent:var(--ds-color-rem-magenta-700);
  --ds-color-text-success:var(--ds-color-green-700);
  --ds-color-text-warning:var(--ds-color-yellow-700);
  --ds-color-text-danger:var(--ds-color-red-700);
  --ds-color-text-link:var(--ds-color-rem-magenta-700);
  --ds-color-text-link-hover:var(--ds-color-rem-magenta-800);
  --ds-color-border-subtle:var(--ds-color-neutral-150);
  --ds-color-border-default:var(--ds-color-neutral-200);
  --ds-color-border-strong:var(--ds-color-neutral-400);
  --ds-color-border-accent:var(--ds-color-rem-magenta-600);
  --ds-color-border-focus:var(--ds-color-rem-magenta-500);
  --ds-color-border-success:var(--ds-color-green-500);
  --ds-color-border-warning:var(--ds-color-yellow-500);
  --ds-color-border-danger:var(--ds-color-red-500);
  --ds-color-action-primary-default:var(--ds-color-rem-magenta-600);
  --ds-color-action-primary-hover:var(--ds-color-rem-magenta-700);
  --ds-color-action-primary-pressed:var(--ds-color-rem-magenta-800);
  --ds-color-action-primary-disabled:var(--ds-color-neutral-200);
  --ds-color-action-secondary-default:var(--ds-color-neutral-0);
  --ds-color-action-secondary-hover:var(--ds-color-neutral-50);
  --ds-color-action-secondary-pressed:var(--ds-color-neutral-100);
  --ds-color-action-secondary-disabled:var(--ds-color-neutral-50);
  --ds-color-action-tertiary-default:#00000000;
  --ds-color-action-tertiary-hover:var(--ds-color-neutral-100);
  --ds-color-action-tertiary-pressed:var(--ds-color-neutral-150);
  --ds-color-action-tertiary-disabled:#00000000;
  --ds-color-action-destructive-default:var(--ds-color-red-600);
  --ds-color-action-destructive-hover:var(--ds-color-red-700);
  --ds-color-action-destructive-pressed:var(--ds-color-red-900);
  --ds-color-action-destructive-disabled:var(--ds-color-neutral-200);
  --ds-color-status-success-subtle:var(--ds-color-green-50);
  --ds-color-status-success-default:var(--ds-color-green-500);
  --ds-color-status-success-strong:var(--ds-color-green-700);
  --ds-color-status-warning-subtle:var(--ds-color-yellow-50);
  --ds-color-status-warning-default:var(--ds-color-yellow-500);
  --ds-color-status-warning-strong:var(--ds-color-yellow-700);
  --ds-color-status-danger-subtle:var(--ds-color-red-50);
  --ds-color-status-danger-default:var(--ds-color-red-500);
  --ds-color-status-danger-strong:var(--ds-color-red-700);
  --ds-color-status-info-subtle:var(--ds-color-info-50);
  --ds-color-status-info-default:var(--ds-color-info-500);
  --ds-color-status-info-strong:var(--ds-color-info-700);
  --ds-font-family-display:'mendl-sans-dusk',system-ui,sans-serif;
  --ds-font-family-body:'mendl-sans-dusk',system-ui,sans-serif;
  /* Mendl Sans Dusk hat nur 400 + 700 -> keine 500/600 verwenden (Faux-Bold vermeiden) */
  --ds-font-weight-heading:700;
  --ds-font-weight-body:400;
  /* M3-Rollen */
  --md-sys-color-primary:var(--ds-color-rem-magenta-600);
  --md-sys-color-on-primary:var(--ds-color-neutral-0);
  --md-sys-color-primary-container:var(--ds-color-rem-magenta-100);
  --md-sys-color-on-primary-container:var(--ds-color-rem-magenta-900);
  --md-sys-color-primary-fixed:var(--ds-color-rem-magenta-100);
  --md-sys-color-primary-fixed-dim:var(--ds-color-rem-magenta-200);
  --md-sys-color-on-primary-fixed:var(--ds-color-rem-magenta-900);
  --md-sys-color-on-primary-fixed-variant:var(--ds-color-rem-magenta-700);
  --md-sys-color-secondary:var(--ds-color-rem-blue-600);
  --md-sys-color-on-secondary:var(--ds-color-neutral-0);
  --md-sys-color-secondary-container:var(--ds-color-rem-blue-100);
  --md-sys-color-on-secondary-container:var(--ds-color-rem-blue-900);
  --md-sys-color-secondary-fixed:var(--ds-color-rem-blue-100);
  --md-sys-color-secondary-fixed-dim:var(--ds-color-rem-blue-200);
  --md-sys-color-on-secondary-fixed:var(--ds-color-rem-blue-900);
  --md-sys-color-on-secondary-fixed-variant:var(--ds-color-rem-blue-700);
  --md-sys-color-tertiary:var(--ds-color-rem-gold-600);
  --md-sys-color-on-tertiary:var(--ds-color-neutral-0);
  --md-sys-color-tertiary-container:var(--ds-color-rem-gold-100);
  --md-sys-color-on-tertiary-container:var(--ds-color-rem-gold-900);
  --md-sys-color-tertiary-fixed:var(--ds-color-rem-gold-100);
  --md-sys-color-tertiary-fixed-dim:var(--ds-color-rem-gold-200);
  --md-sys-color-on-tertiary-fixed:var(--ds-color-rem-gold-900);
  --md-sys-color-on-tertiary-fixed-variant:var(--ds-color-rem-gold-700);
  --md-sys-color-error:var(--ds-color-red-600);
  --md-sys-color-on-error:var(--ds-color-neutral-0);
  --md-sys-color-error-container:var(--ds-color-red-100);
  --md-sys-color-on-error-container:var(--ds-color-red-900);
  --md-sys-color-error-fixed:var(--ds-color-red-100);
  --md-sys-color-error-fixed-dim:var(--ds-color-red-200);
  --md-sys-color-on-error-fixed:var(--ds-color-red-900);
  --md-sys-color-on-error-fixed-variant:var(--ds-color-red-700);
  --md-sys-color-background:var(--ds-color-neutral-0);
  --md-sys-color-on-background:var(--ds-color-neutral-900);
  --md-sys-color-surface:var(--ds-color-neutral-0);
  --md-sys-color-on-surface:var(--ds-color-neutral-900);
  --md-sys-color-surface-variant:var(--ds-color-neutral-100);
  --md-sys-color-on-surface-variant:var(--ds-color-neutral-700);
  --md-sys-color-surface-dim:var(--ds-color-neutral-150);
  --md-sys-color-surface-bright:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-lowest:var(--ds-color-neutral-0);
  --md-sys-color-surface-container-low:var(--ds-color-neutral-50);
  --md-sys-color-surface-container:var(--ds-color-neutral-100);
  --md-sys-color-surface-container-high:var(--ds-color-neutral-150);
  --md-sys-color-surface-container-highest:var(--ds-color-neutral-200);
  --md-sys-color-outline:var(--ds-color-neutral-400);
  --md-sys-color-outline-variant:var(--ds-color-neutral-200);
  --md-sys-color-inverse-surface:var(--ds-color-neutral-900);
  --md-sys-color-inverse-on-surface:var(--ds-color-neutral-50);
  --md-sys-color-inverse-primary:var(--ds-color-rem-magenta-300);
  --md-sys-color-scrim:var(--ds-color-neutral-1000);
  --md-sys-color-shadow:var(--ds-color-neutral-1000);
  --md-sys-color-surface-tint:var(--ds-color-rem-magenta-600);
}

/* Haus-Akzente: pro Seite data-venue setzen, dann wird primary die Hausfarbe */
[data-venue="werkzeugmuseum"] { /* Werkzeugmuseum · Blauviolett */
  --ds-color-action-primary-default:var(--ds-color-rem-blue-600);
  --ds-color-action-primary-hover:var(--ds-color-rem-blue-700);
  --ds-color-action-primary-pressed:var(--ds-color-rem-blue-900);
  --ds-color-text-accent:var(--ds-color-rem-blue-600);
  --ds-color-text-link:var(--ds-color-rem-blue-600);
  --ds-color-border-accent:var(--ds-color-rem-blue-600);
  --md-sys-color-primary:var(--ds-color-rem-blue-600);
  --md-sys-color-primary-container:var(--ds-color-rem-blue-100);
  --md-sys-color-on-primary-container:var(--ds-color-rem-blue-900);
  --ds-venue-accent:var(--ds-color-rem-blue-600);
  --ds-venue-surface:var(--ds-color-rem-blue-50);
}
[data-venue="haus-cleff"] { /* Haus Cleff · Magenta */
  --ds-color-action-primary-default:var(--ds-color-rem-magenta-600);
  --ds-color-action-primary-hover:var(--ds-color-rem-magenta-700);
  --ds-color-action-primary-pressed:var(--ds-color-rem-magenta-900);
  --ds-color-text-accent:var(--ds-color-rem-magenta-600);
  --ds-color-text-link:var(--ds-color-rem-magenta-600);
  --ds-color-border-accent:var(--ds-color-rem-magenta-600);
  --md-sys-color-primary:var(--ds-color-rem-magenta-600);
  --md-sys-color-primary-container:var(--ds-color-rem-magenta-100);
  --md-sys-color-on-primary-container:var(--ds-color-rem-magenta-900);
  --ds-venue-accent:var(--ds-color-rem-magenta-600);
  --ds-venue-surface:var(--ds-color-rem-magenta-50);
}
[data-venue="stadtarchiv"] { /* Stadtarchiv · Gold */
  --ds-color-action-primary-default:var(--ds-color-rem-gold-700);
  --ds-color-action-primary-hover:var(--ds-color-rem-gold-800);
  --ds-color-action-primary-pressed:var(--ds-color-rem-gold-900);
  --ds-color-text-accent:var(--ds-color-rem-gold-700);
  --ds-color-text-link:var(--ds-color-rem-gold-700);
  --ds-color-border-accent:var(--ds-color-rem-gold-700);
  --md-sys-color-primary:var(--ds-color-rem-gold-700);
  --md-sys-color-primary-container:var(--ds-color-rem-gold-100);
  --md-sys-color-on-primary-container:var(--ds-color-rem-gold-900);
  --ds-venue-accent:var(--ds-color-rem-gold-700);
  --ds-venue-surface:var(--ds-color-rem-gold-50);
}