/* ═══ CDU Corporate Design – Design-Tokens (CD-Manual Stand 09/2023) ═══ */
:root {
  /* ---- Hauptfarben ---- */
  --cadenabbia-tuerkis: #52b7c1;  /* Leitfarbe / Brand-Canvas */
  --rhoendorf-blau:      #2d3c4b;  /* Anker: Headlines, dunkle Sektionen, Text */
  --union-gold:          #ffa600;  /* Akzent: CTAs, Highlights, Störer */
  --weiss:               #ffffff;

  /* ---- Flaggenfarben (nur im Logo-Bogen) ---- */
  --union-schwarz: #1b191d;
  --union-rot:     #bf111b;

  /* ---- Tints ---- */
  --tuerkis-60: #97d4da;  --tuerkis-25: #d4edf0;  --tuerkis-10: #eef8f9;
  --blau-60:    #818a93;  --blau-25:    #cbced2;  --blau-10:    #eaeced;
  --gold-60:    #ffc966;  --gold-25:    #ffe9bf;  --gold-10:    #fff6e5;

  /* ---- Semantische Aliase ---- */
  --surface-brand: var(--cadenabbia-tuerkis);
  --surface-deep:  var(--rhoendorf-blau);
  --surface-page:  var(--weiss);
  --surface-card:  var(--weiss);
  --surface-info:  var(--tuerkis-10);
  --surface-info-strong: var(--tuerkis-25);
  --surface-accent: var(--union-gold);

  --text-on-deep:  var(--weiss);
  --text-on-brand: var(--rhoendorf-blau);
  --text-on-accent:var(--rhoendorf-blau);
  --text-body:     var(--rhoendorf-blau);
  --text-heading:  var(--rhoendorf-blau);
  --text-muted:    var(--blau-60);
  --text-inverse:  var(--weiss);

  --border-subtle: var(--blau-25);
  --border-default:var(--blau-60);
  --border-strong: var(--rhoendorf-blau);
  --highlight:     var(--union-gold);
  --danger:        var(--union-rot);
  --ring:          var(--cadenabbia-tuerkis);

  /* ---- Typografie ---- */
  --font-headline: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-copy:     "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --weight-light:300; --weight-regular:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;

  --text-2xs:.75rem; --text-xs:.8125rem; --text-sm:.875rem; --text-base:1rem;
  --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem;
  --text-3xl:3rem; --text-4xl:4rem; --text-5xl:5.5rem;

  --leading-tight:1.02; --leading-snug:1.18; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-headline:-0.01em; --tracking-caps:0.08em;

  /* ---- Abstände (8px-Basis) ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --space-10:4rem; --space-12:5rem; --space-16:8rem;
  --container-sm:640px; --container-md:880px; --container-lg:1120px; --container-xl:1320px;

  /* ---- Radien / Schatten / Motion ---- */
  --radius-none:0;
  --radius-sm:4px; --radius-md:8px;
  --radius-lg:14px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(45,60,75,.08);
  --shadow-md:0 4px 16px rgba(45,60,75,.10);
  --shadow-lg:0 14px 40px rgba(45,60,75,.16);
  --shadow-focus:0 0 0 3px rgba(82,183,193,.45);
  --stoerer-angle:-10deg;
  --ease-standard:cubic-bezier(0.2,0,0.1,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:360ms;
}

/* ---- Schriften (lokal gehostet, DSGVO-konform ohne Google-Server) ---- */
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-serif-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-300.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-800.woff2") format("woff2");
}