/* ============================================================
   DMA — Digitale Mitarbeiter Agentur · Colors & Type
   Atelier-Palette · 60/30/10-Regel: 60% Elfenbein/Papier · 30% Tiefsee · 10% Petrol max

   Brand-Spec (Source-of-Truth-Doku): ../brand-system.md
   ============================================================ */

/* IBM Plex self-hosted (DSGVO + perf). WOFF2 latin subset in /assets/fonts/.
   Mono 600 not used — only 400/500/700 (700 is logo-zwingend). */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexSans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/IBMPlexMono-700.woff2') format('woff2');
}

:root {
  /* ========== BRAND v5 — CLEAN-COOL-COBALT (2026-04-25) ========== */
  /* Pivot von warm Atelier (Cream/Petrol-Teal) zu cool Apple/Sierra-style
     mit Cobalt-Tiefblau als Hauptfarbe. Token-Namen bleiben (Backward-Compat
     für bestehende Selektoren), Hex-Werte neu. */

  /* ========== PRIMÄR ========== */
  --dma-tiefsee:        #1A2E3A;  /* Dark text, dark surfaces, Logo (bleibt) */
  --dma-grafit:         #475569;  /* Body-Text-Alternative (slate-600) */
  --dma-petrol:         #1E3A8A;  /* HAUPTFARBE Cobalt — CTAs, Links, KPI (max 10%) */
  --dma-petrol-hell:    #5A7FE5;  /* Lighter Cobalt — Hover, dark-surface accents */

  /* ========== NEUTRAL & HINTERGRUND (cool clean) ========== */
  --dma-papier:         #F4F5F8;  /* Section-BGs, Cards (cool light slate) */
  --dma-elfenbein:      #FAFAFC;  /* Page-BG Haupt-Fläche (clean near-white) */
  --dma-nebel-hell:     #DBEAFE;  /* Info-Flächen, Quote-Boxen (cool blue tint) */
  --dma-nebel:          #BFDBFE;  /* Footer-Akzent, Dividing-Flächen */
  --dma-dunst:          #E2E8F0;  /* Trennlinien, Input-Rahmen, Card-Border (cool slate) */
  --dma-tinte:          #0F172A;  /* Body-Text auf hell (slate-900) */
  --dma-grau-mitte:     #94A3B8;  /* Captions, Labels, Eyebrow (slate-400) */

  /* ========== SEMANTIK ========== */
  --dma-moos:           #3E8171;  /* Success (bleibt) */
  --dma-sand-tief:      #B89243;  /* Warning (bleibt) */
  --dma-terra:          #B8503E;  /* Error (bleibt) */

  /* ========== Tinte / Tiefsee Opacities (Werte angepasst auf neues Tinte #0F172A) ========== */
  --dma-tinte-72:       rgba(15, 23, 42, 0.72);
  --dma-tinte-56:       rgba(15, 23, 42, 0.56);
  --dma-tinte-12:       rgba(15, 23, 42, 0.12);
  --dma-tinte-08:       rgba(15, 23, 42, 0.08);
  --dma-tinte-06:       rgba(15, 23, 42, 0.06);
  --dma-tinte-04:       rgba(15, 23, 42, 0.04);

  --dma-tiefsee-12:     rgba(26, 46, 58, 0.12);
  --dma-tiefsee-08:     rgba(26, 46, 58, 0.08);
  --dma-tiefsee-04:     rgba(26, 46, 58, 0.04);

  /* ========== SEMANTISCHE ROLLEN ========== */
  --dma-bg:             var(--dma-elfenbein);
  --dma-bg-warm:        var(--dma-papier);
  --dma-bg-cool:        var(--dma-nebel-hell);
  --dma-bg-final:       var(--dma-tiefsee);
  --dma-fg:             var(--dma-tinte);
  --dma-fg-muted:       var(--dma-grafit);
  --dma-fg-subtle:      #475569; /* slate-600, WCAG-AAA auf Elfenbein/Papier/Warm (7.1-7.5:1) — vorher #64748B failed bei 4.36:1 auf section--warm */
  --dma-fg-inverse:     var(--dma-elfenbein);
  --dma-accent:         var(--dma-petrol);
  --dma-border:         var(--dma-dunst);
  --dma-border-strong:  var(--dma-tiefsee-12);
  --dma-eyebrow:        #475569; /* slate-600, WCAG-AAA — vorher #64748B failed */
  --dma-link:           var(--dma-petrol);
  --dma-link-hover:     var(--dma-tiefsee);

  /* ========== TYPE FAMILIES ========== */
  --dma-font-display:   "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --dma-font-body:      "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --dma-font-mono:      "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ========== TYPE SCALE (aus Brand-CI Section 4) ========== */
  --dma-text-xs:        12px;
  --dma-text-sm:        14px;
  --dma-text-base:      16px;
  --dma-text-md:        18px;
  --dma-text-lg:        20px;
  --dma-text-xl:        24px;
  --dma-text-2xl:       32px;
  --dma-text-3xl:       40px;
  --dma-text-4xl:       56px;
  --dma-text-5xl:       72px;
  --dma-text-6xl:       96px;

  /* Tracking */
  --dma-track-display:  -0.025em;
  --dma-track-tight:    -0.015em;
  --dma-track-h2:       -0.01em;
  --dma-track-eyebrow:  0.08em;

  /* Leading */
  --dma-lead-tight:     1.1;     /* Display-Stufen */
  --dma-lead-snug:      1.2;     /* H1–H3 */
  --dma-lead-body:      1.55;    /* Body */
  --dma-lead-small:     1.45;    /* Small */

  /* ========== SPACING ========== */
  --dma-space-1:        4px;
  --dma-space-2:        8px;
  --dma-space-3:        12px;
  --dma-space-4:        16px;
  --dma-space-5:        24px;
  --dma-space-6:        32px;
  --dma-space-7:        48px;
  --dma-space-8:        56px;   /* Section-Padding Mobile */
  --dma-space-9:        80px;   /* Section-Padding Desktop */
  --dma-space-10:       128px;

  /* ========== RADII ========== */
  --dma-radius-xs:      4px;
  --dma-radius-sm:      8px;
  --dma-radius-md:      12px;
  --dma-radius-lg:      16px;
  --dma-radius-xl:      24px;
  --dma-radius-2xl:     32px;
  --dma-radius-pill:    999px;
  /* Concentric inner radius for nested elements inside glass surfaces (Apple-Geometry) */
  --dma-radius-inner:   calc(var(--dma-radius-md) * 0.66);

  /* ========== ELEVATION (Brand-CI Section 6.4: Schatten sparsam, max 0 2px 8px rgba(15,26,34,0.06)) ========== */
  --dma-shadow-xs:      0 1px 2px var(--dma-tinte-04);
  --dma-shadow-sm:      0 2px 8px var(--dma-tinte-06);
  --dma-shadow-md:      0 4px 16px var(--dma-tinte-08);

  /* ========== MOTION (Brand-CI Section 6.6: 180ms ease-out, keine Spring) ========== */
  --dma-ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --dma-ease-entrance:  cubic-bezier(0.16, 1, 0.3, 1);
  --dma-dur-fast:       120ms;
  --dma-dur-base:       180ms;
  --dma-dur-slow:       240ms;
}

