/* =============================================================
   AXENJO Design System — Foundations
   Colors & typography tokens for AXENJO Film / Live / Drone
   ============================================================= */

/* ---------- Web fonts ----------
   Body & UI: Jost (matches Mobirise build `body { font-family: Jost; }`)
     — loaded from Google Fonts; no local file shipped by the brand.
   Partner / alt: DM Sans — local variable file shipped by the brand
     (fonts/DMSans-VariableFont_opsz_wght.ttf). Used wherever --font-alt
     is explicitly applied; not active by default.
   Logo wordmark: custom rounded-geometric display face built into the
   AXENJO logo PNGs themselves — do NOT try to re-typeset it in CSS.
*/
@import url("fonts/jost-local.css");

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =========================================================
     COLOR — Brand
     AXENJO Blue (#4479d9) is THE brand colour: product titles,
     nav links, buttons, CTAs, anywhere the brand needs to speak.
     Navy (#0e223f) is the monogram fill only — used as a
     photographic overlay and inside the logo mark, never as a
     UI accent. Both are part of the system; reach for Blue first.
     ========================================================= */
  --axenjo-blue:           #4479d9; /* THE brand colour — primary / info / button / nav links */
  --axenjo-blue-hover:     #2150a5; /* btn-info hover / active */

  --axenjo-navy:           #0e223f; /* monogram fill only — never as a UI accent */
  --axenjo-navy-soft:      #1b2f4d; /* slightly lifted for hovers on dark photography */
  --axenjo-navy-tint:      #6592e6; /* the 2px hairline divider tint */

  --axenjo-blue-overlay:   rgba(14, 34, 63, 0.30); /* "Über uns" photo wash — rgb(14,34,63) @ 30% */

  /* =========================================================
     COLOR — Semantic (lifted verbatim from mbr-additional.css)
     ========================================================= */
  --color-primary:         #4479d9;
  --color-primary-hover:   #2150a5;
  --color-secondary:       #ff6666;
  --color-secondary-hover: #ff0f0f;
  --color-info:            #4479d9;
  --color-info-hover:      #2150a5;
  --color-success:         #40b0bf;
  --color-success-hover:   #2a747e;
  --color-warning:         #ffe161;
  --color-warning-hover:   #ffd10a;
  --color-warning-fg:      #614f00;
  --color-danger:          #ff9966;
  --color-danger-hover:    #ff5f0f;

  /* =========================================================
     COLOR — Neutrals
     ========================================================= */
  --bg:                    #ffffff;  /* default section background */
  --bg-muted:              #fafafa;  /* features / hero-strip backdrop */
  --bg-soft:               #eaeaea;  /* "Über uns" strip on landing */
  --bg-black:              #000000;  /* hero overlays use rgb(0,0,0) @ 0.4 */
  --fg:                    #232323;  /* body text */
  --fg-on-dark:            #ffffff;  /* text over imagery */
  --fg-muted:              #7a7a7a;  /* btn-white inactive text */
  --hairline:              #6592e6;  /* 2px divider line */

  /* Foregrounds, semantic aliases */
  --fg1: var(--fg);
  --fg2: var(--fg-muted);
  --fg-inv: var(--fg-on-dark);

  /* =========================================================
     SHADOW — pulled from .btn-* declarations
     ========================================================= */
  --shadow-btn:        0 2px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-btn-hover:  0 2px 5px 0 rgba(0, 0, 0, 0.2);
  --text-shadow-onimg: -1px -1px #000000; /* used on .cid-soP0nzUvHY h4/p */

  /* =========================================================
     RADII
     ========================================================= */
  --radius-sm: 4px;   /* btn-sm, btn-md, btn-lg all use 4px */
  --radius-md: 4px;
  --radius-lg: 4px;

  /* =========================================================
     SPACING — Mobirise rhythm (rem-based, 1rem = 16px)
     ========================================================= */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --section-y-sm: 30px;   /* .cid-spPDWXkamk strip */
  --section-y-md: 60px;
  --section-y-lg: 90px;

  /* =========================================================
     TYPOGRAPHY — Families
     ========================================================= */
  --font-body:    "Jost", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Jost", "Arial", system-ui, sans-serif;
  --font-alt:     "DM Sans", "Jost", system-ui, sans-serif;
  /* Logo wordmark — DO NOT re-typeset. Use the PNG/SVG in /assets/logos/. */

  /* =========================================================
     TYPOGRAPHY — Weights (from .mbr-light / .mbr-regular / .mbr-semibold / .mbr-bold)
     ========================================================= */
  --w-light:    300;
  --w-regular:  400;
  --w-semibold: 500;  /* Mobirise calls 500 "semibold" */
  --w-bold:     700;

  /* =========================================================
     TYPOGRAPHY — Mobirise display scale, rem (live values from mbr-additional.css)
     display-1 = hero title; display-2 = card title; display-5 = section heading;
     display-7 = body / lede; display-4 = button / small caps.
     ========================================================= */
  --display-1: 4.6rem;   /* hero — AXENJO FILM wordmark */
  --display-2: 3rem;     /* product card titles (DROHNE / LIVE / VIDEO) */
  --display-3: 2.4rem;   /* sub-hero */
  --display-4: 1.1rem;   /* button / nav label */
  --display-5: 2rem;     /* section title (REFERENZEN, Über uns) */
  --display-7: 1.2rem;   /* body, lede paragraphs */
  --line-tight: 1.1;
  --line-default: 1.3;
  --line-loose: 1.5;
  --line-body: 1.7;       /* .mbr-text line-height */
}

/* =============================================================
   Element defaults — matches the Mobirise/Bootstrap output
   ============================================================= */
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  color: var(--fg);
  line-height: 1.5;
  background: var(--bg);
}
section { background-color: var(--bg); }
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: none; }
strong, b { font-weight: var(--w-bold); }

