/* ============================================================
   MEDIALINE GROUP — Design System Tokens
   Source: Corporate Design Guide Medialine Group 2026 | BASICS
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Frutiger LT Pro";
  src: url("./fonts/FrutigerLTPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Frutiger LT Pro";
  src: url("./fonts/FrutigerLTPro-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Frutiger LT Pro";
  src: url("./fonts/FrutigerLTPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Hausschrift Frutiger LT Pro is loaded locally above (CD 2026 primary type).
   No external font CDN — the site is fully self-contained. */

:root {
  /* ----------------------------------------------------------
     PRIMARY COLORS — the Medialine Group blue triad
     Used in all logos and across CD.
     ---------------------------------------------------------- */
  --ml-medialine-blue: #063E85;   /* Medialine-Blau   — primary */
  --ml-hortensia-blue: #006DB1;   /* Hortensienblau   — headings, accents */
  --ml-cyan:           #009FE3;   /* Cyan             — light end of gradient */

  /* ----------------------------------------------------------
     SECONDARY COLORS — supporting, used sparingly
     ---------------------------------------------------------- */
  --ml-magenta:        #B22887;   /* Magenta — signal accent */
  --ml-dark-blue:      #140F41;   /* Dunkles Blau — dark backgrounds, dark end of primary gradient */

  /* ----------------------------------------------------------
     NEUTRALS
     ---------------------------------------------------------- */
  --ml-white:          #FFFFFF;
  --ml-black:          #000000;
  --ml-text-grey:      #3C3C3C;   /* SCHRIFTFARBE GRAU — body text on light */
  --ml-grey-90:        #1F1F1F;
  --ml-grey-70:        #4D4D4D;
  --ml-grey-50:        #808080;
  --ml-grey-30:        #B3B3B3;
  --ml-grey-15:        #D9D9D9;
  --ml-grey-08:        #EBEBEB;
  --ml-grey-04:        #F4F4F4;   /* page subtle */

  /* ----------------------------------------------------------
     GRADIENTS — exact spec from Design Guide §04
     ---------------------------------------------------------- */
  /* Primary gradient: Cyan → Hortensia → Medialine → Dunkles Blau,
     rotation -45° (top-left light → bottom-right dark) */
  --ml-gradient-primary: linear-gradient(
    135deg,
    #009FE3 0%,
    #006DB1 15%,
    #063E85 40%,
    #140F41 80%
  );
  /* Secondary gradient: lighter, no Dunkles Blau */
  --ml-gradient-secondary: linear-gradient(
    135deg,
    #009FE3 0%,
    #006DB1 33%,
    #063E85 100%
  );
  /* For text gradients (linear, left-light → right-dark) */
  --ml-gradient-text: linear-gradient(
    90deg,
    #009FE3 0%,
    #006DB1 33%,
    #063E85 100%
  );

  /* ----------------------------------------------------------
     SEMANTIC ROLES
     ---------------------------------------------------------- */
  --color-bg:           var(--ml-white);
  --color-bg-subtle:    var(--ml-grey-04);
  --color-bg-inverse:   var(--ml-dark-blue);
  --color-surface:      var(--ml-white);
  --color-surface-alt:  var(--ml-grey-04);

  --color-fg:           var(--ml-text-grey);
  --color-fg-strong:    var(--ml-grey-90);
  --color-fg-muted:     var(--ml-grey-50);
  --color-fg-on-dark:   var(--ml-white);

  --color-heading:      var(--ml-hortensia-blue);     /* per CD Guide */
  --color-link:         var(--ml-hortensia-blue);
  --color-link-hover:   var(--ml-medialine-blue);
  --color-accent:       var(--ml-magenta);            /* signal */

  --color-border:       var(--ml-grey-15);
  --color-border-strong:var(--ml-grey-30);
  --color-divider:      var(--ml-grey-08);

  --color-brand:        var(--ml-medialine-blue);
  --color-brand-light:  var(--ml-cyan);
  --color-brand-mid:    var(--ml-hortensia-blue);
  --color-brand-dark:   var(--ml-dark-blue);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-primary: "Frutiger LT Pro", "Hind", "Helvetica Neue", Arial, sans-serif;
  --font-web:     "Hind", "Frutiger LT Pro", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow", "Frutiger LT Pro", "Helvetica Neue", Arial, sans-serif;
  --font-display-condensed: "Barlow Condensed", "Barlow", "Frutiger LT Pro", Arial, sans-serif;
  --font-office:  "Calibri", "Frutiger LT Pro", "Helvetica Neue", Arial, sans-serif;

  --fw-light:  300;
  --fw-roman:  400;
  --fw-bold:   700;
  --fw-black:  900;   /* Barlow display only */

  /* Type scale (web baseline 16px) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;     /* headlines need adequate spationierung */
  --tracking-caps:   0.08em;     /* all-caps wordmarks */

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----------------------------------------------------------
     RADII — tied to the Group Logo shape (one corner cut)
     ---------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  /* The signature Group Logo shape: rounded square with top-right corner cut.
     Use clip-path or background masks; not a CSS radius alone. */
  --logo-shape-cut: 22%;   /* corner cut size relative to the square */

  /* ----------------------------------------------------------
     SHADOWS — sober, the brand is not heavily layered
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20,15,65,.06);
  --shadow-sm: 0 2px 6px rgba(20,15,65,.08);
  --shadow-md: 0 6px 18px rgba(20,15,65,.10);
  --shadow-lg: 0 14px 38px rgba(20,15,65,.14);
  --shadow-focus: 0 0 0 3px rgba(0,159,227,.35);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-out:      cubic-bezier(.16,.84,.44,1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* Layout */
  --container-max: 1240px;
  --gutter:        var(--space-6);
}

/* ============================================================
   BASE / SEMANTIC TYPE STYLES
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-primary);
  font-weight: var(--fw-light);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  margin: 0;
}

.h-display, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-tight);
}

h1, .h1 { font-size: clamp(var(--fs-40), 4vw + 1rem, var(--fs-64)); }
h2, .h2 { font-size: clamp(var(--fs-32), 3vw + .5rem, var(--fs-48)); }
h3, .h3 { font-size: var(--fs-28); }
h4, .h4 { font-size: var(--fs-24); }
h5, .h5 { font-size: var(--fs-20); }
h6, .h6 { font-size: var(--fs-18); }

p, .body { font-size: var(--fs-16); line-height: var(--lh-normal); font-weight: var(--fw-light); color: var(--color-fg); text-wrap: pretty; }
.lead, .intro { font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--ml-grey-90); }
small, .small, .caption { font-size: var(--fs-14); color: var(--color-fg-muted); }
.eyebrow {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--fs-12);
  color: var(--ml-hortensia-blue);
}

a { color: var(--color-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--ml-cyan); color: var(--ml-white); }

/* Utility: gradient text (per CD Guide — large headlines only) */
.gradient-text {
  background: var(--ml-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Utility: the iconic Group Logo shape — square with top-right corner cut */
.ml-shape {
  /* default 22% diagonal cut on top-right corner */
  clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%);
  border-radius: var(--radius-xl);
}
.ml-shape-rounded {
  /* rounded variant approximating the chamfered corner of the logo */
  border-radius: var(--radius-2xl) calc(var(--radius-2xl) * 2.4) var(--radius-2xl) var(--radius-2xl);
}