/* ============================================================
   BÖRGER ERLEBEN — Design System
   Tokens: colors, typography, spacing, radii, shadows.
   Brand: Pink→Orange Verlauf · Gelb · Blau · Rot (Logo)
   Type:  Poppins (Head/UI) · Source Sans 3 (Body) · Montserrat (Script-Italic)
   ============================================================
   Load local fonts before this file:
   <link rel="stylesheet" href="fonts/fonts.css">
   ============================================================ */

:root{
  /* ---------- BRAND COLORS ---------- */
  --be-pink:#E30613;        /* Verlauf start — Rot, Wärme, Leidenschaft */
  --be-orange:#FF5A00;      /* Verlauf end — Energie, Bewegung */
  --be-yellow:#FFB400;      /* Akzent — Optimismus, Lebensfreude */
  --be-blue:#0D47A1;        /* Akzent — Vertrauen, Stabilität */
  --be-green:#1FA85A;       /* Verbindung / Erfolg (Kettenglied-Wert) */
  --be-red:#E30613;         /* Logo + Text-Akzent (das Zeichen) */

  /* the signature gradient — the single most recognisable brand element */
  --be-grad:linear-gradient(120deg,#E30613 0%,#FF5A00 100%);
  --be-grad-2:linear-gradient(120deg,#E30613,#FF5A00);  /* 2-stop, for text-clip */

  /* ---------- NEUTRALS ---------- */
  --be-ink:#15171A;         /* primary text / dark surfaces */
  --be-ink-2:#454A52;       /* secondary text */
  --be-muted:#8B8A85;       /* tertiary text / captions */
  --be-paper:#FFFFFF;       /* default surface */
  --be-bone:#F6F5F2;        /* warm off-white alt-section bg */
  --be-bone-2:#ECE9E3;      /* warm off-white, one step deeper */
  --be-line:#E4E1DA;        /* hairline borders (warm) */

  /* ---------- SEMANTIC ---------- */
  --be-success:#1FA85A;
  --be-warning:#FFB400;
  --be-danger:#E30613;
  --be-info:#0D47A1;

  /* ---------- TYPE FAMILIES ---------- */
  --be-font-head:"Poppins",system-ui,-apple-system,sans-serif;
  --be-font-body:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
  --be-font-script:"Montserrat",system-ui,sans-serif; /* italic only — the "erleben" word */

  /* ---------- TYPE SCALE (fluid) ---------- */
  --be-fs-display:clamp(52px,11vw,128px); /* hero "BÖRGER" */
  --be-fs-h1:clamp(40px,8vw,98px);
  --be-fs-h2:clamp(30px,5vw,60px);
  --be-fs-h3:clamp(19px,2.4vw,27px);
  --be-fs-h4:21px;
  --be-fs-lead:clamp(18px,2vw,23px);
  --be-fs-body:18px;
  --be-fs-note:16px;
  --be-fs-small:13px;

  /* ---------- WEIGHTS ---------- */
  --be-fw-light:300;
  --be-fw-regular:400;
  --be-fw-medium:500;
  --be-fw-semibold:600;
  --be-fw-bold:700;
  --be-fw-extrabold:800;

  /* ---------- LINE HEIGHTS ---------- */
  --be-lh-display:.86;
  --be-lh-heading:1.04;
  --be-lh-body:1.55;

  /* ---------- LETTER SPACING ---------- */
  --be-ls-display:-.04em;
  --be-ls-heading:-.02em;
  --be-ls-label:.14em;   /* uppercase labels / eyebrows */

  /* ---------- RADII ---------- */
  --be-radius-sm:8px;
  --be-radius:12px;
  --be-radius-lg:16px;
  --be-radius-xl:18px;
  --be-radius-2xl:24px;
  --be-radius-pill:50px;
  --be-radius-circle:50%;

  /* ---------- SPACING ---------- */
  --be-space-1:4px;
  --be-space-2:8px;
  --be-space-3:12px;
  --be-space-4:16px;
  --be-space-5:24px;
  --be-space-6:32px;
  --be-space-8:48px;
  --be-space-10:64px;
  --be-space-band:clamp(64px,9vw,130px); /* vertical section rhythm */

  /* ---------- SHADOWS (warm-tinted, soft) ---------- */
  --be-shadow-sm:0 1px 2px rgba(20,20,20,.06),0 1px 1px rgba(20,20,20,.04);
  --be-shadow:0 12px 32px -14px rgba(20,20,20,.22),0 4px 10px -6px rgba(20,20,20,.10);
  --be-shadow-lg:0 34px 80px -30px rgba(20,20,20,.42),0 14px 30px -18px rgba(20,20,20,.20);

  /* ---------- LAYOUT ---------- */
  --be-maxw:1200px;
  --be-nav-h:64px;

  /* ---------- MOTION ---------- */
  --be-dur-fast:.18s;
  --be-dur-base:.2s;
  --be-dur-slow:.7s;
  --be-ease:cubic-bezier(.2,.7,.2,1);
}

/* ============================================================
   BASE TYPE — opt-in via .be-scope so the tokens never
   fight a host page. Wrap content in <div class="be-scope">.
   ============================================================ */
.be-scope{
  font-family:var(--be-font-body);
  color:var(--be-ink);
  background:var(--be-paper);
  font-weight:var(--be-fw-regular);
  line-height:var(--be-lh-body);
  font-size:var(--be-fs-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.be-scope h1,.be-scope h2,.be-scope h3,.be-scope h4{
  font-family:var(--be-font-head);
  margin:0;
  font-weight:var(--be-fw-bold);
  line-height:var(--be-lh-heading);
  letter-spacing:var(--be-ls-heading);
  color:var(--be-ink);
}
.be-scope h1{font-size:var(--be-fs-h1);font-weight:var(--be-fw-extrabold);line-height:var(--be-lh-display);letter-spacing:var(--be-ls-display);}
.be-scope h2{font-size:var(--be-fs-h2);}
.be-scope h3{font-size:var(--be-fs-h3);font-weight:var(--be-fw-semibold);}
.be-scope h4{font-size:var(--be-fs-h4);}
.be-scope p{margin:0;}
.be-scope a{color:var(--be-orange);text-decoration:none;}
.be-scope a:hover{color:var(--be-pink);}

/* ---------- TEXT HELPERS ---------- */
.be-display{font-family:var(--be-font-head);font-weight:var(--be-fw-extrabold);font-size:var(--be-fs-display);
  line-height:var(--be-lh-display);letter-spacing:var(--be-ls-display);text-transform:uppercase;}
.be-lead{font-family:var(--be-font-body);font-size:var(--be-fs-lead);font-weight:var(--be-fw-regular);
  line-height:1.5;color:var(--be-ink-2);max-width:56ch;}
.be-eyebrow{font-family:var(--be-font-head);font-size:var(--be-fs-small);font-weight:var(--be-fw-bold);
  letter-spacing:var(--be-ls-label);text-transform:uppercase;color:var(--be-ink-2);}
.be-script{font-family:var(--be-font-script);font-style:italic;font-weight:var(--be-fw-semibold);text-transform:none;}

/* the signature gradient-on-text */
.be-grad-text{background:var(--be-grad-2);-webkit-background-clip:text;background-clip:text;color:transparent;}