/* =============================================================
   Semantic type — drop-in shortcuts
   These replace Mobirise's .display-N classes for new code,
   but keep the same numbers and sizes so audits cross-reference.
   ============================================================= */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--display-1);
  line-height: var(--line-tight);
  letter-spacing: 0.01em;
  margin: 0;
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--display-2);
  line-height: var(--line-tight);
  margin: 0;
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--display-5);
  line-height: var(--line-default);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--display-7);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
p, .body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--display-7);
  line-height: var(--line-body);
  margin: 0;
}
.small, small {
  font-size: var(--display-4);
  line-height: var(--line-loose);
}
.btn-label {
  font-family: var(--font-display);
  font-weight: 600;       /* .btn rule: font-weight: 600 */
  font-size: var(--display-4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* =============================================================
   Utility — text colors / backgrounds (semantic aliases)
   ============================================================= */
.text-fg        { color: var(--fg); }
.text-fg-inv    { color: var(--fg-on-dark); }
.text-blue      { color: var(--color-info); }
.text-navy      { color: var(--axenjo-navy); }
.bg-muted       { background: var(--bg-muted); }
.bg-soft        { background: var(--bg-soft); }
.bg-navy        { background: var(--axenjo-navy); }
.bg-black       { background: var(--bg-black); }

/* Hairline — the thin blue divider Mobirise uses around section heads */
.hairline {
  height: 2px;
  width: 100%;
  background: var(--hairline);
  border: 0;
  margin: 0 auto;
}

/* Image overlay — the "dark veil" that sits on every hero photo */
.img-overlay::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg-black);
  opacity: 0.4;          /* hero default — 40 % */
  pointer-events: none;
}
.img-overlay--50::before { opacity: 0.5; }  /* card3 — Film Produktion uses 50 % */
.img-overlay--30::before { opacity: 0.3; }  /* Über uns header */

/* On-image text receives a tiny sub-pixel shadow to lift it off photos */
.on-image { color: var(--fg-on-dark); text-shadow: var(--text-shadow-onimg); }