Fix SEO/a11y issues, add Impressum UID, stop tracking raw photos

- Use absolute og:image URLs and add missing og:description on Impressum
- Load Google Fonts via <link> instead of blocking @import
- Prevent default on shop request button to avoid stray URL hash
- Guard optimize-images.js against silent filename collisions
- Add real Umsatzsteuer-Identifikationsnummer (UID) to Impressum
- Correct README's shop description to match actual empty state
- Stop tracking images/fotowebsite/ (raw, uncompressed source photos)
  since only images/optimized/ is served by the site

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .claude/
+images/fotowebsite/

README.md

@@ -23,10 +23,15 @@ Tischlerei-Staffenberger/
 │   ├── build.js             # Baut templates/ + partials/ zu den Root-HTML-Dateien
 │   └── optimize-images.js   # Erzeugt WebP/JPEG-Varianten aus images/fotowebsite/
 └── images/
-    ├── fotowebsite/     # Original-Fotos (Rohmaterial, unkomprimiert)
+    ├── fotowebsite/     # Original-Fotos (Rohmaterial, unkomprimiert) – nicht in git, siehe unten
     └── optimized/       # Generierte WebP/JPEG-Varianten (von optimize-images.js)
 ```
 
+**Hinweis zu `images/fotowebsite/`:** Die unkomprimierten Rohfotos (oft mehrere MB pro
+Bild) sind bewusst nicht in git getrackt (`.gitignore`), um das Repository klein zu
+halten – ausgeliefert wird ohnehin nur `images/optimized/`. Rohfotos bitte separat
+sichern (z. B. externe Festplatte/Cloud-Speicher), bevor sie lokal gelöscht werden.
+
 ### Seiten bearbeiten (Templates + Build)
 
 Header und Footer sind identisch auf allen Seiten und liegen daher nur einmal in
@@ -93,7 +98,7 @@ Von dort aus funktionieren alle Links, Schriftarten und Platzhalter-Bilder.
 |-------------|--------|
 | **Start**   | Banner, Willkommenstext, Über mich, Leistungen (Möbel, Küchen, Außen), CTA „Kontakt“. |
 | **Bilder**  | Galerie mit Filter: Alle / Küche / Außenbereich / Sonderanfertigung. |
-| **Shop**    | 6 Beispielprodukte mit Bild, Beschreibung, Preis und Button „Anfragen“ (öffnet E-Mail). |
+| **Shop**    | Leer bis Artikel ergänzt werden (siehe `shop-item-template.html`); jede Karte zeigt Bild, Beschreibung, Preis und Button „Anfragen” (öffnet E-Mail). |
 | **Impressum** | Anbieter, Kontakt, USt-ID, Verantwortlichkeit, Haftungsausschluss (Platzhalter). |
 
 Navigation ist auf allen Seiten gleich; die aktuelle Seite wird hervorgehoben.

css/style.css

@@ -3,8 +3,7 @@
    Traditional, warm, responsive design
    ============================================ */
 
-/* --- Google Fonts --- */
+/* Google Fonts are loaded via <link rel="preconnect"/stylesheet"> in each page's <head> */
-@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap');
 
 /* --- CSS Custom Properties --- */
 :root {

impressum.html

@@ -10,7 +10,11 @@
   <meta property="og:site_name" content="Tischlerei Staffenberger">
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Impressum – Tischlerei Staffenberger">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:description" content="Impressum der Tischlerei Staffenberger – Kontakt- und Anbieterinformationen.">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
@@ -65,7 +69,7 @@
 
         <section>
           <h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
-          <p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
+          <p>ATU52635509</p>
         </section>
 
         <section>

index.html

@@ -11,7 +11,10 @@
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Tischlerei Staffenberger – Möbel & Küchen nach Maß">
   <meta property="og:description" content="Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>

js/script.js

@@ -173,6 +173,7 @@
     var requestBtns = document.querySelectorAll('.product-card .btn[data-product]');
     requestBtns.forEach(function (btn) {
       btn.addEventListener('click', function (e) {
+        e.preventDefault();
         var product = this.getAttribute('data-product');
         if (product) {
           // Open mail with subject line (no real checkout) – replace email with your address

pictures.html

@@ -11,7 +11,10 @@
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Bilder – Tischlerei Staffenberger">
   <meta property="og:description" content="Referenzen und Bilder: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>

scripts/optimize-images.js

@@ -67,9 +67,20 @@ async function main() {
 
     console.log(`[${inputSubdir}] – ${files.length} images`);
 
+    const usedNames = new Map(); // baseName -> source filename, to catch collisions
     for (const file of files) {
       const inputPath = path.join(inputDir, file);
       const baseName  = safeName(file);
+
+      const collidesWith = usedNames.get(baseName);
+      if (collidesWith) {
+        throw new Error(
+          `Filename collision in ${inputSubdir}: "${file}" and "${collidesWith}" both normalize to "${baseName}" ` +
+          `and would overwrite each other's optimized output. Rename one of the source files and re-run.`
+        );
+      }
+      usedNames.set(baseName, file);
+
       await processImage(inputPath, outputDir, baseName, GALLERY_SIZES);
     }
   }

shop.html

@@ -11,7 +11,10 @@
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Shop – Tischlerei Staffenberger">
   <meta property="og:description" content="Kleine Serie und Einzelstücke zum Anfragen – handgefertigte Möbel nach Maß.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>

templates/impressum.html

@@ -10,7 +10,11 @@
   <meta property="og:site_name" content="Tischlerei Staffenberger">
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Impressum – Tischlerei Staffenberger">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:description" content="Impressum der Tischlerei Staffenberger – Kontakt- und Anbieterinformationen.">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
@@ -47,7 +51,7 @@
 
         <section>
           <h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
-          <p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
+          <p>ATU52635509</p>
         </section>
 
         <section>

templates/index.html

@@ -11,7 +11,10 @@
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Tischlerei Staffenberger – Möbel & Küchen nach Maß">
   <meta property="og:description" content="Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>

templates/pictures.html

@@ -11,7 +11,10 @@
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Bilder – Tischlerei Staffenberger">
   <meta property="og:description" content="Referenzen und Bilder: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>

templates/shop.html

@@ -11,7 +11,10 @@
   <meta property="og:locale" content="de_AT">
   <meta property="og:title" content="Shop – Tischlerei Staffenberger">
   <meta property="og:description" content="Kleine Serie und Einzelstücke zum Anfragen – handgefertigte Möbel nach Maß.">
-  <meta property="og:image" content="images/optimized/banner-1920w.jpg">
+  <meta property="og:image" content="https://www.tischlerei-staffenberger.at/images/optimized/banner-1920w.jpg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>