i18n (DE): add 'install-and-setup'

src/content/docs/de/basics/project-structure.mdx

@@ -118,7 +118,7 @@ Diese Datei wird von JavaScript-Paketmanagern verwendet, um die erforderlichen P
 
 Es gibt [zwei Arten von Abhängigkeiten](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file), die du in deiner `package.json`-Datei festlegen kannst: `dependencies` und `devDependencies`. In den meisten Fällen funktionieren sie auf die gleiche Weise: Astro benötigt zum Erzeugungszeitpunkt alle Abhängigkeiten, und auch dein Paketmanager wird beide Arten installieren. Wir empfehlen dir, all deine Abhängigkeiten zunächst in `dependencies` einzutragen, und `devDependencies` nur zu verwenden, wenn dein spezieller Anwendungsfall es erfordert.
 
-Eine Anleitung zur Erstellung einer neuen `package.json`-Datei für dein Projekt findest du auf der Seite [Manuelle Installation von Astro](/de/install-and-setup/#manual-setup).
+Eine Anleitung zur Erstellung einer neuen `package.json`-Datei für dein Projekt findest du auf der Seite [Manuelle Installation von Astro](/de/install-and-setup/#manuelle-installation).
 
 ### `astro.config.mjs`
 

src/content/docs/de/install-and-setup.mdx

@@ -0,0 +1,312 @@
+---
+title: Astro installieren
+sidebar:
+  label: Installation
+description: "So installierst du Astro und startest ein neues Projekt."
+i18nReady: true
+---
+
+import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+import ReadMore from '~/components/ReadMore.astro';
+
+Der [CLI-Befehl `create astro`](#installation-über-den-cliassistenten) ist der schnellste Weg, ein Astro‑Projekt von Grund auf neu zu starten. 
+Er führt dich Schritt für Schritt durch die Einrichtung deines neuen Astro‑Projekts und ermöglicht dir, aus mehreren offiziellen Starter‑Vorlagen zu wählen.
+
+Du kannst den CLI‑Befehl auch mit der Option `template` ausführen, um dein Projekt mit einem bestehenden Theme oder einer Starter‑Vorlage zu beginnen. 
+In unserer [Theme‑ und Starter‑Übersicht](https://astro.build/themes/) kannst du Vorlagen für Blogs, Portfolios, Dokumentationsseiten, Landingpages und mehr entdecken!
+
+Wenn du Astro stattdessen manuell installieren möchtest, findest du unsere [Schritt‑für‑Schritt‑Anleitung zur manuellen Installation](#manuelle-installation).
+
+:::tip[Online‑Vorschau]
+Möchtest du Astro lieber direkt im Browser ausprobieren? 
+Besuche [astro.new](https://astro.new/), um unsere Starter‑Vorlagen zu durchsuchen und ein neues Astro‑Projekt zu erstellen, ohne deinen Browser zu verlassen.
+:::
+
+## Voraussetzungen
+
+- **Node.js** – `v22.12.0` oder höher. Versionen mit ungerader Zahl wie `v23` werden nicht unterstützt.
+- **Texteditor** – Wir empfehlen [VS Code](https://code.visualstudio.com/) mit der [offiziellen Astro‑Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
+- **Terminal** – Astro wird über die Kommandozeilen­­schnittstelle (CLI) verwendet.
+
+## Browser‑Kompatibilität
+
+Astro basiert auf Vite, das standardmäßig moderne Browser mit aktueller JavaScript‑Unterstützung anvisiert.
+Die vollständige Liste der unterstützten Browser findest du in der [Vite‑Dokumentation](https://vite.dev/guide/build.html#browser-compatibility).
+
+## Installation über den CLI‑Assistenten
+
+Du kannst `create astro` überall auf deinem Computer ausführen – du musst also nicht vorher ein leeres Verzeichnis anlegen.
+
+Falls du noch kein Verzeichnis für dein neues Projekt hast, legt der Assistent automatisch eines für dich an.
+
+<Steps>
+1. Führe den folgenden Befehl im Terminal aus, um den Installationsassistenten zu starten:
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      # Neues Projekt mit npm erstellen
+      npm create astro@latest
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      # Neues Projekt mit pnpm erstellen
+      pnpm create astro@latest
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      # Neues Projekt mit Yarn erstellen
+      yarn create astro
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+    Wenn alles funktioniert, erscheint eine Erfolgsmeldung mit empfohlenen nächsten Schritten.
+
+2. Navigiere in dein neues Projektverzeichnis, um mit Astro zu arbeiten.
+
+3. Falls du im Assistenten den Schritt „Install dependencies?“ übersprungen hast, installiere die Abhängigkeiten jetzt:
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm install
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn install
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+4. Du kannst jetzt den [Astro‑Entwicklungsserver starten](/de/develop-and-build/#starte-den-astro-entwicklungsserver) und eine Live‑Vorschau deines Projekts sehen!
+</Steps>
+
+## CLI‑Optionen
+
+Du kannst `create astro` mit zusätzlichen Optionen ausführen, um den Einrichtungsprozess anzupassen (z.&nbsp;B. alle Fragen automatisch beantworten oder die Houston‑Animation überspringen) oder dein neues Projekt zu konfigurieren (z. B. Git installieren oder Integrationen hinzufügen).
+
+<ReadMore>Siehe [alle verfügbaren Optionen des `create astro`‑Befehls](https://github.com/withastro/astro/blob/main/packages/create-astro/README.md).</ReadMore>
+
+### Integrationen hinzufügen
+
+Du kannst ein neues Astro‑Projekt starten und gleichzeitig alle [offiziellen Integrationen](/de/guides/integrations/) oder von der Community bereitgestellten Integrationen installieren, die den Befehl `astro add` unterstützen.
+
+Verwende dazu den Befehl `create astro` mit der Option `--add`.
+
+Führe den folgenden Befehl im Terminal aus und ersetze dabei den Namen der Integration durch jede, die den Befehl `astro add` unterstützt:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  # Neues Projekt mit React und Partytown erstellen
+  npm create astro@latest -- --add react --add partytown
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  # Neues Projekt mit React und Partytown erstellen
+  pnpm create astro@latest --add react --add partytown
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  # Neues Projekt mit React und Partytown erstellen
+  yarn create astro --add react --add partytown
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+### Theme oder Starter‑Vorlage verwenden
+
+Du kannst ein neues Astro‑Projekt basierend auf einem [offiziellen Beispiel](https://github.com/withastro/astro/tree/main/examples) oder dem `main`‑Branch eines beliebigen GitHub‑Repositorys starten, indem du die Option `--template` verwendest.
+
+Führe den folgenden Befehl im Terminal aus und ersetze dabei den Namen der offiziellen Astro-Startervorlage oder den GitHub-Benutzernamen und das Repository des Themes, das du verwenden möchtest:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  # Ein neues Projekt erstellen und offizielles Beispiel verwenden
+  npm create astro@latest -- --template <example-name>
+
+  # Ein neues Projekt auf Basis des main-Branch eines GitHub-Repositorys erstellen
+  npm create astro@latest -- --template <github-username>/<github-repo>
+  ```
+  </Fragment>
+
+  <Fragment slot="pnpm">
+  ```shell
+  # Ein neues Projekt erstellen und offizielles Beispiel verwenden
+  pnpm create astro@latest --template <example-name>
+
+  # Ein neues Projekt auf Basis des main-Branch eines GitHub-Repositorys erstellen
+  pnpm create astro@latest --template <github-username>/<github-repo>
+  ```
+  </Fragment>
+
+  <Fragment slot="yarn">
+  ```shell
+  # Ein neues Projekt erstellen und offizielles Beispiel verwenden
+  yarn create astro --template <example-name>
+
+  # Ein neues Projekt auf Basis des main-Branch eines GitHub-Repositorys erstellen
+  yarn create astro --template <github-username>/<github-repo>
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Standardmäßig wird der `main`‑Branch verwendet.
+Um einen anderen Branch zu nutzen, ergänze ihn im Template‑Argument:
+`<github-username>/<github-repo>#<branch>`
+
+## Manuelle Installation
+
+Diese Anleitung führt dich durch die manuelle Einrichtung eines neuen Astro‑Projekts.
+Wenn du den automatischen CLI‑Assistenten nicht verwenden möchtest, kannst du dein Projekt auch selbst einrichten.
+
+<Steps>
+1. Erstelle ein Verzeichnis
+
+    ```bash
+    mkdir my-astro-project
+    cd my-astro-project
+    ```
+
+    Erstelle anschließend eine `package.json`, um die Abhängigkeiten deines Projekts zu verwalten:
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm init --yes
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm init
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn init --yes
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+2. Astro installieren
+
+    :::note[Important]
+    Astro muss lokal installiert werden, nicht global.
+    Verwende also **nicht** `npm install -g astro`, `pnpm add -g astro` oder `yarn add global astro`.
+    :::
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install astro
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add astro
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add astro
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+    Ersetze anschließend alle Platzhalter im Abschnitt `"scripts"` deiner `package.json`:
+
+    ```json title="package.json" del={3} ins={4-6}
+    {
+      "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "dev": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview"
+      }
+    }
+    ```
+
+3. Erste Seite erstellen
+
+    Erstelle die Datei `src/pages/index.astro` und füge folgenden Inhalt ein:
+
+    ```astro title="src/pages/index.astro"
+    ---
+    // Willkommen bei Astro! Alles zwischen diesen drei Bindestrichen
+    // ist dein „Komponenten-Frontmatter“. Dieser wird nie im Browser ausgeführt.
+    console.log('Dies läuft in deinem Terminal, nicht im Browser!');
+    ---
+    <!-- Unten befindet sich deine „Komponenten-Vorlage“. Es ist einfach HTML,
+         aber mit etwas Magie, um dir beim Erstellen großartiger Vorlagen zu helfen. -->
+    <html>
+      <body>
+        <h1>Hallo, Welt!</h1>
+      </body>
+    </html>
+    <style>
+      h1 {
+        color: orange;
+      }
+    </style>
+    ```
+
+4. Erstes Asset erstellen
+
+    Erstelle ein Verzeichnis `public/` und darin die Datei `public/robots.txt`:
+
+    ```diff title="public/robots.txt"
+    # Beispiel: Erlaube allen Bots deine Website zu scannen und zu indexieren.
+    # Vollständige Syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
+    User-agent: *
+    Allow: /
+    ```
+
+5. `astro.config.mjs` erstellen
+
+    ```js title="astro.config.mjs"
+    import { defineConfig } from "astro/config";
+
+    // https://astro.build/config
+    export default defineConfig({});
+    ```
+
+6. TypeScript‑Unterstützung hinzufügen
+
+    Erstelle `tsconfig.json`:
+
+    ```json title="tsconfig.json"
+    {
+      "extends": "astro/tsconfigs/base"
+    }
+    ```
+
+7. Projektstruktur
+
+    <FileTree>
+    - node_modules/
+    - public/
+      - robots.txt
+    - src/
+      - pages/
+        - index.astro
+    - astro.config.mjs
+    - package-lock.json oder yarn.lock, pnpm-lock.yaml usw.
+    - package.json
+    - tsconfig.json
+    </FileTree>
+
+8. Starte jetzt den Astro‑Entwicklungsserver und sieh dir die Live‑Vorschau deines Projekts an!
+</Steps>