/* Zentrale Design-Tokens. Layout nach dem Prototyp „landingpage (1).html“,
   Farben und Schrift nach dem BNI Brand Standards Manual (Juni 2020).
   Farben, Schriftgrößen und Abstände der Seite werden ausschließlich hier geändert. */
:root {
  /* BNI-Markenfarben (Brand Standards Manual S. 6) */
  --bni-red: #cf2030;          /* BNI Red, Pantone 186 */
  --sterling-grey: #c8c8c8;    /* Sterling Grey, Cool Grey 3 */
  --sterling-light: #f2f2f2;   /* Sterling Light Grey */
  --granite-grey: #64666a;     /* Granite Grey, Cool Grey 10 */
  --power-black: #000000;      /* Power Black */
  --true-white: #ffffff;       /* True White */

  /* Verwendung auf der Seite – nur Markenfarben */
  --red: var(--bni-red);
  --red-hover: var(--power-black);
  --red-light: var(--bni-red);
  --red-eyebrow-dark: var(--sterling-grey);
  --dark: var(--power-black);
  --dark-section: var(--power-black);
  --footer-bg: var(--power-black);
  --grey: var(--granite-grey);
  --grey-text: var(--granite-grey);
  --grey-soft: var(--sterling-grey);
  --light: var(--sterling-light);
  --light-section: var(--sterling-light);
  --line: #e4e4e4;             /* Sterling Grey, 50 % Deckkraft auf Weiß */
  --line-strong: var(--sterling-grey);
  --white: var(--true-white);
  --text-on-dark: var(--sterling-grey);
  --text-on-dark-muted: var(--sterling-grey);

  /* Funktionsfarben (nicht im Manual definiert, nur für Formular-Rückmeldungen und Tastaturfokus) */
  --error: #a91725;
  --success-bg: #e8f6ed;
  --success-text: #267a45;
  --notice-bg: #fff6df;
  --notice-text: #5a4310;
  --notice-border: #d9b047;
  --focus: #1769aa;

  /* Schrift: Helvetica Neue (offiziell), Arial als zugelassener Ersatz; nur Regular und Bold */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight-bold: 700;
  --h1-size: clamp(50px, 6vw, 91px);
  --h1-size-mobile: clamp(28px, 9.6vw, 44px);
  --h2-size: clamp(34px, 4vw, 57px);
  --h2-size-mobile: 34px;
  --h3-size: 21px;
  --text-lead: 18px;
  --meta-value-size: clamp(18px, 1.8vw, 23px);
  --text-base: 15px;
  --text-small: 15px;
  --text-xs: 13px;
  --text-label: 12px;

  /* Layout & Abstände */
  --content-width: 1200px;
  --gutter: 30px;
  --gutter-mobile: 20px;
  --header-height: 92px;
  --header-height-mobile: 76px;
  --logo-width: 130px;         /* Logo inkl. Chapter-Name darunter */
  --logo-width-mobile: 112px;
  --logo-safe-area: 16px;      /* Schutzzone „a“ um das Logo (Manual S. 5) */
  --section-space: 100px;
  --section-space-mobile: 65px;
  --hero-min-height: 630px;
  --radius: 3px;
  --shadow-card: 0 15px 50px #00000010;
  --shadow-photo: 0 25px 70px #0005;
  --super-graphic-width: clamp(150px, 24vw, 320px);
}