diff --git a/README.md b/README.md
index 7fab1b7..f06d83d 100644
--- a/README.md
+++ b/README.md
@@ -48,7 +48,8 @@ smart/
 ├── restricted/            Vorlagen (was man sieht) und Modelle (was es weiß)
 │   ├── header.php footer.php     Rahmen jeder Seite, Menü, Skript-Einbindung
 │   ├── home.php solar.php heat.php history.php
-│   ├── skoda.php weather.php settings.php logs.php     ← die acht Seitenvorlagen
+│   ├── skoda.php weather.php settings.php logs.php
+│   ├── einfuehrung.php                                  ← die neun Seitenvorlagen
 │   ├── rooms.php                 Etagen und Räume lesen (homeMesh), Kachelvorgabe, Symbole
 │   ├── grundriss.php             Etagen, Räume, Kachelpositionen, Bilder ändern (Reiter Grundriss)
 │   ├── zeitleiste.php            Automatiken eines Tages: Lage, Bahn, ob dran, Läufe
@@ -190,6 +191,7 @@ genau die Topics, die auf den Kacheln stehen (`tileTopics()` in `rooms.php`).
 | `weather` | `weather.php` | `weatherMQTT.js` | nichts — das Meteogramm ist ein fremdes Dokument im `<iframe>` (`js/meteogram.js`) | `weatherStation/#` |
 | `settings` | `settings.php` | `settings.js`, `grundriss.js` | `settings.php?action=…` | — |
 | `logs` | `logs.php` | `logs.js` | `logs.php?action=…` | — |
+| `einfuehrung` | `einfuehrung.php` | `einfuehrung.js` | nichts — Folien und Bilder stehen in der Seite | — |
 
 Und dasselbe als Abhängigkeitsbild — von der Seite bis in den Speicher:
 
@@ -851,6 +853,23 @@ und das Skript lädt und `window.fetch` durch eine Attrappe mit echten Daten
 ersetzt. Damit lässt sich das Zeichnen prüfen, ohne angemeldet zu sein und
 ohne etwas zu speichern.
 
+**Die Einführung** (Menü → Einführung) sind Folien für Einsteiger in zwei
+Teilen: Bedienen im Alltag, Einrichten und Verwalten. Die Texte stehen in
+`einfuehrungFolien()` in `restricted/einfuehrung.php`, die Bilder sind echte
+Aufnahmen unter `assets/img/einfuehrung`. Ändert sich die Oberfläche, nimmt
+`tools/einfuehrung/aufnehmen.ps1` sie auf dem Arbeitsrechner neu auf — Edge
+ohne Fenster über das DevTools-Protokoll, mit echten Wartezeiten für die
+Livewerte, Klicks und Scrollen laut `plan.json`:
+
+```powershell
+powershell -ExecutionPolicy Bypass -File tools\einfuehrung\aufnehmen.ps1 -Plan tools\einfuehrung\plan.json -Ausgabe assets\img\einfuehrung
+```
+
+Zu jedem Bild schreibt es eine `.json` mit der Lage der markierten Elemente;
+daraus setzt die Seite ihre nummerierten Punkte, sie wandern also mit. Ort und
+Koordinaten im Wetterkopf sowie die Endungen der Fahrzeugschlüssel deckt der
+Plan vor der Aufnahme ab. Die Seite muss dafür im Heimnetz erreichbar sein.
+
 Zwei Repositories, beide auf Gitea (`gitea.nas.el-wa.org`):
 
 | Repo | Ort | Inhalt |
