/* Car Controlling — Design-System-Tokens.
   Werte 1:1 aus tokens/ des gelieferten Design-Systems übernommen.
   Einzige Abweichung: die Schriften liegen lokal statt beim Google-CDN
   (DSGVO — diese Seite baut keine Verbindung zu Dritten auf). */

/* ── Schriften ─────────────────────────────────────────────────────────── */
@font-face { font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/archivo-800.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/plexsans-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/plexsans-500.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/plexsans-600.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/plexmono-500.woff2") format("woff2"); }
@font-face { font-family:"Playfair Display"; font-style:italic; font-weight:700; font-display:swap; src:url("../fonts/playfair-i700.woff2") format("woff2"); }

:root{
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* logo-echo serif italic — pull quotes and brand moments only */
  --font-brand-serif:"Playfair Display",Georgia,serif;
}

/* ── Farben ────────────────────────────────────────────────────────────── */
:root{
  /* Brand blue (CC navy). Primary identity colour, from the logo. */
  --cc-blue-950:#051526;
  --cc-blue-900:#08243F;
  --cc-blue-800:#0C3357;
  --cc-blue-700:#10446F;
  --cc-blue-600:#165C93;
  --cc-blue-500:#1E77B8;
  --cc-blue-400:#4B9BD4;
  --cc-blue-300:#86BEE6;
  --cc-blue-200:#BCDBF2;
  --cc-blue-100:#DDEBF8;
  --cc-blue-50:#F0F6FC;

  /* Brand orange (CC signal). Action, motion, emphasis. Never a background wash. */
  --cc-orange-900:#6B2F04;
  --cc-orange-800:#8F3F05;
  --cc-orange-700:#B85408;
  --cc-orange-600:#DB6A0C;
  --cc-orange-500:#F47B20;
  --cc-orange-400:#FF9642;
  --cc-orange-300:#FFB273;
  --cc-orange-200:#FFD1A8;
  --cc-orange-100:#FFE7D1;
  --cc-orange-50:#FFF4EA;

  /* Steel neutrals. Cool-tinted so they sit with the navy. */
  --cc-steel-950:#0B1117;
  --cc-steel-900:#141C24;
  --cc-steel-800:#1E2932;
  --cc-steel-700:#2E3B47;
  --cc-steel-600:#465666;
  --cc-steel-500:#647587;
  --cc-steel-400:#8B9AAA;
  --cc-steel-300:#B4C0CB;
  --cc-steel-200:#D5DCE3;
  --cc-steel-150:#E4E9EE;
  --cc-steel-100:#EDF1F4;
  --cc-steel-50:#F5F7F9;
  --cc-white:#FFFFFF;

  /* Status. Mapped 1:1 to transfer states in the CC platform. */
  --cc-green-700:#0F6444;
  --cc-green-600:#17845A;
  --cc-green-100:#E3F4EC;
  --cc-amber-700:#96650A;
  --cc-amber-600:#C9860A;
  --cc-amber-100:#FCF0D8;
  --cc-red-700:#9E2B21;
  --cc-red-600:#C93A2E;
  --cc-red-100:#FBE6E3;
}

/* ── Typografie ────────────────────────────────────────────────────────── */
:root{
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800;

  --text-display-xl:clamp(44px,6vw,76px); --lh-display-xl:1.02; --ls-display-xl:-0.03em;
  --text-display-l:clamp(36px,4.4vw,56px); --lh-display-l:1.06; --ls-display-l:-0.025em;
  --text-display-m:40px; --lh-display-m:1.1; --ls-display-m:-0.02em;

  --text-h1:32px; --lh-h1:1.16; --ls-h1:-0.018em;
  --text-h2:24px; --lh-h2:1.25; --ls-h2:-0.012em;
  --text-h3:20px; --lh-h3:1.3;  --ls-h3:-0.008em;
  --text-h4:17px; --lh-h4:1.35; --ls-h4:-0.004em;

  --text-body-l:18px; --lh-body-l:1.6;
  --text-body:16px;   --lh-body:1.6;
  --text-body-s:14px; --lh-body-s:1.55;
  --text-caption:13px;--lh-caption:1.45;

  /* eyebrow / micro label — uppercase, wide tracking. The brand's signature small type. */
  --text-eyebrow:12px; --lh-eyebrow:1.2; --ls-eyebrow:0.16em;
  --text-micro:11px;   --lh-micro:1.2;   --ls-micro:0.08em;

  /* data / mono — VIN, plate, order no., timestamps */
  --text-data:14px;   --lh-data:1.4; --ls-data:0.01em;
  --text-data-s:12px; --lh-data-s:1.35;
  --text-metric:36px; --lh-metric:1;  --ls-metric:-0.02em;
}

/* ── Abstände ──────────────────────────────────────────────────────────── */
:root{
  --space-0:0px; --space-05:2px; --space-1:4px; --space-15:6px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  --gutter:24px;
  --pad-card:24px;
  --pad-card-compact:16px;
  --pad-control-x:16px;
  --section-y:clamp(64px,8vw,128px);
  --page-max:1280px;
  --measure:66ch;
  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px;
}

/* ── Radien ────────────────────────────────────────────────────────────── */
:root{
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:10px;   /* buttons, inputs, chips */
  --radius-lg:16px;   /* cards, panels */
  --radius-xl:24px;   /* hero surfaces, media */
  --radius-pill:999px;
  --border-hairline:1px;
  --border-emphasis:2px;
  --focus-ring-width:3px;
}

/* ── Elevation ─────────────────────────────────────────────────────────── */
:root{
  /* cool-tinted, low-spread. Cards lift, they never float. */
  --shadow-xs:0 1px 2px rgba(5,21,38,.06);
  --shadow-sm:0 1px 2px rgba(5,21,38,.06),0 2px 6px rgba(5,21,38,.05);
  --shadow-md:0 2px 4px rgba(5,21,38,.05),0 8px 20px -6px rgba(5,21,38,.12);
  --shadow-lg:0 2px 6px rgba(5,21,38,.06),0 18px 40px -12px rgba(5,21,38,.20);
  --shadow-accent:0 8px 22px -8px rgba(244,123,32,.55);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.08);
  --ring-focus:0 0 0 3px rgba(30,119,184,.32);
  --ring-focus-accent:0 0 0 3px rgba(244,123,32,.35);
  --ring-danger:0 0 0 3px rgba(201,58,46,.28);
}

