/* CCH V4 · Metro Evolution – bewusst gekapselt, damit V3 parallel bestehen bleibt. */
.cch-v4 {
  color-scheme: dark;
  --cch-v4-bg-primary: #07111d;
  --cch-v4-bg-secondary: #0a1726;
  --cch-v4-surface: #0d2033;
  --cch-v4-surface-raised: #112943;
  --cch-v4-surface-active: #143656;
  --cch-v4-input: #081522;
  --cch-v4-accent: #168ff2;
  --cch-v4-accent-strong: #0aa7ff;
  --cch-v4-accent-soft: #55b9ff;
  --cch-v4-text-primary: #f4f8fc;
  --cch-v4-text-secondary: #a9bdd0;
  --cch-v4-text-disabled: #667c90;
  --cch-v4-border: #213e58;
  --cch-v4-border-strong: #35658b;
  --cch-v4-success: #47d88f;
  --cch-v4-warning: #ffc14f;
  --cch-v4-danger: #ff6675;
  --cch-v4-focus: #78caff;
  --cch-v4-shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
  --cch-v4-shadow-lg: 0 24px 70px rgba(0, 0, 0, .52);
  --cch-v4-radius-sm: 8px;
  --cch-v4-radius-control: 10px;
  --cch-v4-radius-card: 12px;
  --cch-v4-radius-dialog: 18px;
  --cch-v4-space-1: 4px;
  --cch-v4-space-2: 8px;
  --cch-v4-space-3: 12px;
  --cch-v4-space-4: 16px;
  --cch-v4-space-5: 20px;
  --cch-v4-space-6: 24px;
  --cch-v4-space-8: 32px;
  --cch-v4-space-10: 40px;
  --cch-v4-font-xs: .75rem;
  --cch-v4-font-sm: .875rem;
  --cch-v4-font-md: 1rem;
  --cch-v4-font-lg: 1.25rem;
  --cch-v4-font-xl: clamp(1.75rem, 3vw, 2.4rem);
  --cch-v4-font-display: clamp(2.1rem, 4.2vw, 3.4rem);
  --cch-v4-tile-small: 148px;
  --cch-v4-tile-medium: 224px;
  --cch-v4-tile-large: 304px;
  --cch-v4-content-max: 1540px;
  --cch-v4-motion-fast: 120ms;
  --cch-v4-motion-normal: 200ms;
  --cch-v4-ease: cubic-bezier(.2, .8, .2, 1);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  color: var(--cch-v4-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .cch-v4 {
    --cch-v4-motion-fast: 0ms;
    --cch-v4-motion-normal: 0ms;
  }
}