/* =================================================================== */
/* PHARMASPEKTRUM-BASE.CSS - Vars, Fonts & Html/Body                  */
/* Central place for site colors, typography and global design tokens  */
/* =================================================================== */

/* 1. Local Fonts
   ------------------------------------------------------------ */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-500.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-500italic.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-600.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-600italic.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../webfonts/open-sans-v43-latin-700italic.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../webfonts/SourceSerifPro-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif Pro";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../webfonts/SourceSerifPro-Semibold.woff2") format("woff2");
}

@font-face {
    font-family: "Source Serif Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../webfonts/SourceSerifPro-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../webfonts/jetbrains-400.woff2") format("woff2");
}

/* 2. Design-Tokens
   ------------------------------------------------------------ */
:root {
    /* Farben - Vordergrund / Hintergrund */
    --fg: #1a1a1a;
    --fg-muted: #4a4a4a;
    --fg-faint: #777;
    --bg: #fafafa;
    --bg-card: #ffffff;
    --border: #e2e2e2;
    --border-strong: #c8c8c8;

    /* Akzent - Pharma-Spektrum-Blau */
    --accent: #1f4e79;
    --accent-hover: #163b5c;
    --accent-faint: #e8eff5;

    /* Editorial Redesign - zentral änderbare Site-Farben */
    --home-ink: #14212b;
    --home-soft: #43515e;
    --home-faint: #72808c;
    --home-paper: #f1f5f6;
    --home-line: #d5dee3;
    --home-blue: #1d5577;
    --home-blue-hover: #194f6b;
    --home-blue-dark: #12364d;
    --home-blue-light: #c7e4ed;
    --home-blue-wash: #dce8ec;
    --home-blue-page: #eef4f5;
    --home-blue-muted: #d7e7ed;
    --home-blue-soft-text: #bcdce6;
    --home-blue-body-text: #e3f0f4;
    --home-blue-fine-text: #d2e8f0;
    --home-blue-location-text: #d9edf3;
    --home-blue-feature: #215d7d;
    --home-blue-feature-border: #1d526f;
    --home-blue-feature-text: #e4f0f4;
    --home-blue-hero-border: #1c445d;
    --home-blue-scan: #d9e6eb;
    --home-blue-timeline: #dceaf0;
    --home-prisma-border: #244f5f;
    --home-teal: #2f746b;
    --home-violet: #6f5488;
    --home-amber: #94642d;

    --hero-ink: rgba(210, 232, 240, 0.8);          /* Fliesstext und Diagrammlinien */
    --hero-ink-strong: rgba(199, 228, 237, 0.92);  /* Icons und Hervorhebungen */
    --hero-surface: rgba(255, 255, 255, 0.08);     /* Flaeche der Diagramm-Karten */
    --hero-line: rgba(255, 255, 255, 0.28);        /* 1px-Rahmen der Diagramm-Karten */
    --hero-line-bright: rgba(255, 255, 255, 0.72); /* Rahmen auf gefuellter Flaeche */

    /* Wiederkehrende UI-Farben */
    --ui-white: #fff;
    --ui-footer-bg: #f8fbfc;
    --ui-panel: #f7fafb;
    --ui-panel-soft: #f9fbfc;
    --ui-line-soft: #dbe4e8;
    --ui-line-blue: #d3e0ea;
    --ui-line-strong: #b9cbd4;
    --ui-line-card: #dce5e9;
    --ui-line-hover: #c5d4dc;
    --ui-nav-hover: #d2e0e6;
    --ui-check-line: #bfd0dd;
    --ui-muted-label: #7f8b94;
    --ui-pill-bg: #e8f1f4;
    --ui-alert-bg: #fff8e1;
    --ui-alert-border: #e8d690;
    --ui-alert-ink: #6e5b1c;
    --ui-alert-link: #4f3f10;
    --ui-error: #c0392b;
    --ui-shadow-soft: 0 10px 26px rgba(20, 33, 43, 0.055);
    --ui-shadow-card: 0 12px 28px rgba(20, 33, 43, 0.08);
    --ui-shadow-medium: 0 16px 34px rgba(20, 33, 43, 0.09);
    --ui-shadow-raised: 0 18px 42px rgba(20, 33, 43, 0.12);
    --ui-shadow-large: 0 22px 58px rgba(20, 33, 43, 0.2);

    /* Typografie */
    --font-sans: "Open Sans", Arial, sans-serif;
    --font-serif: "Source Serif Pro", Georgia, serif;
    --font-mono: "JetBrains Mono", Consolas, monospace;
    --font-icons: "Font Awesome 7 Pro";

    /* Größen-Skala (1.125er-Modular) */
    --fs-xs: 0.72rem;
    --fs-sm: 0.82rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.85rem;
    --fs-3xl: 2.2rem;

    /* Zeilenhöhe */
    --lh-tight: 1.25;
    --lh-base: 1.65;
    --lh-relaxed: 1.75;

    /* Spacing-Skala (8er-Basis) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;

    /* Layout-Breiten */
    --max-content: 720px;
    --max-wide: 1100px;

    /* Header-Höhe (für sticky-Offset bei Anchor-Scroll) */
    --header-height: 4.5rem;

    /* Border-Radius */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;

    /* Schatten */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.06);
}

/* Pillar-Farbakzente: zentral für Article-Cards, Themen und Cross-References. */
.cat-ai-pharma   { --cat-color: #5b5bd6; --cat-bg: #eeeeff; --cat-border: #cdcdfb; --cat-ink: #343489; --cat-mark: "AI"; }
.cat-gxp         { --cat-color: #1a7f5a; --cat-bg: #e7f5ee; --cat-border: #b8dfcd; --cat-ink: #125b42; --cat-mark: "GMP"; }
.cat-regulatorik { --cat-color: #b45309; --cat-bg: #fff3e2; --cat-border: #f1cf9f; --cat-ink: #7a3d09; --cat-mark: "EU"; }
.cat-validierung { --cat-color: #0e7490; --cat-bg: #e5f5f8; --cat-border: #b9dfe8; --cat-ink: #115a70; --cat-mark: "CSV"; }
.cat-systeme     { --cat-color: #475569; --cat-bg: #eef2f6; --cat-border: #cbd5e1; --cat-ink: #334155; --cat-mark: "IT"; }
.cat-konferenz   { --cat-color: #be185d; --cat-bg: #fdeaf3; --cat-border: #f5bdd6; --cat-ink: #8a1246; --cat-mark: "CAL"; }

/* 3. Reset und Base
   ------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    color: var(--fg);
    background: var(--bg);
    line-height: var(--lh-base);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font: inherit;
    cursor: pointer;
}