diff --git a/assets/img/einfuehrung/bewaesserung.jpg b/assets/img/einfuehrung/bewaesserung.jpg
new file mode 100644
index 0000000..dcd4102
Binary files /dev/null and b/assets/img/einfuehrung/bewaesserung.jpg differ
diff --git a/assets/img/einfuehrung/editor_dann.jpg b/assets/img/einfuehrung/editor_dann.jpg
new file mode 100644
index 0000000..3c0f082
Binary files /dev/null and b/assets/img/einfuehrung/editor_dann.jpg differ
diff --git a/assets/img/einfuehrung/editor_dann.json b/assets/img/einfuehrung/editor_dann.json
new file mode 100644
index 0000000..4704a8a
--- /dev/null
+++ b/assets/img/einfuehrung/editor_dann.json
@@ -0,0 +1 @@
+{"1":{"x":50,"y":75.3},"2":{"x":13,"y":84.5},"3":{"x":88.5,"y":92.5}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/editor_wann.jpg b/assets/img/einfuehrung/editor_wann.jpg
new file mode 100644
index 0000000..8218f6f
Binary files /dev/null and b/assets/img/einfuehrung/editor_wann.jpg differ
diff --git a/assets/img/einfuehrung/editor_wann.json b/assets/img/einfuehrung/editor_wann.json
new file mode 100644
index 0000000..7717244
--- /dev/null
+++ b/assets/img/einfuehrung/editor_wann.json
@@ -0,0 +1 @@
+{"1":{"x":81,"y":29.9},"2":{"x":16.5,"y":36.4},"3":{"x":19.7,"y":40.9},"4":{"x":8.1,"y":45},"5":{"x":50,"y":49.7}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/editor_wenn.jpg b/assets/img/einfuehrung/editor_wenn.jpg
new file mode 100644
index 0000000..763bfa2
Binary files /dev/null and b/assets/img/einfuehrung/editor_wenn.jpg differ
diff --git a/assets/img/einfuehrung/editor_wenn.json b/assets/img/einfuehrung/editor_wenn.json
new file mode 100644
index 0000000..1fe4cdc
--- /dev/null
+++ b/assets/img/einfuehrung/editor_wenn.json
@@ -0,0 +1 @@
+{"1":{"x":35.3,"y":16.7},"2":{"x":50,"y":37.8},"3":{"x":86,"y":23.7},"4":{"x":12.8,"y":50.9}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/einst_fahrzeug.jpg b/assets/img/einfuehrung/einst_fahrzeug.jpg
new file mode 100644
index 0000000..808b203
Binary files /dev/null and b/assets/img/einfuehrung/einst_fahrzeug.jpg differ
diff --git a/assets/img/einfuehrung/einst_geraete.jpg b/assets/img/einfuehrung/einst_geraete.jpg
new file mode 100644
index 0000000..29b21ea
Binary files /dev/null and b/assets/img/einfuehrung/einst_geraete.jpg differ
diff --git a/assets/img/einfuehrung/einst_geraete.json b/assets/img/einfuehrung/einst_geraete.json
new file mode 100644
index 0000000..66d11b1
--- /dev/null
+++ b/assets/img/einfuehrung/einst_geraete.json
@@ -0,0 +1 @@
+{"1":{"x":36.2,"y":45.3},"2":{"x":65.9,"y":54},"3":{"x":95.5,"y":54.1}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/einst_grundriss.jpg b/assets/img/einfuehrung/einst_grundriss.jpg
new file mode 100644
index 0000000..ea79ee6
Binary files /dev/null and b/assets/img/einfuehrung/einst_grundriss.jpg differ
diff --git a/assets/img/einfuehrung/einst_grundriss.json b/assets/img/einfuehrung/einst_grundriss.json
new file mode 100644
index 0000000..0579774
--- /dev/null
+++ b/assets/img/einfuehrung/einst_grundriss.json
@@ -0,0 +1 @@
+{"1":{"x":59.8,"y":23.4},"2":{"x":46.7,"y":56.2},"3":{"x":0,"y":0},"4":{"x":76.9,"y":88.3},"5":{"x":85.1,"y":115.3}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/einst_kacheln.jpg b/assets/img/einfuehrung/einst_kacheln.jpg
new file mode 100644
index 0000000..c82f632
Binary files /dev/null and b/assets/img/einfuehrung/einst_kacheln.jpg differ
diff --git a/assets/img/einfuehrung/einst_kacheln.json b/assets/img/einfuehrung/einst_kacheln.json
new file mode 100644
index 0000000..3d3f5a6
--- /dev/null
+++ b/assets/img/einfuehrung/einst_kacheln.json
@@ -0,0 +1 @@
+{"1":{"x":59.8,"y":13},"2":{"x":59.8,"y":20.8},"3":{"x":28.9,"y":27.6},"4":{"x":26.5,"y":32.6}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/einst_preise.jpg b/assets/img/einfuehrung/einst_preise.jpg
new file mode 100644
index 0000000..24534f0
Binary files /dev/null and b/assets/img/einfuehrung/einst_preise.jpg differ
diff --git a/assets/img/einfuehrung/einst_preise.json b/assets/img/einfuehrung/einst_preise.json
new file mode 100644
index 0000000..d58043b
--- /dev/null
+++ b/assets/img/einfuehrung/einst_preise.json
@@ -0,0 +1 @@
+{"1":{"x":33.3,"y":16.6},"2":{"x":93.6,"y":23.5},"3":{"x":26.2,"y":81.4}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/heizstab.jpg b/assets/img/einfuehrung/heizstab.jpg
new file mode 100644
index 0000000..5f99ef1
Binary files /dev/null and b/assets/img/einfuehrung/heizstab.jpg differ
diff --git a/assets/img/einfuehrung/heizung.jpg b/assets/img/einfuehrung/heizung.jpg
new file mode 100644
index 0000000..cb64d07
Binary files /dev/null and b/assets/img/einfuehrung/heizung.jpg differ
diff --git a/assets/img/einfuehrung/historie.jpg b/assets/img/einfuehrung/historie.jpg
new file mode 100644
index 0000000..8bfff6e
Binary files /dev/null and b/assets/img/einfuehrung/historie.jpg differ
diff --git a/assets/img/einfuehrung/home.jpg b/assets/img/einfuehrung/home.jpg
new file mode 100644
index 0000000..4cb8c4e
Binary files /dev/null and b/assets/img/einfuehrung/home.jpg differ
diff --git a/assets/img/einfuehrung/home.json b/assets/img/einfuehrung/home.json
new file mode 100644
index 0000000..ec907ea
--- /dev/null
+++ b/assets/img/einfuehrung/home.json
@@ -0,0 +1 @@
+{"1":{"x":11.5,"y":30.4},"2":{"x":49.4,"y":26.9},"3":{"x":64.9,"y":29.9}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/jahresvergleich.jpg b/assets/img/einfuehrung/jahresvergleich.jpg
new file mode 100644
index 0000000..9e791f5
Binary files /dev/null and b/assets/img/einfuehrung/jahresvergleich.jpg differ
diff --git a/assets/img/einfuehrung/menue.jpg b/assets/img/einfuehrung/menue.jpg
new file mode 100644
index 0000000..b74e8e0
Binary files /dev/null and b/assets/img/einfuehrung/menue.jpg differ
diff --git a/assets/img/einfuehrung/menue.json b/assets/img/einfuehrung/menue.json
new file mode 100644
index 0000000..574c9fc
--- /dev/null
+++ b/assets/img/einfuehrung/menue.json
@@ -0,0 +1 @@
+{"1":{"x":35.1,"y":16},"2":{"x":35.1,"y":51.5},"3":{"x":32.1,"y":66.5},"4":{"x":9.2,"y":3.3}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/protokolle.jpg b/assets/img/einfuehrung/protokolle.jpg
new file mode 100644
index 0000000..7d51699
Binary files /dev/null and b/assets/img/einfuehrung/protokolle.jpg differ
diff --git a/assets/img/einfuehrung/raum_beschattung.jpg b/assets/img/einfuehrung/raum_beschattung.jpg
new file mode 100644
index 0000000..fec70b1
Binary files /dev/null and b/assets/img/einfuehrung/raum_beschattung.jpg differ
diff --git a/assets/img/einfuehrung/raum_beschattung.json b/assets/img/einfuehrung/raum_beschattung.json
new file mode 100644
index 0000000..b735ae0
--- /dev/null
+++ b/assets/img/einfuehrung/raum_beschattung.json
@@ -0,0 +1 @@
+{"1":{"x":50,"y":14},"2":{"x":14.1,"y":24.1},"3":{"x":59.2,"y":30.5}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/raum_heizung.jpg b/assets/img/einfuehrung/raum_heizung.jpg
new file mode 100644
index 0000000..13aa308
Binary files /dev/null and b/assets/img/einfuehrung/raum_heizung.jpg differ
diff --git a/assets/img/einfuehrung/raum_heizung.json b/assets/img/einfuehrung/raum_heizung.json
new file mode 100644
index 0000000..b89145c
--- /dev/null
+++ b/assets/img/einfuehrung/raum_heizung.json
@@ -0,0 +1 @@
+{"1":{"x":50,"y":51.3},"2":{"x":15.6,"y":54.7}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/raum_licht.jpg b/assets/img/einfuehrung/raum_licht.jpg
new file mode 100644
index 0000000..6864236
Binary files /dev/null and b/assets/img/einfuehrung/raum_licht.jpg differ
diff --git a/assets/img/einfuehrung/raum_licht.json b/assets/img/einfuehrung/raum_licht.json
new file mode 100644
index 0000000..c1155e8
--- /dev/null
+++ b/assets/img/einfuehrung/raum_licht.json
@@ -0,0 +1 @@
+{"1":{"x":50,"y":51.5}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/skoda.jpg b/assets/img/einfuehrung/skoda.jpg
new file mode 100644
index 0000000..91cea22
Binary files /dev/null and b/assets/img/einfuehrung/skoda.jpg differ
diff --git a/assets/img/einfuehrung/skoda_ladungen.jpg b/assets/img/einfuehrung/skoda_ladungen.jpg
new file mode 100644
index 0000000..1bdf62f
Binary files /dev/null and b/assets/img/einfuehrung/skoda_ladungen.jpg differ
diff --git a/assets/img/einfuehrung/solar_fluss.jpg b/assets/img/einfuehrung/solar_fluss.jpg
new file mode 100644
index 0000000..841e5d3
Binary files /dev/null and b/assets/img/einfuehrung/solar_fluss.jpg differ
diff --git a/assets/img/einfuehrung/solar_fluss.json b/assets/img/einfuehrung/solar_fluss.json
new file mode 100644
index 0000000..103dc9a
--- /dev/null
+++ b/assets/img/einfuehrung/solar_fluss.json
@@ -0,0 +1 @@
+{"1":{"x":32.1,"y":32.2},"2":{"x":28.3,"y":52.1},"3":{"x":32,"y":71.4},"4":{"x":46.7,"y":52.5},"5":{"x":60.6,"y":52},"6":{"x":77.6,"y":51.5},"7":{"x":82.4,"y":75},"8":{"x":82.4,"y":27.5},"9":{"x":68,"y":27.7},"10":{"x":68,"y":75.2},"11":{"x":52.5,"y":75.2},"12":{"x":0,"y":0}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/solar_statistik.jpg b/assets/img/einfuehrung/solar_statistik.jpg
new file mode 100644
index 0000000..35cc04c
Binary files /dev/null and b/assets/img/einfuehrung/solar_statistik.jpg differ
diff --git a/assets/img/einfuehrung/solar_verlauf.jpg b/assets/img/einfuehrung/solar_verlauf.jpg
new file mode 100644
index 0000000..b8e756f
Binary files /dev/null and b/assets/img/einfuehrung/solar_verlauf.jpg differ
diff --git a/assets/img/einfuehrung/wallbox.jpg b/assets/img/einfuehrung/wallbox.jpg
new file mode 100644
index 0000000..5c835df
Binary files /dev/null and b/assets/img/einfuehrung/wallbox.jpg differ
diff --git a/assets/img/einfuehrung/wetter.jpg b/assets/img/einfuehrung/wetter.jpg
new file mode 100644
index 0000000..d26670e
Binary files /dev/null and b/assets/img/einfuehrung/wetter.jpg differ
diff --git a/assets/img/einfuehrung/zeitleiste.jpg b/assets/img/einfuehrung/zeitleiste.jpg
new file mode 100644
index 0000000..563f2b1
Binary files /dev/null and b/assets/img/einfuehrung/zeitleiste.jpg differ
diff --git a/assets/img/einfuehrung/zeitleiste.json b/assets/img/einfuehrung/zeitleiste.json
new file mode 100644
index 0000000..d290a50
--- /dev/null
+++ b/assets/img/einfuehrung/zeitleiste.json
@@ -0,0 +1 @@
+{"1":{"x":34.9,"y":20.5},"2":{"x":49.3,"y":25.1},"3":{"x":25,"y":28.9},"4":{"x":30.8,"y":32.8},"5":{"x":-0.5,"y":36.8}}
\ No newline at end of file
diff --git a/assets/img/einfuehrung/zeitleiste_karte.jpg b/assets/img/einfuehrung/zeitleiste_karte.jpg
new file mode 100644
index 0000000..563f115
Binary files /dev/null and b/assets/img/einfuehrung/zeitleiste_karte.jpg differ
diff --git a/assets/img/einfuehrung/zeitleiste_karte.json b/assets/img/einfuehrung/zeitleiste_karte.json
new file mode 100644
index 0000000..2dac9f4
--- /dev/null
+++ b/assets/img/einfuehrung/zeitleiste_karte.json
@@ -0,0 +1 @@
+{"1":{"x":50,"y":66.2},"2":{"x":24.3,"y":79},"3":{"x":51,"y":79},"4":{"x":84.7,"y":79}}
\ No newline at end of file
diff --git a/css/solar.css b/css/solar.css
index b3d2c58..a195bb2 100644
--- a/css/solar.css
+++ b/css/solar.css
@@ -3166,6 +3166,265 @@ input[type='range']::-webkit-slider-runnable-track {
 }
 .zl-karte-knoepfe .btn.zl-karte-weg:hover { color: var(--ton-schlecht, #e06060); }
 
+/* ===========================================================================
+   Einfuehrung (restricted/einfuehrung.php, js/solar/einfuehrung.js)
+
+   Eine Folie: links das Bild in einem ruhigen Rahmen (Handy-Aufnahmen
+   schmal wie ein Telefon, Desktop-Aufnahmen breit), rechts der Text mit den
+   nummerierten Erklaerungen. Auf schmalen Schirmen untereinander.
+   =========================================================================== */
+.ef {
+  max-width: 1180px;
+  margin: 0 auto 2rem;
+  outline: none;
+}
+.ef-kopf {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .6rem 1rem;
+  margin-bottom: .6rem;
+}
+.ef-teile { display: flex; gap: .35rem; flex-wrap: wrap; }
+.ef-teil {
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  padding: .3rem .8rem .3rem .35rem;
+  border: 1px solid var(--ton-linie, rgba(138, 148, 158, .2));
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ton-schrift-2, #9aa6ad);
+  font: 500 .85rem var(--font-anzeige, inherit);
+  cursor: pointer;
+  transition: background .15s, border-color .15s, color .15s;
+}
+.ef-teil-nr {
+  display: inline-grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  background: rgba(138, 148, 158, .18);
+  font-size: .75rem;
+}
+.ef-teil.aktiv {
+  border-color: var(--ton-sonne, #f0b429);
+  color: var(--ton-schrift, #e8ede9);
+  background: rgba(var(--ton-sonne-rgb, 240, 180, 41), .1);
+}
+.ef-teil.aktiv .ef-teil-nr { background: var(--ton-sonne, #f0b429); color: #1b1f22; }
+.ef-kopf .form-select.ef-kapitel { width: auto; min-width: 12rem; margin-left: auto; }
+.ef-zaehler {
+  font-size: .8rem;
+  color: var(--ton-schrift-3, #6f7a81);
+  font-variant-numeric: tabular-nums;
+  min-width: 3.5rem;
+  text-align: right;
+}
+.ef-fortschritt {
+  height: 3px;
+  border-radius: 2px;
+  background: var(--ton-linie, rgba(138, 148, 158, .2));
+  margin-bottom: 1.2rem;
+  overflow: hidden;
+}
+.ef-fortschritt span {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: var(--ton-sonne, #f0b429);
+  transition: width .35s ease;
+}
+
+/* Buehne und Folie */
+.ef-buehne { position: relative; }
+.ef-folie {
+  display: grid;
+  gap: 2rem;
+  align-items: center;
+  padding: 1.6rem;
+  border-radius: var(--ton-radius, .875rem);
+  background: var(--ton-flaeche, #23282c);
+  border: 1px solid var(--ton-linie, rgba(138, 148, 158, .2));
+  min-height: 34rem;
+}
+.ef-folie.mit-bild.form-handy { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
+.ef-folie.mit-bild.form-breit { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
+.ef-folie.ohne-bild { grid-template-columns: minmax(0, 46rem); justify-content: center; }
+.ef-folie.rein-vor  { animation: ef-rein-vor .32s ease both; }
+.ef-folie.rein-rueck { animation: ef-rein-rueck .32s ease both; }
+@keyframes ef-rein-vor   { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
+@keyframes ef-rein-rueck { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) {
+  .ef-folie.rein-vor, .ef-folie.rein-rueck { animation: none; }
+}
+
+.ef-bild { margin: 0; justify-self: center; width: 100%; }
+.ef-rahmen {
+  position: relative;
+  border-radius: 14px;
+  overflow: visible;
+  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
+}
+.ef-rahmen img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 14px;
+  border: 1px solid var(--ton-linie-satt, rgba(138, 148, 158, .38));
+}
+/* Handy-Aufnahmen in einem angedeuteten Telefon. */
+.form-handy .ef-rahmen {
+  max-width: 330px;
+  margin: 0 auto;
+  padding: 10px;
+  border-radius: 30px;
+  background: #0d0f11;
+  border: 1px solid rgba(138, 148, 158, .3);
+}
+.form-handy .ef-rahmen img { border-radius: 22px; border: 0; }
+
+/* Die nummerierten Punkte im Bild */
+.ef-marke {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--ton-sonne, #f0b429);
+  color: #1b1f22;
+  font: 700 .8rem var(--font-anzeige, inherit);
+  box-shadow: 0 0 0 3px rgba(27, 31, 34, .85), 0 4px 10px rgba(0, 0, 0, .45);
+  cursor: pointer;
+  z-index: 2;
+  transition: transform .15s ease, box-shadow .15s ease;
+}
+.ef-marke::after {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  border-radius: 50%;
+  border: 2px solid rgba(var(--ton-sonne-rgb, 240, 180, 41), .55);
+  animation: ef-puls 2.4s ease-out infinite;
+}
+.ef-marke.hell { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 3px rgba(27, 31, 34, .85), 0 0 0 8px rgba(var(--ton-sonne-rgb, 240, 180, 41), .35); }
+@keyframes ef-puls { 0% { transform: scale(.8); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .ef-marke::after { animation: none; opacity: 0; } }
+
+/* Text */
+.ef-kapitelname {
+  font-size: .72rem;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--ton-sonne, #f0b429);
+  margin-bottom: .4rem;
+}
+.ef-titel {
+  font: 600 1.7rem/1.2 var(--font-anzeige, inherit);
+  color: var(--ton-schrift, #e8ede9);
+  margin: 0 0 .8rem;
+}
+.ef-einleitung {
+  font-size: 1.02rem;
+  line-height: 1.6;
+  color: var(--ton-schrift-2, #9aa6ad);
+  margin-bottom: 1.1rem;
+}
+.ef-einleitung b, .ef-marken b, .ef-punkte b, .ef-tipp b { color: var(--ton-schrift, #e8ede9); font-weight: 600; }
+.ef-marken {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: .35rem;
+}
+.ef-marken li {
+  display: flex;
+  gap: .7rem;
+  align-items: flex-start;
+  padding: .45rem .6rem;
+  border-radius: 10px;
+  color: var(--ton-schrift-2, #9aa6ad);
+  line-height: 1.5;
+  cursor: pointer;
+  transition: background .15s;
+}
+.ef-marken li:hover, .ef-marken li.hell { background: rgba(var(--ton-sonne-rgb, 240, 180, 41), .09); }
+.ef-marke-nr {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
+  border-radius: 50%;
+  background: var(--ton-sonne, #f0b429);
+  color: #1b1f22;
+  font: 700 .72rem var(--font-anzeige, inherit);
+}
+.ef-punkte {
+  padding-left: 1.1rem;
+  margin: 0 0 1rem;
+  color: var(--ton-schrift-2, #9aa6ad);
+  line-height: 1.6;
+}
+.ef-punkte li { margin-bottom: .45rem; }
+.ef-punkte li::marker { color: var(--ton-sonne, #f0b429); }
+.ef-tipp {
+  display: flex;
+  gap: .6rem;
+  align-items: flex-start;
+  margin: .4rem 0 0;
+  padding: .7rem .9rem;
+  border-radius: 10px;
+  background: rgba(0, 120, 143, .14);
+  border: 1px solid rgba(0, 120, 143, .35);
+  color: var(--ton-schrift, #e8ede9);
+  font-size: .92rem;
+  line-height: 1.5;
+}
+.ef-tipp .bi { color: #35b6cf; margin-top: .1rem; }
+
+/* Fuss */
+.ef-fuss {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+.ef-punkte-nav {
+  flex: 1 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+}
+.ef-punkt {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(138, 148, 158, .3);
+  cursor: pointer;
+  transition: background .15s, transform .15s;
+}
+.ef-punkt.neuer-teil { margin-left: 10px; }
+.ef-punkt.aktiv { background: var(--ton-sonne, #f0b429); transform: scale(1.35); }
+
+@media (max-width: 991.98px) {
+  .ef-folie.mit-bild.form-handy,
+  .ef-folie.mit-bild.form-breit { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
+  .ef-folie { padding: 1rem; min-height: 0; }
+  .form-handy .ef-rahmen { max-width: 280px; }
+  .ef-titel { font-size: 1.4rem; }
+  .ef-kopf .form-select.ef-kapitel { margin-left: 0; flex: 1 1 12rem; }
+  .ef-punkte-nav { display: none; }
+  .ef-fuss { justify-content: space-between; position: sticky; bottom: 0; padding: .6rem 0; background: var(--ton-grund, #191d20); z-index: 5; }
+}
+
 /* Ansicht umschalten: eine Klasse mehr als Bootstrap (solar.css laedt vorher). */
 .zl-ansicht .btn.active {
   background: rgba(0, 120, 143, .25);
diff --git a/index.php b/index.php
index c5ecf56..4a3a6f5 100644
--- a/index.php
+++ b/index.php
@@ -115,6 +115,8 @@ if (isset($_GET["addUser"])) {
                       "scripts" => ["js/solar/settings.js", "js/solar/grundriss.js"]],
         "logs"    => ["template" => "logs.php",    "mqtt" => false, "charts" => false, "meteogram" => false, "leaflet" => false,
                       "scripts" => ["js/solar/logs.js"]],
+        "einfuehrung" => ["template" => "einfuehrung.php", "mqtt" => false, "charts" => false, "meteogram" => false, "leaflet" => false,
+                      "scripts" => ["js/solar/einfuehrung.js"]],
     ];
 
     // Unbekannte oder fehlende Aktion faellt auf die Solar-Seite zurueck.
diff --git a/js/solar/einfuehrung.js b/js/solar/einfuehrung.js
new file mode 100644
index 0000000..21fdbbc
--- /dev/null
+++ b/js/solar/einfuehrung.js
@@ -0,0 +1,133 @@
+/* ==========================================================================
+   Einführung als Folien (restricted/einfuehrung.php).
+
+   Blättern mit den Knöpfen, den Pfeiltasten oder durch Wischen. Die Folie
+   steht in der Adresse (#folie-7), damit man sie verlinken und nach einem
+   Neuladen dort weitermachen kann. Eine Erklärung antippen lässt ihren Punkt
+   im Bild aufleuchten - und umgekehrt.
+   ========================================================================== */
+
+document.addEventListener("DOMContentLoaded", function () {
+  const ef = document.getElementById("einfuehrung");
+  if (!ef) return;
+
+  const folien = [...ef.querySelectorAll(".ef-folie")];
+  const zurueck = ef.querySelector(".ef-zurueck");
+  const weiter = ef.querySelector(".ef-weiter");
+  const zaehler = ef.querySelector(".ef-zaehler");
+  const balken = ef.querySelector(".ef-fortschritt span");
+  const kapitelWahl = ef.querySelector(".ef-kapitel");
+  const punkteNav = ef.querySelector(".ef-punkte-nav");
+  let aktuell = 0;
+
+  // Die Punkte unten: einer je Folie, Teile durch eine Lücke getrennt.
+  folien.forEach((f, i) => {
+    const p = document.createElement("span");
+    p.className = "ef-punkt" + (i > 0 && folien[i - 1].dataset.teil !== f.dataset.teil ? " neuer-teil" : "");
+    p.dataset.ziel = i;
+    punkteNav.appendChild(p);
+  });
+  punkteNav.removeAttribute("aria-hidden");
+
+  function zeige(nr, ohneAdresse) {
+    nr = Math.max(0, Math.min(folien.length - 1, nr));
+    const richtung = nr >= aktuell ? "vor" : "rueck";
+    folien.forEach((f, i) => {
+      f.hidden = i !== nr;
+      f.classList.remove("rein-vor", "rein-rueck");
+    });
+    const f = folien[nr];
+    void f.offsetWidth;                                   // Animation neu starten
+    f.classList.add("rein-" + richtung);
+    aktuell = nr;
+
+    zaehler.textContent = (nr + 1) + " / " + folien.length;
+    balken.style.width = ((nr + 1) / folien.length * 100).toFixed(1) + "%";
+    zurueck.disabled = nr === 0;
+    weiter.innerHTML = nr === folien.length - 1
+      ? 'Von vorn<i class="bi bi-arrow-counterclockwise ms-1"></i>'
+      : 'Weiter<i class="bi bi-arrow-right ms-1"></i>';
+    ef.querySelectorAll(".ef-teil").forEach(t => t.classList.toggle("aktiv", t.dataset.teil === f.dataset.teil));
+    punkteNav.querySelectorAll(".ef-punkt").forEach((p, i) => p.classList.toggle("aktiv", i === nr));
+
+    // Das Kapitel dieser Folie in der Auswahl: die letzte Kapitel-Folie <= nr.
+    let kap = null;
+    [...kapitelWahl.options].forEach(o => { if (Number(o.value) <= nr) kap = o.value; });
+    if (kap !== null) kapitelWahl.value = kap;
+
+    if (!ohneAdresse) history.replaceState(null, "", "#folie-" + (nr + 1));
+    // Auf dem Handy nach oben, damit die neue Folie mit dem Titel beginnt.
+    const oben = ef.getBoundingClientRect().top;
+    if (oben < 0) ef.scrollIntoView({ block: "start", behavior: "smooth" });
+  }
+
+  zurueck.addEventListener("click", () => zeige(aktuell - 1));
+  weiter.addEventListener("click", () => zeige(aktuell === folien.length - 1 ? 0 : aktuell + 1));
+  kapitelWahl.addEventListener("change", () => zeige(Number(kapitelWahl.value)));
+  ef.querySelectorAll(".ef-teil").forEach(t => t.addEventListener("click", () => {
+    zeige(folien.findIndex(f => f.dataset.teil === t.dataset.teil));
+  }));
+  punkteNav.addEventListener("click", e => {
+    const p = e.target.closest(".ef-punkt");
+    if (p) zeige(Number(p.dataset.ziel));
+  });
+
+  document.addEventListener("keydown", e => {
+    if (e.target.closest("input, select, textarea")) return;
+    if (e.key === "ArrowRight" || e.key === "PageDown") { zeige(aktuell + 1); e.preventDefault(); }
+    if (e.key === "ArrowLeft" || e.key === "PageUp") { zeige(aktuell - 1); e.preventDefault(); }
+    if (e.key === "Home") zeige(0);
+    if (e.key === "End") zeige(folien.length - 1);
+  });
+
+  // Wischen: waagerecht deutlich, senkrecht wenig - sonst ist es Scrollen.
+  let start = null;
+  ef.querySelector(".ef-buehne").addEventListener("touchstart", e => {
+    start = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }, { passive: true });
+  ef.querySelector(".ef-buehne").addEventListener("touchend", e => {
+    if (!start) return;
+    const dx = e.changedTouches[0].clientX - start.x;
+    const dy = e.changedTouches[0].clientY - start.y;
+    start = null;
+    if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5) zeige(aktuell + (dx < 0 ? 1 : -1));
+  }, { passive: true });
+
+  // Erklärung und Punkt im Bild gehören zusammen: das eine hebt das andere hervor.
+  function hervorheben(folie, nr, an) {
+    folie.querySelectorAll('[data-marke="' + nr + '"]').forEach(el => el.classList.toggle("hell", an));
+  }
+  folien.forEach(folie => {
+    folie.addEventListener("mouseover", e => {
+      const el = e.target.closest("[data-marke]");
+      if (el) hervorheben(folie, el.dataset.marke, true);
+    });
+    folie.addEventListener("mouseout", e => {
+      const el = e.target.closest("[data-marke]");
+      if (el) hervorheben(folie, el.dataset.marke, false);
+    });
+    folie.addEventListener("click", e => {
+      const el = e.target.closest("[data-marke]");
+      if (!el) return;
+      const nr = el.dataset.marke;
+      folie.querySelectorAll("[data-marke]").forEach(x => x.classList.remove("hell"));
+      hervorheben(folie, nr, true);
+      // Auf dem Handy liegt das Bild über dem Text: zum Punkt scrollen.
+      const punkt = folie.querySelector('.ef-marke[data-marke="' + nr + '"]');
+      if (punkt && el.tagName === "LI") {
+        const r = punkt.getBoundingClientRect();
+        if (r.top < 60 || r.bottom > window.innerHeight) punkt.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    });
+  });
+
+  // Ein Link auf eine Folie in einem schon offenen Tab ändert nur den Anker -
+  // die Seite lädt dann nicht neu, also hier nachziehen.
+  window.addEventListener("hashchange", () => {
+    const t = /^#folie-(\d+)$/.exec(location.hash);
+    if (t && Number(t[1]) - 1 !== aktuell) zeige(Number(t[1]) - 1, true);
+  });
+
+  const treffer = /^#folie-(\d+)$/.exec(location.hash);
+  zeige(treffer ? Number(treffer[1]) - 1 : 0, !treffer);
+});
diff --git a/restricted/einfuehrung.php b/restricted/einfuehrung.php
new file mode 100644
index 0000000..47c8de0
--- /dev/null
+++ b/restricted/einfuehrung.php
@@ -0,0 +1,452 @@
+<?php
+/**
+ * Einführung: der Smart Controller für Einsteiger, als Folien.
+ *
+ * Zwei Teile - "Bedienen im Alltag" für alle im Haus, "Einrichten und
+ * Verwalten" für die, die Räume, Geräte und Automatiken pflegen.
+ *
+ * Die Bilder sind echte Aufnahmen dieser Oberfläche und liegen unter
+ * assets/img/einfuehrung. Neu erzeugt werden sie mit
+ * tools/einfuehrung/aufnehmen.ps1 (Edge ohne Fenster, Plan in plan.json).
+ * Zu jedem Bild schreibt das Skript eine .json mit der Lage der markierten
+ * Elemente; daraus sitzen die nummerierten Punkte hier. Ändert sich die
+ * Oberfläche, genügt ein neuer Lauf - die Nummern wandern mit.
+ *
+ * Eine Folie:
+ *   teil, kapitel   Gliederung für Kopfzeile und Sprungliste
+ *   titel, text     Überschrift und Einleitung (HTML erlaubt)
+ *   bild, form      Datei in assets/img/einfuehrung, "handy" oder "breit"
+ *   marken          Nummer => Erklärung; die Lage kommt aus <bild>.json
+ *   lage            Nummer => [x, y] in Prozent, wo die .json nichts taugt
+ *   punkte          Aufzählung ohne Bildbezug
+ *   tipp            ein Satz zum Mitnehmen
+ */
+
+function einfuehrungFolien()
+{
+    return [
+        // ================================================= Teil 1: Bedienen
+        ["teil" => 1, "kapitel" => "Willkommen", "titel" => "Dein Haus auf einen Blick",
+         "text" => "Der Smart Controller zeigt, was im Haus passiert, und lässt dich vieles davon bedienen – vom Handy, Tablet oder Computer.",
+         "punkte" => [
+            "<b>Sehen</b>, wie viel Strom die Sonne gerade liefert und wohin er fließt.",
+            "<b>Bedienen</b>: Rollos, Licht, Heizung und das Laden des Autos.",
+            "<b>Automatiken</b> erledigen Wiederkehrendes von selbst – Rollos am Morgen, Hitzeschutz, Bewässerung.",
+         ],
+         "tipp" => "Mit den Pfeilen unten oder durch Wischen blätterst du weiter. Oben kannst du direkt zu einem Kapitel springen."],
+
+        ["teil" => 1, "kapitel" => "Erste Schritte", "titel" => "So findest du dich zurecht",
+         "text" => "Zu Hause im WLAN öffnet sich die Seite ohne Anmeldung. Von unterwegs meldest du dich mit einem <b>Passkey</b> an – das ist dein Fingerabdruck oder dein Gesicht am Handy, kein Passwort.",
+         "bild" => "menue.jpg", "form" => "handy",
+         "marken" => [
+            4 => "Das <b>Menü</b> öffnest du mit den drei Strichen oben links.",
+            1 => "<b>Solar</b>: Strom, Speicher, Heizung und Auto im Überblick.",
+            2 => "<b>Home</b>: dein Grundriss – hier bedienst du die Räume. Darunter die Etagen.",
+            3 => "<b>Einstellungen</b>: für die, die das System pflegen (Teil 2).",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Die Startseite: dein Grundriss",
+         "text" => "Unter <b>Home</b> siehst du jede Etage als Bild. Die kleinen Kacheln stehen in den Räumen und zeigen, was dort gerade los ist.",
+         "bild" => "home.jpg", "form" => "handy",
+         "marken" => [
+            1 => "Die <b>Kreise links</b> wechseln die Etage.",
+            2 => "Eine <b>Kachel</b> zeigt groß die Raumtemperatur, klein darüber die gewünschte, darunter die Luftfeuchte. Eine kleine Flamme heißt: die Heizung läuft.",
+            3 => "<b>Tippe auf eine Kachel</b>, um den Raum zu öffnen.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Rollos und Jalousien",
+         "text" => "Im geöffneten Raum liegt alles, was dort bedienbar ist – nach Art sortiert in Reitern.",
+         "bild" => "raum_beschattung.jpg", "form" => "breit",
+         "marken" => [
+            1 => "Die <b>Reiter</b>: Beschattung, Heizung, Licht – je nachdem, was im Raum hängt.",
+            2 => "<b>Hoch, Stopp, Runter</b>: fährt ganz auf oder zu.",
+            3 => "Mit den <b>Reglern</b> stellst du eine Höhe ein, bei Jalousien auch die Neigung der Lamellen. Losgelassen fährt sie hin.",
+         ],
+         "tipp" => "Das Bild neben den Knöpfen zeigt, wie die Jalousie gerade steht – während der Fahrt bewegt es sich mit."],
+
+        ["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Die Heizung eines Raums",
+         "text" => "Im Reiter <b>Heizung</b> stellst du ein, wie warm es werden soll.",
+         "bild" => "raum_heizung.jpg", "form" => "handy",
+         "marken" => [
+            1 => "Den <b>Regler</b> ziehen – beim Loslassen geht die neue Solltemperatur an das Thermostat.",
+            2 => "Darunter die <b>gemessene Temperatur</b> und Luftfeuchte im Raum.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Räume bedienen", "titel" => "Licht",
+         "text" => "Lampen schaltest du im Reiter <b>Licht</b> ein und aus. Dimmbare Lampen haben einen Helligkeitsregler, farbige zusätzlich Farbe und Effekt.",
+         "bild" => "raum_licht.jpg", "form" => "handy",
+         "marken" => [
+            1 => "Jede Lampe hat ihre eigene Karte: <b>Schalter</b>, <b>Farbe</b>, <b>Helligkeit</b> und <b>Effekt</b>.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Automatiken", "titel" => "Der Tag auf einen Blick",
+         "text" => "Unter dem Grundriss stehen die <b>Automatismen</b>. Jede Zeile ist eine Art Gerät – Licht, Beschattung, Bewässerung – und von links nach rechts läuft der Tag.",
+         "bild" => "zeitleiste.jpg", "form" => "handy",
+         "marken" => [
+            1 => "Mit den <b>Pfeilen</b> schaust du dir andere Tage an – etwa, was am Wochenende passiert.",
+            2 => "<b>Etagen</b> ein- und ausblenden.",
+            3 => "Hier steht, dass <b>alle</b> Automatiken angezeigt werden – keine geht verloren.",
+            4 => "Die gelbe Linie ist <b>jetzt</b>.",
+            5 => "Ein <b>Haken</b> heißt: heute schon gelaufen, mit Uhrzeit.",
+         ],
+         "punkte" => [
+            "<b>Punkt</b>: passiert zu einer festen Uhrzeit.",
+            "<b>Balken</b>: darf in diesem Zeitraum passieren, sobald eine Bedingung erfüllt ist – zum Beispiel starke Sonne.",
+            "<b>Gestrichelte Linie</b>: die untere Automatik startet nach der oberen.",
+            "<b>Kalender-Symbol</b>: an diesem Tag nicht dran, etwa am Wochenende.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Automatiken", "titel" => "Eine Automatik antippen",
+         "text" => "Ein Tipp auf einen Eintrag öffnet eine kleine Karte: was die Automatik tut, wann, und wie sie heute steht.",
+         "bild" => "zeitleiste_karte.jpg", "form" => "handy",
+         "marken" => [
+            1 => "Der <b>Stand</b> von heute – gelaufen, kommt noch, oder warum nicht.",
+            2 => "<b>Bearbeiten</b> öffnet alle Einstellungen (Teil 2).",
+            3 => "<b>Pausieren</b> hält die Automatik an, bis du sie wieder <b>fortsetzt</b>. Pausierte stehen ganz unten.",
+            4 => "<b>Löschen</b> fragt vorher nach.",
+         ],
+         "tipp" => "Pausieren ist fast immer besser als Löschen – zum Beispiel für den Urlaub."],
+
+        ["teil" => 1, "kapitel" => "Energie", "titel" => "Wohin fließt der Strom?",
+         "text" => "Die Seite <b>Solar</b> zeigt den Strom im Haus als Bild. Die Linien zwischen den Kreisen werden dicker, je mehr Strom fließt.",
+         "bild" => "solar_fluss.jpg", "form" => "breit",
+         "lage" => [1 => [31.6, 32.3], 2 => [27.7, 52.2], 3 => [31.4, 72.1], 4 => [43.9, 52.2], 5 => [59.9, 52.2],
+                    6 => [76.9, 52.2], 7 => [81.6, 75], 8 => [81.6, 27.6], 9 => [67.1, 27.2], 10 => [67.3, 75],
+                    11 => [51.7, 75], 12 => [48.8, 27.6]],
+         "marken" => [
+            1 => "<b>Sonne</b>: was die Solaranlage gerade liefert.",
+            2 => "<b>Stromnetz</b>: minus heißt, wir speisen ein; plus heißt, wir kaufen zu.",
+            3 => "<b>Hausbatterie</b>: lädt oder entlädt, darunter der Ladestand.",
+            4 => "<b>Wechselrichter</b>: Autarkie sagt, wie viel des Stroms gerade selbst erzeugt ist.",
+            5 => "<b>Verbrauch</b> im ganzen Haus.",
+            6 => "<b>Heizstab</b> im Wasserspeicher – nutzt Sonnenstrom zum Heizen.",
+            7 => "<b>Wallbox EG</b> mit Ladestand des Autos.",
+            8 => "<b>Wallbox OG</b>.",
+            9 => "Verbrauch <b>Obergeschoss</b>.",
+            10 => "Verbrauch <b>Erdgeschoss</b>.",
+            11 => "Verbrauch <b>Untergeschoss</b>.",
+            12 => "<b>Wasser</b>: Zisterne und Gartenbewässerung.",
+         ],
+         "tipp" => "Auf die Symbole von Auto, Heizstab und Wasser kannst du tippen – dann öffnet sich ihre Steuerung."],
+
+        ["teil" => 1, "kapitel" => "Energie", "titel" => "Das Auto laden",
+         "text" => "Ein Tipp auf das Auto-Symbol öffnet die <b>Wallbox</b>.",
+         "bild" => "wallbox.jpg", "form" => "handy",
+         "punkte" => [
+            "<b>Laden starten</b> bzw. stoppen.",
+            "<b>Immer laden</b>: lädt sofort, notfalls mit Strom aus dem Netz.",
+            "<b>Überschuss</b>: lädt nur mit Sonnenstrom, der sonst eingespeist würde.",
+            "<b>Ladeplanung</b>: sag, wie viel Prozent bis wann nötig sind – das System verteilt die Ladung möglichst in die Sonnenstunden.",
+            "<b>Max. Ladestrom</b> begrenzt, wie schnell geladen wird.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Energie", "titel" => "Heizstab und Gartenwasser",
+         "text" => "Auch Heizstab und Wasser haben eigene Steuerungen, erreichbar über ihre Symbole auf der Solarseite.",
+         "bild" => "bewaesserung.jpg", "form" => "handy",
+         "punkte" => [
+            "<b>Heizstab</b>: Automatik heißt, er heizt mit Überschuss; von Hand lässt sich eine Leistung vorgeben.",
+            "<b>Bewässerung</b>: jede Zone mit Minuten und einem Knopf zum Starten. Darunter steht, wann zuletzt gegossen wurde.",
+            "Die Bewässerung am Morgen läuft ohnehin automatisch – sie lässt aus, wenn es geregnet hat.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Energie", "titel" => "Ertrag und Kosten dieses Jahr",
+         "text" => "Weiter unten auf der Solarseite rechnet die <b>Statistik</b> zusammen, was die Anlage bisher gebracht hat.",
+         "bild" => "solar_statistik.jpg", "form" => "handy",
+         "punkte" => [
+            "<b>Ertrag der Anlage</b>: gesparte Stromkosten plus Einspeisevergütung.",
+            "<b>Netzkosten</b>: was trotzdem an Strom gekauft wurde.",
+            "<b>Autarkie</b>: wie viel des Verbrauchs selbst erzeugt war.",
+            "Die kleinen Pfeile vergleichen mit demselben Zeitraum im Vorjahr.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Energie", "titel" => "Der Tagesverlauf",
+         "text" => "Ganz unten auf der Solarseite zeigen zwei Diagramme den heutigen Tag: <b>Verbrauch</b> und <b>Erzeugung</b>.",
+         "bild" => "solar_verlauf.jpg", "form" => "handy",
+         "punkte" => [
+            "Die Farben stehen für die einzelnen Verbraucher bzw. Quellen – die Legende steht darunter.",
+            "Mit den Knöpfen oben am Diagramm blätterst du zu anderen Tagen.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Energie", "titel" => "Historie: Monate und Jahre",
+         "text" => "Die Seite <b>Historie</b> zeigt Verbrauch und Erzeugung über längere Zeiträume – den letzten Monat, die letzten 13 Monate, mehrere Jahre.",
+         "bild" => "historie.jpg", "form" => "handy",
+         "punkte" => [
+            "Mit der Lupe vergrößerst du einen Ausschnitt.",
+            "Weiter unten steht der <b>Jahresvergleich</b>: dieselben Kennzahlen Jahr neben Jahr.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Energie", "titel" => "Jahre vergleichen",
+         "text" => "Der <b>Jahresvergleich</b> stellt Ertrag, Netzkosten und Autarkie der Jahre nebeneinander.",
+         "bild" => "jahresvergleich.jpg", "form" => "handy",
+         "punkte" => [
+            "<b>Gleicher Zeitraum</b> vergleicht bis zum heutigen Datum – fair, auch mitten im Jahr.",
+            "<b>Ganze Jahre</b> vergleicht abgeschlossene Jahre.",
+            "Mit <b>Monatsverlauf zeigen</b> siehst du kleine Kurven je Monat.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Haus und Wetter", "titel" => "Heizung und Warmwasser",
+         "text" => "Die Seite <b>Heizung</b> zeigt den Wasserspeicher mit seinen Temperaturen oben, in der Mitte und unten, darunter den Verlauf.",
+         "bild" => "heizung.jpg", "form" => "handy",
+         "punkte" => [
+            "Oben heiß, unten kühler – das ist normal und gewollt.",
+            "Weiter unten steht auch der <b>Wasserverbrauch</b>.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Haus und Wetter", "titel" => "Wetter",
+         "text" => "Die Seite <b>Wetter</b> zeigt die Werte der eigenen Wetterstation und die Vorhersage für die nächsten Tage.",
+         "bild" => "wetter.jpg", "form" => "handy",
+         "punkte" => [
+            "Oben: Temperatur, Feuchte, Wind, Böen und Luftdruck – gemessen direkt am Haus.",
+            "Darunter die Vorhersage mit Temperatur, Regen und Wind.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Das Auto", "titel" => "Das Auto",
+         "text" => "Die Seite <b>Škoda</b> zeigt den Zustand des Autos: Ladestand, Reichweite, ob es verriegelt und angesteckt ist.",
+         "bild" => "skoda.jpg", "form" => "handy",
+         "punkte" => [
+            "Tippe auf den <b>Ladeanschluss</b>, um das Laden zu starten oder zu stoppen.",
+            "Tippe auf den <b>Innenraum</b>, um die Klimatisierung zu starten.",
+            "Der Stand oben sagt, wie aktuell die Werte sind – das Auto meldet sich nicht ständig.",
+         ]],
+
+        ["teil" => 1, "kapitel" => "Das Auto", "titel" => "Ladungen und Akku",
+         "text" => "Weiter unten stehen die letzten <b>Ladungen</b> mit Menge und Ladestand vorher und nachher, und wie gesund der Akku ist.",
+         "bild" => "skoda_ladungen.jpg", "form" => "handy"],
+
+        ["teil" => 1, "kapitel" => "Hilfe", "titel" => "Wenn etwas nicht klappt",
+         "punkte" => [
+            "<b>Striche statt Zahlen</b>: Die Werte kommen gleich – kurz warten oder die Seite neu laden. Bleibt es so, meldet das Gerät gerade nichts.",
+            "<b>Rollo reagiert nicht</b>: Einmal Stopp drücken und erneut versuchen. Bei Frost fahren Jalousien absichtlich nicht.",
+            "<b>Automatik lief nicht</b>: Eintrag antippen – der Stand sagt, ob sie heute dran war oder auf eine Bedingung wartet.",
+            "<b>Etwas ist ganz falsch eingestellt</b>: Automatik lieber pausieren als löschen und Bescheid geben.",
+         ],
+         "tipp" => "Du kannst nichts kaputtmachen: jede Automatik lässt sich pausieren, jedes Gerät auch von Hand bedienen."],
+
+        // ============================================== Teil 2: Einrichten
+        ["teil" => 2, "kapitel" => "Einstellungen", "titel" => "Einrichten und Verwalten",
+         "text" => "Dieser Teil ist für die, die das System pflegen: Preise, Grundriss, Kacheln, Geräte und Automatiken. Alles davon geht ohne Programmieren, unter <b>Einstellungen</b>.",
+         "bild" => "einst_preise.jpg", "form" => "breit",
+         "marken" => [
+            1 => "Die <b>Reiter</b>: Preise, Grundriss, Home-Kacheln, Geräte, Fahrzeug.",
+            2 => "<b>Preise</b>: trage bei einem neuen Stromvertrag einen neuen Zeitraum ein – die alten bleiben für die Statistik stehen.",
+            3 => "<b>Speichern</b> nicht vergessen.",
+         ]],
+
+        ["teil" => 2, "kapitel" => "Grundriss", "titel" => "Etagen und Räume",
+         "text" => "Im Reiter <b>Grundriss</b> legst du fest, welche Etagen es gibt, welches Bild sie zeigen und wo die Kacheln der Räume sitzen.",
+         "bild" => "einst_grundriss.jpg", "form" => "breit",
+         "lage" => [3 => [91, 42.5]],
+         "marken" => [
+            1 => "<b>Etage wählen</b> oder mit „+ Etage“ eine neue anlegen.",
+            2 => "<b>Kacheln ziehen</b>, um sie zu verschieben. Ein Tipp wählt den Raum.",
+            3 => "Ein <b>Grundrissbild</b> hochladen – ein Foto oder eine Zeichnung der Etage.",
+            4 => "<b>Neuen Raum</b> anlegen. Einem Raum ohne Kachel gibst du mit „Platzieren“ und einem Klick auf den Plan einen Platz.",
+         ],
+         "tipp" => "Den Thermostat-Zweig eines Raums schlägt die Liste vor – er sorgt für Heizsymbol und Temperaturregler."],
+
+        ["teil" => 2, "kapitel" => "Grundriss", "titel" => "Was auf einer Kachel steht",
+         "text" => "Im Reiter <b>Home-Kacheln</b> wählst du bis zu drei Werte je Kachel.",
+         "bild" => "einst_kacheln.jpg", "form" => "breit",
+         "marken" => [
+            1 => "Eine <b>Kachel aufklappen</b>.",
+            2 => "Für jeden Wert: <b>Gerät und Messwert</b> wählen, dazu Einheit, Symbol und ob er groß stehen soll.",
+            3 => "<b>Wert hinzufügen</b> – höchstens drei.",
+            4 => "<b>Speichern</b>. „Standard“ nimmt deine Auswahl wieder zurück.",
+         ]],
+
+        ["teil" => 2, "kapitel" => "Geräte", "titel" => "Geräte den Räumen zuordnen",
+         "text" => "Neue Geräte findet der Suchlauf von selbst. In welchem Raum sie hängen, legst du im Reiter <b>Geräte</b> fest – danach erscheinen sie im Raum.",
+         "bild" => "einst_geraete.jpg", "form" => "breit",
+         "marken" => [
+            1 => "<b>Suchen</b> nach Name, Art oder Raum.",
+            2 => "Den <b>Raum</b> wählen – gespeichert wird sofort.",
+            3 => "Ein abgebautes Gerät <b>entfernen</b>. Steckt es noch in einer Automatik, geht das nicht.",
+         ],
+         "tipp" => "Thermostate verraten ihren Raum selbst – oben erscheint dann „Vorschläge übernehmen“."],
+
+        ["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Eine Automatik – 1. Wenn",
+         "text" => "Eine neue Automatik legst du mit dem grünen <b>+</b> bei den Automatismen an, eine vorhandene mit „Bearbeiten“. Sie besteht aus drei Teilen: <b>Wenn</b>, <b>Wann</b>, <b>Dann</b>.",
+         "bild" => "editor_wenn.jpg", "form" => "breit",
+         "marken" => [
+            1 => "Ein <b>Name</b>, an dem du sie wiedererkennst.",
+            2 => "<b>Wenn</b>: die Bedingungen. Alle in einem Kasten müssen zutreffen – eine Uhrzeit, ein Sonnenstand, ein Messwert wie Helligkeit oder Temperatur.",
+            3 => "Hier siehst du, <b>wie viele gerade zutreffen</b>; neben jeder Bedingung steht der aktuelle Wert.",
+            4 => "<b>Oder stattdessen</b>: ein zweiter Kasten, der ebenfalls auslöst.",
+         ],
+         "tipp" => "Ausgelöst wird in dem Moment, in dem die Bedingung erfüllt wird – nicht immer wieder, solange sie erfüllt bleibt."],
+
+        ["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Eine Automatik – 2. Wann",
+         "text" => "<b>Wann</b> legt fest, an welchen Tagen und zu welchen Zeiten die Automatik überhaupt aktiv ist.",
+         "bild" => "editor_wann.jpg", "form" => "breit",
+         "marken" => [
+            1 => "<b>Vorlagen</b>: täglich, werktags (ohne Feiertage), Wochenende (mit Feiertagen).",
+            2 => "Oder die <b>Wochentage</b> einzeln wählen.",
+            3 => "<b>Ferien und Feiertage</b>: nie, egal oder immer.",
+            4 => "<b>Am Vorabend</b>: die Tage gelten für morgen – „Kinderrollos zu, wenn morgen Schule ist“.",
+            5 => "Dieser <b>Satz</b> fasst zusammen, was dabei herauskommt.",
+         ],
+         "punkte" => [
+            "<b>Nur einmal am Tag</b>: danach ist bis Mitternacht Ruhe – gut für Rollos, die du danach von Hand verstellst.",
+            "<b>Sperre</b>: Mindestabstand zwischen zwei Auslösungen, gegen Hin und Her bei wechselnder Sonne.",
+         ]],
+
+        ["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Eine Automatik – 3. Dann",
+         "text" => "<b>Dann</b> sagt, was passieren soll.",
+         "bild" => "editor_dann.jpg", "form" => "breit",
+         "marken" => [
+            1 => "Je Zeile ein <b>Gerät und ein Befehl</b>, etwa „Wohnzimmer Fensterfront: Auf“ oder eine Position mit Neigung.",
+            2 => "<b>Und noch etwas tun</b>: weitere Geräte in derselben Automatik.",
+            3 => "<b>Speichern</b> – danach steht die Automatik in der Zeitleiste.",
+         ]],
+
+        ["teil" => 2, "kapitel" => "Automatik anlegen", "titel" => "Automatiken hintereinander",
+         "text" => "Eine Automatik kann eine andere starten. Wähle dazu im <b>Wenn</b> das Gerät <b>„Automatiken“</b> und darin die auslösende.",
+         "punkte" => [
+            "Beispiel: <b>Wecker</b> um 05:50 → <b>10 Minuten danach</b>, wenn es hell ist, gehen die Rollos auf.",
+            "In der Zeitleiste verbindet eine <b>gestrichelte Linie</b> die beiden.",
+            "Wird die erste pausiert, bleibt auch die zweite still.",
+            "Beim Löschen der ersten wirst du gefragt, was mit der zweiten geschehen soll.",
+         ]],
+
+        ["teil" => 2, "kapitel" => "Fahrzeug und Protokolle", "titel" => "Zugang zum Auto",
+         "text" => "Das Auto wird über Schlüssel aus der <b>MyŠkoda-App</b> abgefragt. Sie laufen nach einiger Zeit ab und müssen dann erneuert werden – im Reiter <b>Fahrzeug</b>.",
+         "bild" => "einst_fahrzeug.jpg", "form" => "breit",
+         "punkte" => [
+            "Den neuen Schlüssel in der App erzeugen, hier einfügen, speichern – er wird sofort ausprobiert.",
+            "Aus Sicherheitsgründen zeigt die Seite nie einen ganzen Schlüssel.",
+         ]],
+
+        ["teil" => 2, "kapitel" => "Fahrzeug und Protokolle", "titel" => "Protokolle",
+         "text" => "Unter <b>Protokolle</b> stehen die Aufzeichnungen der Hintergrundprogramme – hilfreich, wenn etwas nicht so läuft wie erwartet.",
+         "bild" => "protokolle.jpg", "form" => "breit",
+         "punkte" => [
+            "Links das <b>Programm</b> wählen, zum Beispiel den Automatik-Runner.",
+            "Oben nach <b>Text</b> oder nur nach <b>Warnungen</b> filtern.",
+            "Gelb und rot markierte Zeilen sind Warnungen und Fehler.",
+         ]],
+
+        ["teil" => 2, "kapitel" => "Geschafft", "titel" => "Das Wichtigste in Kürze",
+         "punkte" => [
+            "<b>Home</b> → Kachel antippen → Raum bedienen.",
+            "<b>Automatismen</b>: Eintrag antippen → pausieren, fortsetzen, bearbeiten.",
+            "<b>Solar</b>: Stromfluss sehen, Auto, Heizstab und Wasser über ihre Symbole steuern.",
+            "<b>Einstellungen</b>: Grundriss, Kacheln, Geräte, Preise und Fahrzeug pflegen.",
+         ],
+         "tipp" => "Diese Einführung findest du jederzeit im Menü unter „Einführung“."],
+    ];
+}
+
+$folien = einfuehrungFolien();
+$bildOrdner = __DIR__ . "/../assets/img/einfuehrung/";
+foreach ($folien as $i => $f) {
+    if (empty($f["bild"]) || empty($f["marken"])) {
+        continue;
+    }
+    $lage = [];
+    $json = @file_get_contents($bildOrdner . pathinfo($f["bild"], PATHINFO_FILENAME) . ".json");
+    $gemessen = $json ? json_decode(ltrim($json, "\xEF\xBB\xBF"), true) : [];
+    foreach ($f["marken"] as $nr => $text) {
+        $p = $f["lage"][$nr] ?? null;
+        if (!$p && isset($gemessen[$nr]) && is_array($gemessen[$nr])) {
+            $x = $gemessen[$nr]["x"];
+            $y = $gemessen[$nr]["y"];
+            // Unsichtbare (0/0) oder ausserhalb des Bildes liegende Elemente
+            // bekommen keinen Punkt - die Erklärung steht trotzdem daneben.
+            if (($x > 0 || $y > 0) && $y >= 0 && $y <= 100 && $x >= 0 && $x <= 100) {
+                $p = [$x, $y];
+            }
+        }
+        $lage[$nr] = $p;
+    }
+    $folien[$i]["lage"] = $lage;
+}
+$kapitel = [];
+foreach ($folien as $i => $f) {
+    if (!isset($kapitel[$f["teil"] . "|" . $f["kapitel"]])) {
+        $kapitel[$f["teil"] . "|" . $f["kapitel"]] = ["teil" => $f["teil"], "name" => $f["kapitel"], "folie" => $i];
+    }
+}
+$teile = [1 => "Bedienen im Alltag", 2 => "Einrichten und Verwalten"];
+$version = @filemtime($bildOrdner . "home.jpg") ?: 1;
+?>
+<main class="app-main">
+  <div class="app-content-header">
+    <div class="container-fluid">
+      <h3 class="mb-0">Einführung</h3>
+    </div>
+  </div>
+  <div class="app-content">
+    <div class="container-fluid">
+      <div class="ef" id="einfuehrung" tabindex="-1">
+        <div class="ef-kopf">
+          <div class="ef-teile" role="tablist">
+<?php foreach ($teile as $nr => $name): ?>
+            <button type="button" class="ef-teil" data-teil="<?= $nr ?>">
+              <span class="ef-teil-nr"><?= $nr ?></span><?= htmlspecialchars($name) ?></button>
+<?php endforeach; ?>
+          </div>
+          <select class="form-select form-select-sm ef-kapitel" aria-label="Kapitel">
+<?php foreach ($teile as $nr => $name): ?>
+            <optgroup label="Teil <?= $nr ?> · <?= htmlspecialchars($name) ?>">
+<?php   foreach ($kapitel as $k): if ($k["teil"] !== $nr) continue; ?>
+              <option value="<?= $k["folie"] ?>"><?= htmlspecialchars($k["name"]) ?></option>
+<?php   endforeach; ?>
+            </optgroup>
+<?php endforeach; ?>
+          </select>
+          <span class="ef-zaehler"></span>
+        </div>
+        <div class="ef-fortschritt"><span></span></div>
+
+        <div class="ef-buehne">
+<?php foreach ($folien as $i => $f): $mitBild = !empty($f["bild"]); ?>
+          <section class="ef-folie<?= $mitBild ? " mit-bild form-" . htmlspecialchars($f["form"] ?? "breit") : " ohne-bild" ?>"
+                   data-nr="<?= $i ?>" data-teil="<?= $f["teil"] ?>" hidden aria-roledescription="Folie">
+<?php   if ($mitBild): ?>
+            <figure class="ef-bild">
+              <div class="ef-rahmen">
+                <img src="assets/img/einfuehrung/<?= htmlspecialchars($f["bild"]) ?>?v=<?= $version ?>"
+                     alt="<?= htmlspecialchars(strip_tags($f["titel"])) ?>" loading="<?= $i < 2 ? "eager" : "lazy" ?>">
+<?php     foreach ($f["lage"] ?? [] as $nr => $p): if (!$p) continue; ?>
+                <span class="ef-marke" data-marke="<?= $nr ?>" style="left:<?= $p[0] ?>%;top:<?= $p[1] ?>%"><?= $nr ?></span>
+<?php     endforeach; ?>
+              </div>
+            </figure>
+<?php   endif; ?>
+            <div class="ef-text">
+              <div class="ef-kapitelname">Teil <?= $f["teil"] ?> · <?= htmlspecialchars($f["kapitel"]) ?></div>
+              <h2 class="ef-titel"><?= htmlspecialchars($f["titel"]) ?></h2>
+<?php   if (!empty($f["text"])): ?>
+              <p class="ef-einleitung"><?= $f["text"] ?></p>
+<?php   endif; ?>
+<?php   if (!empty($f["marken"])): ?>
+              <ol class="ef-marken">
+<?php     foreach ($f["marken"] as $nr => $text): ?>
+                <li data-marke="<?= $nr ?>"><span class="ef-marke-nr"><?= $nr ?></span><span><?= $text ?></span></li>
+<?php     endforeach; ?>
+              </ol>
+<?php   endif; ?>
+<?php   if (!empty($f["punkte"])): ?>
+              <ul class="ef-punkte">
+<?php     foreach ($f["punkte"] as $p): ?>
+                <li><?= $p ?></li>
+<?php     endforeach; ?>
+              </ul>
+<?php   endif; ?>
+<?php   if (!empty($f["tipp"])): ?>
+              <p class="ef-tipp"><i class="bi bi-lightbulb"></i><span><?= $f["tipp"] ?></span></p>
+<?php   endif; ?>
+            </div>
+          </section>
+<?php endforeach; ?>
+        </div>
+
+        <div class="ef-fuss">
+          <button type="button" class="btn btn-outline-secondary ef-zurueck"><i class="bi bi-arrow-left me-1"></i>Zurück</button>
+          <div class="ef-punkte-nav" aria-hidden="true"></div>
+          <button type="button" class="btn btn-primary ef-weiter">Weiter<i class="bi bi-arrow-right ms-1"></i></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/restricted/header.php b/restricted/header.php
index 979b519..4f1088c 100644
--- a/restricted/header.php
+++ b/restricted/header.php
@@ -199,6 +199,14 @@ if (!isset($_GET["floor"]))
                                 <p>Protokolle</p>
                             </a>
                         </li>
+                        <!-- Die Einführung für Einsteiger - Folien zum
+                             Durchklicken, restricted/einfuehrung.php. -->
+                        <li class="nav-item">
+                            <a href="?action=einfuehrung" class="nav-link<?php if($_GET["action"]=="einfuehrung"){echo " active";} ?>">
+                                <i class="nav-icon bi bi-mortarboard"></i>
+                                <p>Einführung</p>
+                            </a>
+                        </li>
                     </ul>
                     <!--end::Sidebar Menu-->
                 </nav>
diff --git a/tools/einfuehrung/aufnehmen.ps1 b/tools/einfuehrung/aufnehmen.ps1
new file mode 100644
index 0000000..50cb2fb
--- /dev/null
+++ b/tools/einfuehrung/aufnehmen.ps1
@@ -0,0 +1,98 @@
+param(
+  [string]$Plan = "$PSScriptRoot\plan.json",
+  [string]$Ausgabe = "$PSScriptRoot\bilder"
+)
+# Edge ohne Fenster über das DevTools-Protokoll steuern: laden, echt warten,
+# optional JavaScript ausführen (klicken, scrollen), Screenshot speichern.
+
+$ErrorActionPreference = "Stop"
+New-Item -ItemType Directory -Force $Ausgabe | Out-Null
+$edge = "${env:ProgramFiles(x86)}\Microsoft\Edge\Application\msedge.exe"
+$profil = Join-Path $env:TEMP ("edge-cdp-" + [guid]::NewGuid())
+$port = 9333
+$proc = Start-Process $edge -ArgumentList @("--headless=new", "--disable-gpu", "--hide-scrollbars",
+  "--remote-debugging-port=$port", "--user-data-dir=$profil", "--no-first-run", "about:blank") -PassThru
+
+function Warte-Auf-Port {
+  for ($i = 0; $i -lt 40; $i++) {
+    try { return Invoke-RestMethod "http://127.0.0.1:$port/json/list" } catch { Start-Sleep -Milliseconds 250 }
+  }
+  throw "Edge antwortet nicht"
+}
+
+$script:id = 0
+function Sende($ws, $methode, $parameter) {
+  $script:id++
+  $nachricht = @{ id = $script:id; method = $methode; params = $parameter } | ConvertTo-Json -Depth 20 -Compress
+  $bytes = [Text.Encoding]::UTF8.GetBytes($nachricht)
+  $ws.SendAsync([ArraySegment[byte]]$bytes, [Net.WebSockets.WebSocketMessageType]::Text, $true, [Threading.CancellationToken]::None).Wait()
+  $puffer = New-Object byte[] (1024 * 1024)
+  while ($true) {
+    $ms = New-Object IO.MemoryStream
+    do {
+      $teil = $ws.ReceiveAsync([ArraySegment[byte]]$puffer, [Threading.CancellationToken]::None)
+      $teil.Wait()
+      $ms.Write($puffer, 0, $teil.Result.Count)
+    } while (-not $teil.Result.EndOfMessage)
+    $antwort = [Text.Encoding]::UTF8.GetString($ms.ToArray()) | ConvertFrom-Json
+    if ($antwort.id -eq $script:id) { return $antwort }
+  }
+}
+
+try {
+  $ziele = Warte-Auf-Port
+  $seite = $ziele | Where-Object { $_.type -eq "page" } | Select-Object -First 1
+  $ws = New-Object Net.WebSockets.ClientWebSocket
+  $ws.Options.KeepAliveInterval = [TimeSpan]::FromSeconds(20)
+  $ws.ConnectAsync([Uri]$seite.webSocketDebuggerUrl, [Threading.CancellationToken]::None).Wait()
+  Sende $ws "Page.enable" @{} | Out-Null
+  Sende $ws "Runtime.enable" @{} | Out-Null
+
+  $schritte = Get-Content $Plan -Raw -Encoding UTF8 | ConvertFrom-Json
+  $breit = 1280; $hoch = 900; $handy = $false
+  foreach ($s in $schritte) {
+    # Ein Schritt mit eigener Adresse legt die Größe fest; Schritte ohne
+    # Adresse (klicken, scrollen) behalten die des vorigen.
+    if ($s.url) {
+      $breit = if ($s.breit) { $s.breit } else { 1280 }
+      $hoch = if ($s.hoch) { $s.hoch } else { 900 }
+      $handy = [bool]$s.handy
+    }
+    $em = Sende $ws "Emulation.setDeviceMetricsOverride" @{ width = [int]$breit; height = [int]$hoch; deviceScaleFactor = $(if ($handy) { 2 } else { 1 }); mobile = $handy }
+    if ($em.error) { Write-Output ("Emulation: " + ($em.error | ConvertTo-Json -Compress)) }
+    if ($s.url) {
+      Sende $ws "Page.navigate" @{ url = $s.url } | Out-Null
+      Start-Sleep -Seconds $(if ($s.warte) { $s.warte } else { 6 })
+    }
+    # Einstellungsreiter per Klick öffnen - ein Anker in der Adresse greift
+    # nicht, wenn nur er sich ändert.
+    if ($s.vorher) {
+      Sende $ws "Runtime.evaluate" @{ expression = "new bootstrap.Tab(document.getElementById('einstellung-$($s.vorher)-tab')).show()" } | Out-Null
+      Start-Sleep -Seconds 2
+    }
+    if ($s.js) {
+      $r = Sende $ws "Runtime.evaluate" @{ expression = $s.js; awaitPromise = $true; returnByValue = $true }
+      if ($r.result.exceptionDetails) { Write-Output ("JS-Fehler in " + $s.datei + ": " + $r.result.exceptionDetails.exception.description) }
+      if ($s.zeige) { Write-Output ("JS " + $s.datei + ": " + ($r.result.result.value | ConvertTo-Json -Compress)) }
+      Start-Sleep -Seconds $(if ($s.danach) { $s.danach } else { 2 })
+    }
+    if ($s.datei) {
+      # Lage der markierten Elemente in Prozent des Bildausschnitts - daraus
+      # setzt die Einführung ihre nummerierten Punkte.
+      if ($s.marken) {
+        $sel = $s.marken | ConvertTo-Json -Compress
+        $ausdruck = "(() => { const m = $sel; const aus = {}; for (const k in m) { const el = document.querySelector(m[k]); if (!el) { aus[k] = null; continue; } const r = el.getBoundingClientRect(); aus[k] = { x: +((r.left + r.width / 2) / innerWidth * 100).toFixed(1), y: +((r.top + r.height / 2) / innerHeight * 100).toFixed(1) }; } return JSON.stringify(aus); })()"
+        $r = Sende $ws "Runtime.evaluate" @{ expression = $ausdruck; returnByValue = $true }
+        $name = [IO.Path]::GetFileNameWithoutExtension($s.datei)
+        [IO.File]::WriteAllText((Join-Path $Ausgabe "$name.json"), $r.result.result.value, [Text.Encoding]::UTF8)
+        if ($r.result.result.value -match "null") { Write-Output ("Marke fehlt in " + $s.datei + ": " + $r.result.result.value) }
+      }
+      $bild = Sende $ws "Page.captureScreenshot" @{ format = "jpeg"; quality = 82 }
+      [IO.File]::WriteAllBytes((Join-Path $Ausgabe $s.datei), [Convert]::FromBase64String($bild.result.data))
+      Write-Output ("ok  " + $s.datei)
+    }
+  }
+} finally {
+  if ($proc -and -not $proc.HasExited) { Stop-Process -Id $proc.Id -Force }
+  Get-Process msedge -ErrorAction SilentlyContinue | Where-Object { $_.CommandLine -like "*$profil*" } | Stop-Process -Force -ErrorAction SilentlyContinue
+}
diff --git a/tools/einfuehrung/plan.json b/tools/einfuehrung/plan.json
new file mode 100644
index 0000000..d6a26e1
--- /dev/null
+++ b/tools/einfuehrung/plan.json
@@ -0,0 +1,310 @@
+[
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=solar",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  9,
+        "js":  "document.querySelector(\u0027[data-lte-toggle=\"sidebar\"]\u0027).click()",
+        "danach":  2,
+        "datei":  "menue.jpg",
+        "marken":  {
+                       "1":  "a[href=\u0027?action=solar\u0027]",
+                       "2":  "a[href=\u0027?action=home\u0026floor=EG\u0027]",
+                       "3":  "a[href=\u0027?action=settings\u0027]",
+                       "4":  "[data-lte-toggle=\u0027sidebar\u0027]"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=home\u0026floor=EG",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  10,
+        "js":  "window.scrollTo({top:60, behavior:\u0027instant\u0027})",
+        "danach":  1,
+        "datei":  "home.jpg",
+        "marken":  {
+                       "1":  "g#UG.floorBtn circle",
+                       "2":  "g[onclick=\u0027openRoomView(8);\u0027] rect",
+                       "3":  "g[onclick=\u0027openRoomView(12);\u0027] rect"
+                   }
+    },
+    {
+        "js":  "openRoomView(8)",
+        "danach":  6,
+        "datei":  "raum_beschattung.jpg",
+        "marken":  {
+                       "1":  "#roomView .nav-tabs",
+                       "2":  "#roomView .raum-geraet button",
+                       "3":  "#roomView .raum-geraet input[type=range]"
+                   }
+    },
+    {
+        "js":  "document.getElementById(\u0027raumtab-heizung-tab\u0027).click()",
+        "danach":  2,
+        "datei":  "raum_heizung.jpg",
+        "marken":  {
+                       "1":  "#modal-slider",
+                       "2":  "#roomView [data-mqtt=\u0027Temp[degC]\u0027]"
+                   }
+    },
+    {
+        "js":  "document.getElementById(\u0027raumtab-licht-tab\u0027).click()",
+        "danach":  2,
+        "datei":  "raum_licht.jpg",
+        "marken":  {
+                       "1":  "#roomView .tab-pane.active .raum-geraet"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=home\u0026floor=EG",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  10,
+        "js":  "localStorage.clear(); zlAnsicht(\u0027zeitleiste\u0027); document.getElementById(\u0027zeitleiste\u0027).closest(\u0027.card\u0027).scrollIntoView({block:\u0027start\u0027, behavior:\u0027instant\u0027}); window.scrollBy({top:-70, behavior:\u0027instant\u0027})",
+        "danach":  3,
+        "datei":  "zeitleiste.jpg",
+        "marken":  {
+                       "1":  ".zl-tag",
+                       "2":  ".zl-etagen",
+                       "3":  ".zl-zahl",
+                       "4":  ".zl-jetzt-marke",
+                       "5":  ".zl-ding.gelaufen .zl-etikett"
+                   }
+    },
+    {
+        "js":  "zeitleisteLaden().then(() =\u003e new Promise(r =\u003e setTimeout(r, 800))).then(() =\u003e { const el = document.querySelector(\u0027.zl-ding[data-id=\"19\"]\u0027); el.scrollIntoView({block:\u0027center\u0027, behavior:\u0027instant\u0027}); el.click(); })",
+        "danach":  3,
+        "datei":  "zeitleiste_karte.jpg",
+        "marken":  {
+                       "1":  ".zl-karte-stand",
+                       "2":  ".zl-karte [data-tun=\u0027bearbeiten\u0027]",
+                       "3":  ".zl-karte [data-tun=\u0027umschalten\u0027]",
+                       "4":  ".zl-karte [data-tun=\u0027loeschen\u0027]"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=solar",
+        "breit":  1280,
+        "hoch":  780,
+        "warte":  12,
+        "js":  "document.querySelectorAll(\u0027.card-title\u0027).forEach(t =\u003e { if (t.textContent.includes(\u0027Forecast\u0027)) { const b = t.closest(\u0027.card\u0027).querySelector(\u0027.card-body\u0027); b.style.position = \u0027relative\u0027; const d = document.createElement(\u0027div\u0027); d.style.cssText = \u0027position:absolute;left:0;right:0;top:0;height:70px;background:#1f2326;z-index:5\u0027; b.appendChild(d); } })",
+        "danach":  1,
+        "datei":  "solar_fluss.jpg",
+        "marken":  {
+                       "1":  "#pvText",
+                       "2":  "#gridText",
+                       "3":  "#batText",
+                       "4":  "#genText",
+                       "5":  "#consumerText",
+                       "6":  "#heatText",
+                       "7":  "#evText",
+                       "8":  "#evTextOG",
+                       "9":  "#ogText",
+                       "10":  "#egText",
+                       "11":  "#ugText",
+                       "12":  "#waterState"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=solar",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  12,
+        "js":  "document.querySelectorAll(\u0027.card-title\u0027).forEach(t =\u003e { if (t.textContent.includes(\u0027Forecast\u0027)) { const b = t.closest(\u0027.card\u0027).querySelector(\u0027.card-body\u0027); b.style.position = \u0027relative\u0027; const d = document.createElement(\u0027div\u0027); d.style.cssText = \u0027position:absolute;left:0;right:0;top:0;height:70px;background:#1f2326;z-index:5\u0027; b.appendChild(d); } })",
+        "danach":  2
+    },
+    {
+        "js":  "[...document.querySelectorAll(\u0027.card-title\u0027)].find(t =\u003e t.textContent.includes(\u0027Statistik dieses Jahr\u0027)).closest(\u0027.card\u0027).scrollIntoView({block:\u0027start\u0027, behavior:\u0027instant\u0027}); window.scrollBy({top:-70, behavior:\u0027instant\u0027})",
+        "danach":  3,
+        "datei":  "solar_statistik.jpg"
+    },
+    {
+        "js":  "[...document.querySelectorAll(\u0027.card-title\u0027)].find(t =\u003e t.textContent.includes(\u0027Power production\u0027)).closest(\u0027.card\u0027).scrollIntoView({block:\u0027start\u0027, behavior:\u0027instant\u0027}); window.scrollBy({top:-70, behavior:\u0027instant\u0027})",
+        "danach":  3,
+        "datei":  "solar_verlauf.jpg"
+    },
+    {
+        "js":  "window.scrollTo({top:0, behavior:\u0027instant\u0027}); openModal(\u0027CarEG\u0027)",
+        "danach":  6,
+        "datei":  "wallbox.jpg"
+    },
+    {
+        "js":  "modalEV.hide()",
+        "danach":  2
+    },
+    {
+        "js":  "openModal(\u0027heater\u0027)",
+        "danach":  6,
+        "datei":  "heizstab.jpg"
+    },
+    {
+        "js":  "modalEV.hide()",
+        "danach":  2
+    },
+    {
+        "js":  "openModal(\u0027watering\u0027)",
+        "danach":  6,
+        "datei":  "bewaesserung.jpg"
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=history",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  12,
+        "datei":  "historie.jpg"
+    },
+    {
+        "js":  "[...document.querySelectorAll(\u0027.card-title\u0027)].find(t =\u003e t.textContent.includes(\u0027Jahresvergleich\u0027)).closest(\u0027.card\u0027).scrollIntoView({block:\u0027start\u0027, behavior:\u0027instant\u0027}); window.scrollBy({top:-70, behavior:\u0027instant\u0027})",
+        "danach":  3,
+        "datei":  "jahresvergleich.jpg"
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=heat",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  12,
+        "datei":  "heizung.jpg"
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=weather",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  14,
+        "js":  "(() =\u003e { const k = [...document.querySelectorAll(\u0027.card-title\u0027)].find(t =\u003e t.textContent.includes(\u0027Vorhersage\u0027)).closest(\u0027.card\u0027).querySelector(\u0027.card-body\u0027); k.style.position = \u0027relative\u0027; const d = document.createElement(\u0027div\u0027); d.style.cssText = \u0027position:absolute;left:0;right:0;top:0;height:78px;background:#1f2326;z-index:5\u0027; k.appendChild(d); })()",
+        "danach":  1,
+        "datei":  "wetter.jpg"
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=skoda",
+        "breit":  390,
+        "hoch":  844,
+        "handy":  true,
+        "warte":  14,
+        "datei":  "skoda.jpg"
+    },
+    {
+        "js":  "[...document.querySelectorAll(\u0027.card-title\u0027)].find(t =\u003e t.textContent.includes(\u0027Ladungen\u0027)).closest(\u0027.card\u0027).scrollIntoView({block:\u0027start\u0027, behavior:\u0027instant\u0027}); window.scrollBy({top:-70, behavior:\u0027instant\u0027})",
+        "danach":  3,
+        "datei":  "skoda_ladungen.jpg"
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=settings\u0026r=preise",
+        "breit":  1280,
+        "hoch":  860,
+        "warte":  8,
+        "vorher":  "preise",
+        "datei":  "einst_preise.jpg",
+        "marken":  {
+                       "1":  "#einstellung-grundriss-tab",
+                       "2":  ".preis-karte .preis-neu",
+                       "3":  ".preis-karte .preis-speichern"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=settings\u0026r=grundriss",
+        "breit":  1280,
+        "hoch":  860,
+        "warte":  8,
+        "vorher":  "grundriss",
+        "js":  "document.querySelector(\u0027.gr-etage[data-code=\"EG\"]\u0027).click(); setTimeout(() =\u003e { const z = [...document.querySelectorAll(\u0027.gr-raum\u0027)].find(r =\u003e r.textContent.includes(\u0027Wohnzimmer\u0027)); z.querySelector(\u0027.gr-raum-name\u0027).click(); document.getElementById(\u0027grundrissKarte\u0027).closest(\u0027.card\u0027).scrollIntoView({block:\u0027start\u0027, behavior:\u0027instant\u0027}); window.scrollBy({top:-70, behavior:\u0027instant\u0027}); }, 300)",
+        "danach":  3,
+        "datei":  "einst_grundriss.jpg",
+        "marken":  {
+                       "1":  ".gr-etagen",
+                       "2":  ".gr-kachel.gewaehlt rect",
+                       "3":  ".gr-bild",
+                       "4":  ".gr-raum-neu",
+                       "5":  "[data-block=\u0027raum\u0027] [data-feld=\u0027thermostat\u0027]"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=settings\u0026r=kacheln",
+        "breit":  1280,
+        "hoch":  860,
+        "warte":  8,
+        "vorher":  "kacheln",
+        "js":  "kachelOeffnen(\u0027EG\u0027,\u0027technik\u0027).then(() =\u003e { const z = document.querySelector(\u0027.kachel-zeile.offen\u0027); z.scrollIntoView({block:\u0027start\u0027, behavior:\u0027instant\u0027}); window.scrollBy({top:-90, behavior:\u0027instant\u0027}); })",
+        "danach":  3,
+        "datei":  "einst_kacheln.jpg",
+        "marken":  {
+                       "1":  ".kachel-zeile.offen .kachel-kopf",
+                       "2":  ".kachel-zeile.offen .kachel-wert",
+                       "3":  ".kachel-zeile.offen .kachel-plus",
+                       "4":  ".kachel-zeile.offen .kachel-speichern"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=settings\u0026r=geraete",
+        "breit":  1280,
+        "hoch":  860,
+        "warte":  9,
+        "vorher":  "geraete",
+        "datei":  "einst_geraete.jpg",
+        "marken":  {
+                       "1":  "#geraeteSuche",
+                       "2":  "#geraeteListe tbody tr td.raum select",
+                       "3":  "#geraeteListe tbody tr .geraet-weg"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=settings\u0026r=fahrzeug",
+        "breit":  1280,
+        "hoch":  860,
+        "warte":  9,
+        "vorher":  "fahrzeug",
+        "datei":  "einst_fahrzeug.jpg",
+        "js":  "(() =\u003e { const w = document.createTreeWalker(document.getElementById(\u0027skodaListe\u0027), NodeFilter.SHOW_TEXT); let n; while ((n = w.nextNode())) n.nodeValue = n.nodeValue.replace(/(endet auf\\s*…?)\\s*\\S{2,}/g, \u0027$1 ••••\u0027); return \u0027ok\u0027; })()",
+        "danach":  1
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=home\u0026floor=EG",
+        "breit":  1280,
+        "hoch":  860,
+        "warte":  9,
+        "js":  "openAutoActionModal(\u0027?action=editor\u0026id=16\u0027)",
+        "danach":  5,
+        "datei":  "editor_wenn.jpg",
+        "marken":  {
+                       "1":  "#autoName",
+                       "2":  "#condBlocks",
+                       "3":  "#condStand",
+                       "4":  "#btnAddGroup"
+                   }
+    },
+    {
+        "js":  "document.getElementById(\u0027rahmenKopf\u0027).click(); setTimeout(() =\u003e document.getElementById(\u0027rahmenBody\u0027).scrollIntoView({block:\u0027center\u0027, behavior:\u0027instant\u0027}), 500)",
+        "danach":  3,
+        "datei":  "editor_wann.jpg",
+        "marken":  {
+                       "1":  "#tagVorlagen",
+                       "2":  "#weekdayGroup",
+                       "3":  "#ferienGroup",
+                       "4":  "#nextDay",
+                       "5":  "#rahmenSummary"
+                   }
+    },
+    {
+        "js":  "document.getElementById(\u0027actionList\u0027).scrollIntoView({block:\u0027center\u0027, behavior:\u0027instant\u0027})",
+        "danach":  2,
+        "datei":  "editor_dann.jpg",
+        "marken":  {
+                       "1":  "#actionList",
+                       "2":  "#btnAddActor",
+                       "3":  "#modalSaveBtn"
+                   }
+    },
+    {
+        "url":  "http://nas.fritz.box/smart/index.php?action=logs",
+        "breit":  1280,
+        "hoch":  860,
+        "warte":  9,
+        "datei":  "protokolle.jpg"
+    }
+]