Merge pull request 'Fix #2: Korrigiere Flächenangaben laut Notarvertrag' (#3) from feature/issue-2-korrigiere-flaechenangaben into main

Reviewed-on: #3

README.md

@@ -12,3 +12,194 @@ Das Projekt basiert auf reinem HTML, CSS und JavaScript und wird über einen Ngi
 ---
 
 ## Inhaltsübersicht
+
+- [Technologien](#technologien)
+- [Projektstruktur](#projektstruktur)
+- [Voraussetzungen](#voraussetzungen)
+- [Lokale Entwicklung](#lokale-entwicklung)
+- [Deployment mit Docker](#deployment-mit-docker)
+- [Code-Qualität & Linting](#code-qualität--linting)
+- [Git-Workflow](#git-workflow)
+- [Konfigurationsdateien](#konfigurationsdateien)
+- [Lizenz](#lizenz)
+
+---
+
+## Technologien
+
+| Bereich      | Technologie                              |
+| ------------ | ---------------------------------------- |
+| Markup       | HTML5                                    |
+| Styling      | CSS3                                     |
+| Scripting    | JavaScript (Vanilla)                     |
+| Layout       | [Masonry](https://masonry.desandro.com/) |
+| Webserver    | Nginx (Alpine)                           |
+| Container    | Docker                                   |
+| Linting      | HTMLHint, Stylelint, ESLint              |
+| Formatierung | Prettier                                 |
+| Git Hooks    | Husky + lint-staged                      |
+
+---
+
+## Projektstruktur
+
+```
+├── haus-schleusingen.html      # Einstiegsseite (einzige HTML-Datei)
+├── css/
+│   └── haus-schleusingen.css   # Hauptstylesheet
+├── js/
+│   ├── haus-schleusingen.js    # Haupt-JavaScript
+│   └── masonry.pkgd.min.js    # Masonry-Layout-Bibliothek (nicht bearbeiten)
+├── fonts/
+│   └── fonts.css               # Schriftart-Einbindungen
+├── bilder/                     # Bildressourcen
+├── nginx.conf                  # Nginx-Konfiguration
+├── Dockerfile                  # Docker-Image-Definition (nginx:alpine)
+├── package.json                # Projekt-Metadaten & Skripte
+├── eslint.config.js            # ESLint-Konfiguration
+├── .htmlhintrc                 # HTMLHint-Regeln
+├── .stylelintrc.json           # Stylelint-Regeln
+├── .prettierrc                 # Prettier-Einstellungen
+├── .prettierignore             # Prettier-Ausnahmen
+├── .husky/pre-commit           # Git Pre-Commit Hook
+├── .dockerignore               # Docker Build-Ausnahmen
+└── AGENTS.md                   # Agent-Richtlinien
+```
+
+---
+
+## Voraussetzungen
+
+- **Node.js** ≥ 18
+- **npm** ≥ 9
+- **Docker** (optional, für Container-Deployment)
+
+---
+
+## Lokale Entwicklung
+
+Kein Build-Step erforderlich – das Projekt besteht aus statischen Dateien.
+
+### Abhängigkeiten installieren
+
+```bash
+npm install
+```
+
+### Lokalen Server starten
+
+Entweder mit **npx serve**:
+
+```bash
+npx serve .
+```
+
+Oder mit dem **VS Code Live Server** Plugin.
+
+### Linting ausführen
+
+```bash
+# Alle Linter auf einmal
+npm run lint
+
+# Oder einzeln
+npm run lint:html
+npm run lint:css
+npm run lint:js
+```
+
+### Code formatieren
+
+```bash
+npm run format
+```
+
+### Formatierung prüfen (ohne Änderung)
+
+```bash
+npm run format:check
+```
+
+---
+
+## Deployment mit Docker
+
+### Image bauen
+
+```bash
+docker build -t landingpage-haus-schleusingen .
+```
+
+### Container starten
+
+```bash
+# PowerShell
+docker run -d -p 8080:80 -v ${pwd}:/usr/share/nginx/html:ro landingpage-haus-schleusingen
+```
+
+Die Website ist danach erreichbar unter: **http://localhost:8080**
+
+> **Hinweis:** Die Website-Dateien werden per Volume-Mount eingebunden (`-v`), sodass Änderungen ohne Neubau des Images sofort wirksam werden.
+
+---
+
+## Code-Qualität & Linting
+
+Das Projekt verwendet mehrere Werkzeuge zur Sicherstellung der Code-Qualität:
+
+| Werkzeug  | Zweck              | Befehl              |
+| --------- | ------------------ | ------------------- |
+| HTMLHint  | HTML-Linting       | `npm run lint:html` |
+| Stylelint | CSS-Linting        | `npm run lint:css`  |
+| ESLint    | JavaScript-Linting | `npm run lint:js`   |
+| Prettier  | Code-Formatierung  | `npm run format`    |
+
+Alle Linter auf einmal ausführen:
+
+```bash
+npm run lint
+```
+
+### Wichtige Regeln
+
+- **Prettier-Formatierung ist Pflicht** – Verstöße werden als Fehler gewertet.
+- **HTMLHint**: Tag-Paarung, Kleinschreibung, eindeutige IDs, `alt`-Attribut bei Bildern und `<title>` sind Pflicht.
+- **ESLint**: Ungenutzte Variablen (`no-unused-vars`) und undefinierte Variablen (`no-undef`) ergeben Warnungen.
+- **Globale Variablen**: `browser` und `jquery` sind in der ESLint-Konfiguration freigegeben.
+- **Minifizierte Dateien** (`*.min.js`, `*.min.css`) werden von Linting und Formatierung ausgeschlossen.
+
+---
+
+## Git-Workflow
+
+Beim Committen führt **Husky** automatisch den Pre-Commit Hook (`.husky/pre-commit`) aus, der **lint-staged** startet.
+
+### lint-staged prüft automatisch:
+
+| Dateityp         | Aktionen                       |
+| ---------------- | ------------------------------ |
+| `*.html`         | HTMLHint + Prettier            |
+| `*.css`          | Stylelint (`--fix`) + Prettier |
+| `*.js`           | ESLint (`--fix`) + Prettier    |
+| `*.json`, `*.md` | Prettier                       |
+
+> Es ist kein manueller Schritt nötig – beim Committen werden nur die geänderten Dateien automatisch geprüft und formatiert.
+
+---
+
+## Konfigurationsdateien
+
+| Datei               | Beschreibung                                                                                    |
+| ------------------- | ----------------------------------------------------------------------------------------------- |
+| `.prettierrc`       | Prettier-Einstellungen (Semikolons, doppelte Anführungszeichen, 2er-Einrückung, LF-Zeilenenden) |
+| `.prettierignore`   | Ignoriert `node_modules`, `*.min.js`, `*.min.css`                                               |
+| `.htmlhintrc`       | HTMLHint-Regeln (Tag-Paarung, Kleinschreibung, IDs, `alt`-Pflicht)                              |
+| `.stylelintrc.json` | Stylelint mit `stylelint-config-standard` und Prettier-Plugin                                   |
+| `eslint.config.js`  | ESLint-Flat-Config mit Prettier-Integration                                                     |
+| `.dockerignore`     | Schließt `.git`, Skripte und Docker-Dateien vom Build aus                                       |
+
+---
+
+## Lizenz
+
+ISC

haus-schleusingen.html

@@ -88,7 +88,7 @@
         </p>
         <div class="intro-stats">
           <div>
-            <div class="istat-val">113 m²</div>
+            <div class="istat-val">154,9 m²</div>
             <div class="istat-label">Nutzfläche</div>
           </div>
           <div>
@@ -103,7 +103,7 @@
       </div>
       <div class="intro-img" data-animate>
         <img src="bilder/wohnzimmer2.png" alt="Wohnzimmer" />
-        <div class="intro-img-badge">Wohnzimmer · 24,7 m²</div>
+        <div class="intro-img-badge">Wohnzimmer · 42,6 m²</div>
       </div>
     </section>
 
@@ -123,7 +123,7 @@
         </div>
         <div class="grid-item" data-img="bilder/wohnzimmer2.png">
           <img src="bilder/wohnzimmer2-small.png" alt="Wohnzimmer" />
-          <span class="grid-item-label">Wohnzimmer · 24,7 m²</span>
+          <span class="grid-item-label">Wohnzimmer · 42,6 m²</span>
         </div>
         <div class="grid-item" data-img="bilder/Küche 1.jpg">
           <img src="bilder/Küche 1.jpg" alt="Küche" />
@@ -179,7 +179,7 @@
           <div class="floor-header">
             <span class="floor-title">Erdgeschoss</span>
             <div class="floor-size">
-              <span>99,4 m²</span>
+              <span>99,5 m²</span>
               <div class="floor-icon">+</div>
             </div>
           </div>
@@ -228,7 +228,7 @@
           <div class="floor-header">
             <span class="floor-title">1. Obergeschoss</span>
             <div class="floor-size">
-              <span>100,3 m²</span>
+              <span>120,4 m²</span>
               <div class="floor-icon">+</div>
             </div>
           </div>
@@ -240,7 +240,7 @@
               </div>
               <div class="room-chip">
                 Wohnzimmer
-                <span class="room-chip-area">24,7 m²</span>
+                <span class="room-chip-area">42,6 m²</span>
               </div>
               <div class="room-chip">
                 Gästezimmer
@@ -305,7 +305,7 @@
               </div>
               <div class="room-chip">
                 Dachterrasse
-                <span class="room-chip-area">35,8 m²</span>
+                <span class="room-chip-area">9,0 m²</span> <small>(25% von 35,8 m²)</small>
               </div>
             </div>
             <div class="floor-plan floor-plan-multi">
@@ -326,16 +326,24 @@
           <div class="floor-header">
             <span class="floor-title">Dachboden</span>
             <div class="floor-size">
-              <span>52 m² Nutzfläche</span>
+              <span>94 m² Nutzfläche</span>
               <div class="floor-icon">+</div>
             </div>
           </div>
           <div class="floor-body">
             <div class="floor-rooms-grid">
               <div class="room-chip">
-                Dachboden (ungeheizt)
+                Dachboden unten (ungeheizt)
                 <span class="room-chip-area">52 m²</span>
               </div>
+              <div class="room-chip">
+                Dachboden Mitte (ungeheizt)
+                <span class="room-chip-area">31 m²</span>
+              </div>
+              <div class="room-chip">
+                Dachboden oben (ungeheizt)
+                <span class="room-chip-area">11 m²</span>
+              </div>
             </div>
             <div class="floor-plan floor-plan-multi">
               <img
@@ -440,7 +448,7 @@
 
       <div class="lage-map-wrapper">
         <iframe
-          src="https://maps.google.com/maps?q=Bahnhofstra%C3%9Fe+10+Schleusingen&t=&z=15&ie=UTF8&iwloc=&output=embed"
+          src="https://maps.google.com/maps?q=50.5090045,10.7473859&t=&z=16&ie=UTF8&iwloc=&output=embed"
           width="100%"
           height="450"
           style="border: 0"

package.json

@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "lint:html": "htmlhint \"**/*.html\"",
-    "lint:css": "stylelint \"css/**/*.css\" \"fonts/**/*.css\"",
+    "lint:css": "stylelint \"css/**/*.css\" \"fonts/**/*.css\" && echo Stylelint: No errors found",
-    "lint:js": "eslint \"js/**/*.js\" --ignore-pattern \"**/*.min.js\"",
+    "lint:js": "eslint \"js/**/*.js\" --ignore-pattern \"**/*.min.js\" && echo ESLint: No errors found",
     "lint": "npm run lint:html && npm run lint:css && npm run lint:js",
     "format": "prettier --write \"**/*.{html,css,js,json,md}\" --ignore-path .prettierignore",
     "format:check": "prettier --check \"**/*.{html,css,js,json,md}\" --ignore-path .prettierignore",