/* ── Bewegung ──────────────────────────────────────────────────────────── */
:root{
  --dur-instant:90ms; --dur-fast:140ms; --dur-base:200ms; --dur-slow:320ms; --dur-slower:520ms;
  --ease-out:cubic-bezier(.22,1,.36,1);       /* default: decisive, no overshoot */
  --ease-in-out:cubic-bezier(.5,0,.35,1);
  --ease-entrance:cubic-bezier(.16,.84,.44,1);
  --transition-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}

/* ── Muster ────────────────────────────────────────────────────────────── */
:root{
  /* Signature: the transfer diagonal — 22° of forward motion, lifted off the logo's italic. */
  --angle-transfer:22deg;
  --gradient-hero:linear-gradient(135deg,#051526 0%,#08243F 46%,#10446F 100%);
  --gradient-hero-warm:linear-gradient(120deg,#08243F 0%,#0C3357 58%,#B85408 140%);
  --gradient-accent:linear-gradient(100deg,#F47B20 0%,#FF9642 100%);
  --gradient-protection:linear-gradient(to top,rgba(5,21,38,.88) 0%,rgba(5,21,38,.45) 45%,rgba(5,21,38,0) 100%);
  --gradient-sheen:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0));
  --pattern-diagonal:repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px);
  --pattern-grid:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/100% 40px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/40px 100%;
  --glass-blur:saturate(140%) blur(14px);
  --scrim-navy:rgba(5,21,38,.72);
}

/* ── Semantik ──────────────────────────────────────────────────────────── */
:root{
  /* text */
  --text-strong:var(--cc-blue-900);
  --text-body-color:var(--cc-steel-700);
  --text-muted:var(--cc-steel-500);
  --text-faint:var(--cc-steel-400);
  --text-inverse:var(--cc-white);
  --text-inverse-muted:rgba(255,255,255,.68);
  --text-accent:var(--cc-orange-700);
  --text-link:var(--cc-blue-600);
  --text-link-hover:var(--cc-orange-600);

  /* surfaces */
  --surface-page:var(--cc-steel-50);
  --surface-card:var(--cc-white);
  --surface-sunken:var(--cc-steel-100);
  --surface-raised:var(--cc-white);
  --surface-inverse:var(--cc-blue-900);
  --surface-inverse-soft:var(--cc-blue-800);
  --surface-tint:var(--cc-blue-50);
  --surface-accent-tint:var(--cc-orange-50);
  --surface-overlay:rgba(5,21,38,.60);

  /* borders */
  --border-subtle:var(--cc-steel-200);
  --border-default:var(--cc-steel-300);
  --border-strong:var(--cc-steel-400);
  --border-inverse:rgba(255,255,255,.14);
  --border-accent:var(--cc-orange-500);

  /* action — accent (primary CTA) */
  --accent:var(--cc-orange-500);
  --accent-hover:var(--cc-orange-600);
  --accent-press:var(--cc-orange-700);
  --accent-quiet:var(--cc-orange-50);
  --on-accent:var(--cc-white);

  /* action — navy (secondary/solid neutral) */
  --action-navy:var(--cc-blue-900);
  --action-navy-hover:var(--cc-blue-800);
  --action-navy-press:var(--cc-blue-950);

  /* status */
  --status-done-fg:var(--cc-green-700);   --status-done-bg:var(--cc-green-100);   --status-done-dot:var(--cc-green-600);
  --status-active-fg:var(--cc-blue-700);  --status-active-bg:var(--cc-blue-100);  --status-active-dot:var(--cc-blue-500);
  --status-warn-fg:var(--cc-amber-700);   --status-warn-bg:var(--cc-amber-100);   --status-warn-dot:var(--cc-amber-600);
  --status-alert-fg:var(--cc-red-700);    --status-alert-bg:var(--cc-red-100);    --status-alert-dot:var(--cc-red-600);
  --status-idle-fg:var(--cc-steel-600);   --status-idle-bg:var(--cc-steel-150);   --status-idle-dot:var(--cc-steel-400);
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-body);color:var(--text-body-color);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-strong);margin:0;font-weight:var(--weight-bold);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring-focus)}
img{display:block;max-width:100%}
::selection{background:var(--cc-orange-200);color:var(--cc-blue-900)}

.cc-eyebrow{font-family:var(--font-sans);font-size:var(--text-eyebrow);line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-accent)}
.cc-data{font-family:var(--font-mono);font-size:var(--text-data);letter-spacing:var(--ls-data);font-variant-numeric:tabular-nums}
.cc-measure{max-width:var(--measure)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}