/* Barden — Neuentwurf · Gestaltungssystem
 *
 * Gebunden ist nur die Marke: das Rot #E22004 aus dem Logo und der
 * Firmenname. Alles andere ist neu gesetzt.
 *
 * Zwei Entscheidungen, die den Ton machen:
 *
 * 1. WARME FLÄCHEN statt kaltem Grau. #FAF8F5 und #F2EFEA haben einen
 *    Gelbstich. Ein Familienbetrieb im 45. Jahr in einem Dorf im Hunsrück
 *    ist nicht kühl — kaltes Grau wäre geliehene Konzernsprache.
 *
 * 2. SERIFE ÜBERSCHRIFTEN. Source Serif 4 statt der Open-Sans-Seite, die
 *    jeder andere Makler hat. Serifen tragen Alter und Verbindlichkeit;
 *    genau das ist Bardens Argument. Inter trägt alles Funktionale.
 */

:root {
  /* Marke */
  --bn-rot:        #E22004;
  --bn-rot-dunkel: #B31903;
  --bn-rot-hell:   #FDEEEA;

  /* Text */
  --bn-tinte:      #171A1F;   /* Überschriften */
  --bn-text:       #4A5058;   /* Fließtext */
  --bn-leise:      #7C838D;   /* Beiwerk */

  /* Flächen — warm, nicht grau */
  --bn-papier:     #FFFFFF;
  --bn-warm:       #FAF8F5;
  --bn-warm-2:     #F2EFEA;
  --bn-linie:      #E6E1DA;
  --bn-dunkel:     #1B1E23;

  /* Schrift */
  --bn-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --bn-sans:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Maßstab — 8-pt-Raster */
  --bn-1: 4px;   --bn-2: 8px;   --bn-3: 16px;  --bn-4: 24px;
  --bn-5: 32px;  --bn-6: 48px;  --bn-7: 64px;  --bn-8: 96px;
  --bn-9: 128px;

  /* Textgrößen */
  --bn-display-gross: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  --bn-display-mittel: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  --bn-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --bn-lead:    clamp(1.06rem, 1rem + 0.4vw, 1.25rem);
  --bn-body:    1.0625rem;   /* 17px — bequemer als 16 bei viel Fließtext */
  --bn-klein:   0.9375rem;
  --bn-mini:    0.8125rem;

  --bn-breite:  1240px;
  --bn-schmal:  720px;   /* Lesebreite für Fließtext */
  --bn-rand:    24px;

  --bn-radius:  4px;
  --bn-radius-gross: 10px;

  --bn-ease:     cubic-bezier(0.2, 0.65, 0.3, 1);
  --bn-ease-aus: cubic-bezier(0.33, 1, 0.68, 1);
  --bn-dauer:    180ms;

  --bn-schatten:       0 1px 2px rgba(23, 26, 31, 0.05), 0 4px 16px rgba(23, 26, 31, 0.05);
  --bn-schatten-hoch:  0 2px 4px rgba(23, 26, 31, 0.06), 0 12px 32px rgba(23, 26, 31, 0.09);
}

@media (max-width: 640px) { :root { --bn-rand: 16px; } }