/* ============================================================
   Body + Atelier Radial-Gradient-Background (MLG-Pattern, Atelier-übersetzt)
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--dma-elfenbein);
  /* Brand v5 Clean-Cool-Cobalt Background — Cobalt + Slate-Tints für Liquid-Glass-Tiefe.
     Sektion-übergreifend kontinuierlich (background-attachment: fixed) — kein Bruch pro Sektion.
     Apple-Restraint: niedrige Opacities (~6-14%), gradient ist felt-not-seen. */
  background-image:
    /* Layer 1 — top-left subtle Cobalt accent (Hero-Anker) */
    radial-gradient(ellipse 80% 60% at 12% 8%, rgba(30, 58, 138, 0.08), transparent 55%),
    /* Layer 2 — top-right cool slate */
    radial-gradient(ellipse 70% 55% at 92% 18%, rgba(15, 23, 42, 0.05), transparent 60%),
    /* Layer 3 — bottom-center light cobalt wash */
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(90, 127, 229, 0.10), transparent 55%),
    /* Layer 4 — right-mid cobalt subtle */
    radial-gradient(ellipse 60% 40% at 85% 70%, rgba(30, 58, 138, 0.05), transparent 60%),
    /* Layer 5 — base wash */
    linear-gradient(180deg, var(--dma-elfenbein) 0%, var(--dma-papier) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--dma-fg);
  font-family: var(--dma-font-body);
  font-size: var(--dma-text-base);
  line-height: var(--dma-lead-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Type primitives — Brand-CI Section 4
   Display = Plex Sans Bold 700
   ============================================================ */

h1, .dma-h1 {
  font-family: var(--dma-font-display);
  font-weight: 700;
  font-size: var(--dma-text-3xl);  /* 40 desktop / 30 mobile via media-query */
  line-height: var(--dma-lead-snug);
  letter-spacing: var(--dma-track-tight);
  color: var(--dma-fg);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

h2, .dma-h2 {
  font-family: var(--dma-font-display);
  font-weight: 600;
  font-size: var(--dma-text-2xl);  /* 32 / 24 */
  line-height: var(--dma-lead-snug);
  letter-spacing: var(--dma-track-h2);
  color: var(--dma-fg);
  margin: 0;
  text-wrap: balance;
}

h3, .dma-h3 {
  font-family: var(--dma-font-display);
  font-weight: 600;
  font-size: var(--dma-text-xl);  /* 24 / 20 */
  line-height: var(--dma-lead-snug);
  color: var(--dma-fg);
  margin: 0;
}

h4, .dma-h4 {
  font-family: var(--dma-font-display);
  font-weight: 600;
  font-size: var(--dma-text-md);  /* 18 / 16 */
  line-height: var(--dma-lead-snug);
  color: var(--dma-fg);
  margin: 0;
}

.dma-display-xl {
  font-family: var(--dma-font-display);
  font-weight: 700;
  font-size: var(--dma-text-6xl);  /* 96 / 56 */
  line-height: var(--dma-lead-tight);
  letter-spacing: var(--dma-track-display);
  color: var(--dma-fg);
}

.dma-display-l {
  font-family: var(--dma-font-display);
  font-weight: 700;
  font-size: var(--dma-text-5xl);  /* 72 / 44 */
  line-height: var(--dma-lead-tight);
  letter-spacing: var(--dma-track-display);
  color: var(--dma-fg);
}

.dma-display-m {
  font-family: var(--dma-font-display);
  font-weight: 600;
  font-size: var(--dma-text-4xl);  /* 56 / 36 */
  line-height: var(--dma-lead-snug);
  letter-spacing: var(--dma-track-tight);
  color: var(--dma-fg);
}

p, .dma-p {
  font-family: var(--dma-font-body);
  font-size: var(--dma-text-base);
  line-height: var(--dma-lead-body);
  color: var(--dma-fg-muted);
  text-wrap: pretty;
  margin: 0;
}

.dma-body-l {
  font-size: var(--dma-text-md);
  line-height: var(--dma-lead-body);
  color: var(--dma-fg-muted);
  text-wrap: pretty;
}

.eyebrow, .dma-eyebrow {
  display: inline-block;
  font-family: var(--dma-font-mono);
  font-weight: 400;
  font-size: var(--dma-text-xs);
  letter-spacing: var(--dma-track-eyebrow);
  text-transform: uppercase;
  color: var(--dma-eyebrow);
}

.dma-data {
  font-family: var(--dma-font-mono);
  font-weight: 400;
  font-feature-settings: "tnum" 1;
  color: var(--dma-petrol);
}

a, .dma-link {
  color: var(--dma-link);
  text-decoration: none;
  transition: color var(--dma-dur-base) var(--dma-ease-standard);
}
a:hover, .dma-link:hover { color: var(--dma-link-hover); }

::selection {
  background: var(--dma-petrol);
  color: var(--dma-elfenbein);
}

/* Mobile Type-Scale */
@media (max-width: 720px) {
  h1, .dma-h1 { font-size: var(--dma-text-2xl); }       /* 30 */
  h2, .dma-h2 { font-size: var(--dma-text-xl); }        /* 24 */
  h3, .dma-h3 { font-size: var(--dma-text-lg); }        /* 20 */
  h4, .dma-h4 { font-size: var(--dma-text-base); }      /* 16 */

  .dma-display-xl { font-size: var(--dma-text-4xl); }   /* 56 */
  .dma-display-l  { font-size: var(--dma-text-3xl); }   /* 40 (Brand-CI 44, gerundet) */
  .dma-display-m  { font-size: var(--dma-text-2xl); }   /* 32 (Brand-CI 36, gerundet) */
}