docs: clarify foundations vs components package relationship (#4802)

* Initial plan

* docs: clarify foundations vs components relationship

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

* Apply suggestions from code review

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Author: Copilot

README.md

@@ -32,11 +32,27 @@ designers, and content authors build, maintain, and scale best-of-class digital
 | [@db-ux/v-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/vue)          | Native Vue 3 components             | [![@db-ux/v-core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ux/v-core-components "DB UX Design System – on NPM")         |
 | [@db-ux/wc-core-components](https://github.com/db-ux-design-system/core-web/tree/main/output/stencil)     | Web Components                      | [![@db-ux/wc-core-components on Npmjs](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fdb-ux-design-system%2Fcore-web%2Freleases%2Flatest&query=%24.tag_name&label=npm&color=ed1c24 "npm version")](https://npmjs.com/package/@db-ux/wc-core-components "DB UX Design System – on NPM")       |
 
+### Which package should I choose?
+
+**For JavaScript framework-specific components**: Choose your framework package (React, Angular, Vue, Web Components) which includes styling and JavaScript behavior.
+
+**For other users**: Use `@db-ux/core-components` - it includes everything you need (foundations + component styles).
+
+**For design tokens only**: Use `@db-ux/core-foundations` if you only need colors, spacing, fonts, and icons without pre-built component styles.
+
 ## How to use
 
-Install your preferred package via npm or yarn e.g. `npm i @db-ux/react-core-components`.
+1. **Install your preferred package** via npm or yarn:
+   - For React: `npm i @db-ux/react-core-components`
+   - For Angular: `npm i @db-ux/ngx-core-components`
+   - For Vue: `npm i @db-ux/v-core-components`
+   - For Web Components: `npm i @db-ux/wc-core-components`
+   - For styling only: `npm i @db-ux/core-components`
+
+2. **Include the CSS styles** as described in the "Styling Dependencies" section of each package's `README`.
+
+> **💡 Note**: All framework packages automatically include the necessary foundation styles - you don't need to install `@db-ux/core-foundations` separately!
 
-Afterwards, you need to include the specific CSS or SCSS files to apply the styles of DB UX Design System (Version 3), as described in the "Styling Dependencies" section of each package's `README`.
 We even provide some [examples of integrations](https://github.com/db-ux-design-system/examples).
 
 ### DB Theme

packages/components/README.md

@@ -23,10 +23,21 @@ For additional information besides the frameworks see our [Getting started](http
 
 If you just need the styling follow this:
 
+## Package Relationship
+
+**✅ Do I need foundations if I install components?**
+
+**No!** The `@db-ux/core-components` package **automatically includes** all the foundations (`@db-ux/core-foundations`) you need. You only need to install one package:
+
+- **Use `@db-ux/core-components`** - If you want to use UI components (buttons, inputs, etc.) 
+- **Use `@db-ux/core-foundations`** - If you only need design tokens, colors, spacing, fonts, and assets without any component styles
+
 ## Install
 
 `npm i @db-ux/core-components`
 
+> **Note**: This automatically includes `@db-ux/core-foundations` as a dependency, so you don't need to install it separately.
+
 ## Styling Dependencies
 
 Import the styles in `scss` or `css`. Based on your technology the file names could be different.
@@ -35,7 +46,7 @@ Import the styles in `scss` or `css`. Based on your technology the file names co
 - `webpack`: asset path point to `~@db-ux/core-foundations/assets`
 - `rollup`: asset path point to `@db-ux/core-foundations/assets`
 
-They are bundling all dependencies from [foundations](https://www.npmjs.com/package/@db-ux/core-foundations) and all [components](https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/styles/db-ux-components.scss) available.
+**Important**: These bundled files automatically include **all dependencies from [foundations](https://www.npmjs.com/package/@db-ux/core-foundations)** (design tokens, colors, fonts, etc.) **and all [components](https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/styles/db-ux-components.scss)** - everything you need in one import!
 
 **SCSS**
 

packages/foundations/README.md

@@ -7,6 +7,19 @@
 
 A library containing all tokens (colors, spacings, font formatting, etc.) and assets (icons) of [DB UX Design System v3](https://github.com/db-ux-design-system/core-web).
 
+## When to use this package
+
+**⚠️ Looking for UI components?** You probably want [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) instead, which **automatically includes** this package.
+
+**Use this package when you:**
+- Only need design tokens (colors, spacing, fonts) without any component styles
+- Want to build custom components using the design system tokens
+- Need just icons and fonts without pre-built components
+
+**Use [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) when you:**
+- Want to use ready-made UI components (buttons, inputs, navigation, etc.)
+- Need both design tokens AND component styles (most common use case)
+
 We currently support:
 
 - [CSS](https://design-system.deutschebahn.com/core-web/review/main/foundations/readme?current=css)