docs: Add iFrame embedding instructions to README.

README.md

@@ -154,6 +154,92 @@ server {
 
 Eine vollständige Beispiel-Konfiguration findest du in `nginx.conf.example`.
 
+## iFrame-Einbindung
+
+Hördle kann problemlos als iFrame in andere Webseiten eingebettet werden. Die App ist responsive und passt sich automatisch an die iFrame-Größe an.
+
+### Grundlegende Einbindung
+
+```html
+<iframe 
+    src="https://hoerdle.elpatron.me" 
+    width="100%" 
+    height="800" 
+    frameborder="0"
+    allow="autoplay"
+    title="Hördle - Daily Music Quiz">
+</iframe>
+```
+
+### Genre-spezifische Einbindung
+
+Einzelne Genres können direkt eingebunden werden:
+
+```html
+<!-- Rock Genre -->
+<iframe 
+    src="https://hoerdle.elpatron.me/Rock" 
+    width="100%" 
+    height="800" 
+    frameborder="0"
+    allow="autoplay"
+    title="Hördle Rock Quiz">
+</iframe>
+
+<!-- Pop Genre -->
+<iframe 
+    src="https://hoerdle.elpatron.me/Pop" 
+    width="100%" 
+    height="800" 
+    frameborder="0"
+    allow="autoplay"
+    title="Hördle Pop Quiz">
+</iframe>
+```
+
+### Special-Einbindung
+
+Auch thematische Specials können direkt eingebettet werden:
+
+```html
+<iframe 
+    src="https://hoerdle.elpatron.me/special/Weihnachtslieder" 
+    width="100%" 
+    height="800" 
+    frameborder="0"
+    allow="autoplay"
+    title="Hördle Weihnachts-Special">
+</iframe>
+```
+
+### Empfohlene Einstellungen
+
+- **Mindesthöhe:** 800px (damit alle Elemente sichtbar sind)
+- **Breite:** 100% oder mindestens 600px
+- **`allow="autoplay"`:** Erforderlich für Audio-Wiedergabe
+- **Responsive:** Die App passt sich automatisch an mobile Geräte an
+
+### Beispiel mit responsiver Höhe
+
+```html
+<div style="position: relative; padding-bottom: 133%; height: 0; overflow: hidden;">
+    <iframe 
+        src="https://hoerdle.elpatron.me" 
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+        frameborder="0"
+        allow="autoplay"
+        title="Hördle">
+    </iframe>
+</div>
+```
+
+### Hinweise
+
+- Der Spielfortschritt wird im LocalStorage des iFrames gespeichert
+- Nutzer können innerhalb des iFrames zwischen Genres wechseln (Navigation bleibt erhalten)
+- Die Teilen-Funktion funktioniert auch im iFrame
+- Für beste Performance sollte der iFrame auf derselben Domain wie die Hauptseite gehostet werden (vermeidet CORS-Probleme)
+
 ## Troubleshooting
 
 ### Audio-Dateien lassen sich nicht abspielen (in Produktion mit Nginx)