@charset "UTF-8";
/*──────────────────────────────────────────────
  TOKENS.CSS – Designsystem oelker log
  © 2026 seltsam. STUDIO FÜR VISUELLE MEDIEN
──────────────────────────────────────────────*/

/*──────────────────────────────────────────────
  FONTS (lokal, keine Google-Fonts-Abfrage)
──────────────────────────────────────────────*/
@font-face {
 font-display: swap;
 font-family: 'Big Shoulders Display';
 font-style: normal;
 font-weight: 600;
 src: url('../webfonts/big-shoulders-display-latin-600-normal.woff2') format('woff2');
}
@font-face {
 font-display: swap;
 font-family: 'Big Shoulders Display';
 font-style: normal;
 font-weight: 800;
 src: url('../webfonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');
}
@font-face {
 font-display: swap;
 font-family: 'Archivo';
 font-style: normal;
 font-weight: 400;
 src: url('../webfonts/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face {
 font-display: swap;
 font-family: 'Archivo';
 font-style: normal;
 font-weight: 500;
 src: url('../webfonts/archivo-latin-500-normal.woff2') format('woff2');
}
@font-face {
 font-display: swap;
 font-family: 'Archivo';
 font-style: normal;
 font-weight: 600;
 src: url('../webfonts/archivo-latin-600-normal.woff2') format('woff2');
}
@font-face {
 font-display: swap;
 font-family: 'IBM Plex Mono';
 font-style: normal;
 font-weight: 400;
 src: url('../webfonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
 font-display: swap;
 font-family: 'IBM Plex Mono';
 font-style: normal;
 font-weight: 500;
 src: url('../webfonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/*──────────────────────────────────────────────
  ROOT TOKENS
──────────────────────────────────────────────*/
:root {
 /*──────────────────────────────
   BRAND COLORS
   Hafenwasser als Grund, Klinker als einzige Signalfarbe
 ──────────────────────────────*/
 --color-ink: #0C1820;          /* Hafenwasser bei Nacht */
 --color-ink-2: #15252F;
 --color-paper: #F3F1EC;        /* Frachtpapier */
 --color-paper-2: #E6E2D9;
 --color-brick: #B8452C;        /* Speicherstadt-Klinker */
 --color-brick-soft: #D9674B;   /* Klinker auf dunklem Grund */
 --color-fog: #9AA7AE;
 --color-line: #CFC9BD;
 --color-text: #18242C;
 --color-text-soft: #3A454B;
 --color-muted: #5B666C;
 --color-white: #FFFFFF;
 --color-black: #000000;

 /* Legacy-Namen aus dem Basis-Template (nicht entfernen, werden noch referenziert) */
 --color-primary: var(--color-brick);
 --color-primary-dark: var(--color-ink);
 --color-primary-bright: var(--color-brick-soft);
 --color-grey: var(--color-text);
 --color-creme: var(--color-paper);

 /*──────────────────────────────
   SEMANTIC COLORS
 ──────────────────────────────*/
 --color-bg: var(--color-paper);
 --color-text-on-ink: var(--color-paper);

 /* Section Themes */
 --section-bg-light: var(--color-paper);
 --section-text-light: var(--color-text);
 --section-bg-dark: var(--color-ink);
 --section-text-dark: var(--color-paper);
 --section-bg-accent: var(--color-brick);
 --section-text-accent: var(--color-paper);

 /* Links */
 --color-link: var(--color-brick);
 --color-link-hover: var(--color-ink);
 --color-link-on-ink: var(--color-brick-soft);

 /*──────────────────────────────
   BOOTSTRAP MAPPING
 ──────────────────────────────*/
 --bs-primary: var(--color-brick);
 --bs-primary-rgb: 184, 69, 44;
 --bs-secondary: var(--color-muted);
 --bs-dark: var(--color-ink);
 --bs-light: var(--color-paper);
 --bs-body-bg: var(--color-paper);
 --bs-body-color: var(--color-text);
 --bs-body-font-family: var(--font-base);
 --bs-body-font-weight: var(--font-weight-regular);
 --bs-border-color: var(--color-line);

 /*──────────────────────────────
   TYPOGRAPHY
 ──────────────────────────────*/
 --font-display: 'Big Shoulders Display', 'Barlow Condensed', 'Arial Narrow', sans-serif;
 --font-base: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
 --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
 --font-headline: var(--font-display);

 --font-weight-regular: 400;
 --font-weight-medium: 500;
 --font-weight-bold: 600;
 --font-weight-display: 800;

 /* Fluid Scale */
 --font-size-xs: 0.75rem;                              /* 12px, Mono-Labels */
 --font-size-sm: 0.875rem;                             /* 14px */
 --font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* 16-17px */
 --font-size-md: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);  /* 17-22px */
 --font-size-lg: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); /* 26-38px */
 --font-size-xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);       /* 32-56px */
 --font-size-hero: clamp(3rem, 1rem + 7.4vw, 9.375rem);     /* 48-150px */

 --line-height-base: 1.55;
 --line-height-tight: 1.05;
 --line-height-display: 0.86;
 --letter-spacing-label: 0.08em;

 /*──────────────────────────────
   SPACING
 ──────────────────────────────*/
 --space-xs: 0.25rem;
 --space-sm: 0.5rem;
 --space-md: clamp(0.75rem, 1.5vw, 1rem);
 --space-lg: clamp(1.5rem, 3vw, 2rem);
 --space-xl: clamp(2.5rem, 5vw, 4rem);

 --space-section: clamp(3rem, 6vw, 5.5rem);
 --space-gutter: clamp(1rem, 4vw, 3.5rem);   /* Seitenrand, wie im Mockup */
 --container-max: 1320px;
 /* Innenabstand, der auf jeder Breite auf der Container-Kante landet (Hero, Navbar) */
 --edge: max(var(--space-gutter), calc((100vw - var(--container-max)) / 2 + var(--space-gutter)));

 --radius-pill: 999px;
 --radius-base: 2px;

 --shadow-text: 0 2px 30px rgba(0, 0, 0, 0.35);
 --transition-speed: 0.25s;

 /* Header */
 --header-height: 76px;
}