/* =========================================================
   Mannheimer Morgen 2.0 — Design Tokens
   Source: MM 2.0.fig
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap");

/* ---------- Brand fonts (locally hosted) ----------------------------------
   Moriston       — sans (Light/Regular/Medium/Semibold/Bold/Black) — BRAND
   Austera Text   — serif body (Regular/Italic/Bold/Bold Italic)    — BRAND
   Adobe Garamond Pro → EB Garamond (Google Fonts substitute)        — wordmark
   ------------------------------------------------------------------------- */

/* Moriston — sans */
@font-face { font-family:"Moriston"; font-style:normal; font-weight:300;
  src:url("fonts/Moriston-Light.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Moriston"; font-style:normal; font-weight:400;
  src:url("fonts/Moriston-Regular.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Moriston"; font-style:normal; font-weight:500;
  src:url("fonts/Moriston-Medium.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Moriston"; font-style:normal; font-weight:600;
  src:url("fonts/Moriston-Semibold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Moriston"; font-style:normal; font-weight:700;
  src:url("fonts/Moriston-Bold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Moriston"; font-style:normal; font-weight:900;
  src:url("fonts/Moriston-Black.otf") format("opentype"); font-display:swap; }

/* Austera Text — serif body (woff2 → woff → otf for max compat) */
@font-face { font-family:"Austera Text"; font-style:normal; font-weight:400;
  src:url("fonts/3-font.woff2") format("woff2"),
      url("fonts/3-font.woff")  format("woff"),
      url("fonts/Corradine_Fonts_-_Austera_Text_Regular.otf") format("opentype");
  font-display:swap; }
@font-face { font-family:"Austera Text"; font-style:italic; font-weight:400;
  src:url("fonts/2-font.woff2") format("woff2"),
      url("fonts/2-font.woff")  format("woff"),
      url("fonts/Corradine_Fonts_-_Austera_Text_Italic.otf") format("opentype");
  font-display:swap; }
@font-face { font-family:"Austera Text"; font-style:normal; font-weight:700;
  src:url("fonts/font.woff2") format("woff2"),
      url("fonts/font.woff")  format("woff"),
      url("fonts/Corradine_Fonts_-_Austera_Text_Bold.otf") format("opentype");
  font-display:swap; }
@font-face { font-family:"Austera Text"; font-style:italic; font-weight:700;
  src:url("fonts/1-font.woff2") format("woff2"),
      url("fonts/1-font.woff")  format("woff"),
      url("fonts/Corradine_Fonts_-_Austera_Text_Bold_Italic.otf") format("opentype");
  font-display:swap; }

:root {
  /* ----- Brand colors ----- */
  --mm-blue:        rgb(0, 19, 195);   /* Premium blue, primary CTA  */
  --mm-blue-link:   rgb(0, 20, 195);   /* Hyperlink / accent rule    */
  --mm-blue-deep:   rgb(0, 26, 77);    /* Navi background, masthead  */
  --mm-blue-deep-2: rgb(0, 25, 76);    /* Browser chrome label        */
  --mm-blue-video:  rgb(35, 50, 193);  /* Video label tag            */

  /* ----- Neutrals (Greyscale) ----- */
  --mm-fg-1:        rgb(30, 35, 46);   /* Headlines, primary text    */
  --mm-fg-2:        rgb(20, 20, 31);   /* Near-black                 */
  --mm-fg-meta:     rgb(108, 115, 128);/* Meta / byline / caption    */
  --mm-fg-muted:    rgb(129, 137, 153);/* Inactive nav item          */
  --mm-stroke:      rgb(70, 81, 104);  /* Hairline divider on dark   */
  --mm-stroke-soft: rgb(147, 156, 181);/* Stroke @ 0.25 opacity area */

  --mm-bg:          rgb(255, 255, 255);
  --mm-bg-alt:      rgb(242, 244, 247);/* Section background, ticker  */
  --mm-bg-surface:  rgb(233, 236, 242);/* Social pill / chip surface */
  --mm-border:      rgb(216, 220, 229);/* Default 1px hairline       */
  --mm-skeleton:    rgb(196, 196, 196);/* Image placeholder           */

  /* ----- Semantic ----- */
  --mm-leben:       rgb(48, 178, 108); /* "Leben" section accent     */
  --mm-leben-2:     rgb(50, 186, 113); /* alt tone in CTAs           */
  --mm-leben-soft:  rgba(48, 178, 108, 0.25);
  --mm-warning:     rgb(242, 187, 5);  /* Weather / sun icon         */

  /* ----- Shadow / Elevation ----- */
  --mm-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.03);
  --mm-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.05);
  --mm-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);

  /* ----- Radii ----- */
  --mm-radius-xs:  2px;   /* Image cards, premium badge */
  --mm-radius-sm:  3px;   /* Video time tag             */
  --mm-radius-md:  4px;
  --mm-radius-pill: 24px; /* Address bar, pills          */
  --mm-radius-full: 9999px;

  /* ----- Spacing scale ----- */
  --mm-space-0:  0;
  --mm-space-1:  4px;
  --mm-space-2:  8px;
  --mm-space-3:  12px;
  --mm-space-4:  16px;
  --mm-space-5:  24px;
  --mm-space-6:  32px;
  --mm-space-7:  48px;
  --mm-space-8:  64px;
  --mm-space-9:  96px;

  /* ----- Layout ----- */
  --mm-page-max:    1440px;
  --mm-content-max: 1080px;
  --mm-gutter:      180px;     /* desktop side-margin            */
  --mm-col-text:    704px;     /* main column width              */
  --mm-col-aside:   328px;     /* sidebar / right rail            */
  --mm-col-article: 704px;     /* article body column             */

  /* ----- Type families ----- */
  --mm-font-sans:    "Moriston", system-ui, -apple-system, "Segoe UI", "Source Sans 3", sans-serif;
  --mm-font-serif:   "Austera Text", Georgia, "Times New Roman", serif;
  --mm-font-display: "EB Garamond", "Adobe Garamond Pro", Garamond, serif;
}

/* =====================================================================
   Base / Reset
   ===================================================================== */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--mm-font-sans);
  color: var(--mm-fg-1);
  background: var(--mm-bg);
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* =====================================================================
   Type — semantic classes
   Mirrors size+weight inventory observed in Figma (Moriston Bold/Med/Semibold,
   Austera Text Regular for body)
   ===================================================================== */

.mm-display {            /* Wordmark / masthead */
  font-family: var(--mm-font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.29;
  color: var(--mm-bg);
  letter-spacing: 0;
}

.mm-h1 {                 /* Article headline (40 / Bold) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: var(--mm-fg-1);
  margin: 0;
  text-wrap: balance;
}

.mm-h2 {                 /* Section header (32 Bold) / Teaser_L (32) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--mm-fg-1);
  margin: 0;
  text-wrap: balance;
}

.mm-h3 {                 /* Section header (24 Bold) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--mm-fg-1);
  margin: 0;
}

.mm-h4 {                 /* Sub-headline / "Das Wichtigste" (20 Bold) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--mm-fg-1);
  margin: 0;
}

.mm-teaser-title {       /* Teaser_M_Wide title (20 Bold) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--mm-fg-1);
  margin: 0;
}

.mm-teaser-title-s {     /* Teaser sidebar (18 Bold) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--mm-fg-1);
  margin: 0;
}

.mm-lead {               /* Article lead (20 Medium sans) */
  font-family: var(--mm-font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.375;
  color: var(--mm-fg-1);
}

.mm-body {               /* Article body (Austera 20 Regular) */
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--mm-fg-1);
}

.mm-body-s {             /* Smaller body / list items */
  font-family: var(--mm-font-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--mm-fg-1);
}

.mm-meta {               /* Date · author byline (12 Medium, all-caps fragments) */
  font-family: var(--mm-font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.375;
  letter-spacing: 0.025em;
  color: var(--mm-fg-meta);
}

.mm-meta-section {       /* Section eyebrow ("Polizeipräsidium Mannheim") */
  font-family: var(--mm-font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.025em;
  color: var(--mm-fg-meta);
  text-transform: none;
}

.mm-caption {            /* Image caption (14 Medium grey) */
  font-family: var(--mm-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.375;
  color: var(--mm-fg-meta);
}

.mm-nav {                /* Top-bar nav links (14 Medium white) */
  font-family: var(--mm-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--mm-bg);
  letter-spacing: 0.020em;
}

.mm-nav-section {        /* Main section nav (16 Medium) */
  font-family: var(--mm-font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.1;
  color: var(--mm-bg);
}

.mm-nav-cta {            /* "Anmelden" (14 Bold caps-tracking) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--mm-bg);
}

.mm-eyebrow {            /* "MEISTGELESEN" (16 Bold tracked) */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.025em;
  color: var(--mm-fg-1);
}

.mm-tag-mm-plus {        /* MM+ badge text */
  font-family: var(--mm-font-sans);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.10em;
  color: var(--mm-bg);
}

.mm-quote {              /* Block quote (Austera Bold Italic 48) */
  font-family: var(--mm-font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  color: var(--mm-fg-1);
}

.mm-link {
  color: var(--mm-blue-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mm-link:hover { opacity: 0.8; }

/* small utility: red square bullet (used as separator in metas) */
.mm-bullet::before {
  content: "￭";
  margin: 0 8px;
  color: var(--mm-fg-meta);
}