:root {
  --ce-master-primary: #0b1f33;
  --ce-master-accent: #4fa3d1;
  --ce-master-paper: #faf8f3;
}

.ce-theme-core {
  --ce-theme-primary: #0b1f33;
  --ce-theme-accent: #4fa3d1;
  --ce-theme-secondary: #304a43;
  --ce-theme-paper: #faf8f3;
  --ce-theme-soft: #d8e7ef;
}

.ce-theme-poolbau {
  --ce-theme-primary: #073b4c;
  --ce-theme-accent: #22a7b8;
  --ce-theme-secondary: #dcc9a6;
  --ce-theme-paper: #e8f5f7;
  --ce-theme-soft: #f4eee3;
}

.ce-theme-waermepumpe {
  --ce-theme-primary: #183a2e;
  --ce-theme-accent: #94b85d;
  --ce-theme-secondary: #c46b4a;
  --ce-theme-paper: #f5f1e8;
  --ce-theme-soft: #e5edd8;
}

.ce-theme-photovoltaik {
  --ce-theme-primary: #1b4332;
  --ce-theme-accent: #e0a21a;
  --ce-theme-secondary: #87a878;
  --ce-theme-paper: #f6f1df;
  --ce-theme-soft: #fff4c9;
}

.ce-theme-elektriker {
  --ce-theme-primary: #1f2630;
  --ce-theme-accent: #f0b429;
  --ce-theme-secondary: #4f6f8f;
  --ce-theme-paper: #eef2f6;
  --ce-theme-soft: #fff4d6;
}

.ce-product-surface {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--ce-theme-accent), transparent 78%), transparent 22rem),
    linear-gradient(135deg, #ffffff, var(--ce-theme-paper));
  border: 1px solid color-mix(in srgb, var(--ce-theme-primary), transparent 84%);
  color: var(--ce-theme-primary);
}

.ce-product-pill {
  background: color-mix(in srgb, var(--ce-theme-accent), white 84%);
  border: 1px solid color-mix(in srgb, var(--ce-theme-accent), transparent 65%);
  color: var(--ce-theme-primary);
}