diff --git a/www/img/elementbearbeiten.png b/www/img/elementbearbeiten.png
new file mode 100644
index 0000000..6a6b382
Binary files /dev/null and b/www/img/elementbearbeiten.png differ
diff --git a/www/img/elementpicker.png b/www/img/elementpicker.png
new file mode 100644
index 0000000..daf743b
Binary files /dev/null and b/www/img/elementpicker.png differ
diff --git a/www/img/nachher.png b/www/img/nachher.png
new file mode 100644
index 0000000..a311ec9
Binary files /dev/null and b/www/img/nachher.png differ
diff --git a/www/img/ribbon.png b/www/img/ribbon.png
new file mode 100644
index 0000000..a7aae9b
Binary files /dev/null and b/www/img/ribbon.png differ
diff --git a/www/img/stilauswahl.png b/www/img/stilauswahl.png
new file mode 100644
index 0000000..060a955
Binary files /dev/null and b/www/img/stilauswahl.png differ
diff --git a/www/img/stilbearbeiten.png b/www/img/stilbearbeiten.png
new file mode 100644
index 0000000..76daaee
Binary files /dev/null and b/www/img/stilbearbeiten.png differ
diff --git a/www/img/vorher.png b/www/img/vorher.png
new file mode 100644
index 0000000..b50e76e
Binary files /dev/null and b/www/img/vorher.png differ
diff --git a/www/index.html b/www/index.html
index ed714f9..7e0345f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1,20 +1,178 @@
 <html>
 <head>
   <title>zaaReloaded2 by Daniel Kraus</title>
+  <meta charset="utf-8">
+  <meta name="author" content="Daniel Kraus">
+  <style type="text/css"><!--
+    * {
+      font-family: Arial; font-size: 16px; line-height: 125%;
+      color: #333;
+    }
+
+    body { margin: 16px 24px; max-width: 800px; }
+
+    h1 { font-size: 150%; margin: 48px 0 24px 0; }
+    h2 { font-size: 120%; margin: 32px 0 16px 0; }
+
+    p { text-align: justify; }
+
+    img {
+      box-shadow: 2px 2px 8px #444;
+    }
+
+    .download {
+      width: 500px; margin: 16px auto; 
+      padding: 8px; border: 1px solid #888; 
+      box-shadow: 2px 2px 8px #444;
+      background-color: #eef;
+    }
+
+    .float-right {
+      float: right;
+      margin: 8px 0 8px 16px;
+    }
+
+    .center {
+      text-align: center;
+    }
+
+    .clear {
+      clear: both;
+    }
+  --></style>
 </head>
 <body>
   <h1>zaaReloaded2</h1>
-  <p>
+  <p style="font-weight: bold;">
     Erweiterung für Microsoft&reg; Word 2010-2013, das die <a
     href="http://www.smi.ukw.de/sap-klinische-verfahren/archivsysteme/zentrale-arztbriefablage.html">
     Zentrale Arztbriefablage (ZAA)</a> um Funktionen für das Formatieren
     von Laborwerten erweitert. 
   </p>
+
+  <div class="download">
+    <h2 style="margin-top:0">Download</h2>
+    <p><a href="downloads/">zaa.nephrowiki.de/downloads</a></p>
+  </div>
+
+  <h2>Anleitung</h2>
+
+  <p class="center">
+    <img src="img/ribbon.png" alt="zaaReloaded2-Ribbon" />
+  </p>
+
+  <ol>
+    <li>Laborwerte auf üblichem Wege in einen Arztbrief einfügen
+      (alternativ kann der Befehl "Demo" ausgeführt werden, dann wird
+      ein Beispieldokument mit Laborwerten geöffnet).</li>
+    <li>Im zaaReloaded-Tab (s.o.) den linken Knopf "Formatieren"
+      klicken.</li>
+    <p class="center">
+      <img src="img/stilauswahl.png" alt="Stil auswählen" />
+    </p>
+    <li>
+      Beim ersten Mal erscheint eine Liste mit Stilen, aus der man den
+      gewünschten Stil auswählt (siehe Abbildung). Beim nächsten Mal,
+      wenn man auf diesen Knopf drückt, wird der zuletzt verwendete Stil
+      genommen.</li>
+    <li>Einen Moment warten... Voilà.</li>
+  </ol>
+
+
+  <h2 class="clear">Anpassen</h2>
+  <p>
+    Das Addin enthält einen Stil-Editor, mit dem die eingebauten Stile
+    bearbeitet und neue Stile entworfen werden können:
+  </p>
+  <p class="center">
+    <img src="img/stilbearbeiten.png" alt="Stil bearbeiten" />
+  </p>
+
+  <p class="clear">
+    <img src="img/elementpicker.png" alt="Elemente" class="float-right" />
+    Jeder Stil setzt sich aus sog. <i>Elementen</i> zusammen. Es gibt
+    <i>Steuerelemente</i>, die zum Beispiel für die Auswahl eines Tages
+    (erster Tag/letzter Tag) zuständig sind, und es gibt
+    <i>Ausgabeelemente</i>, die die eigentliche Formatierung und Ausgabe
+    der Laborwerte übernehmen.
+  </p>
+
+  <p>
+    Steuerelemente:
+  </p>
+
+  <ul>
+    <li>Ersten Tag auswählen</li>
+    <li>Letzten Tag auswählen</li>
+    <li>Jeden Tag nacheinander auswählen</li>
+    <li>Zwei Spalten einfügen/zur nächsten Spalte wechseln</li>
+  </ul>
+
+  <p>
+    Ausgabeelemente:
+  </p>
+
+  <ul>
+    <li>Laborparameter</li>
+    <li>Beliebiger Text</li>
+  </ul>
+
+  <p>
+    "Beliebiger Text" kann, wie der Name schon sagt, beliebigen Text
+    enthalten, der nicht weiter bearbeitet wird. Auf diese Weise kann
+    man z.B. Platzhalter für Urinsedimente ausgeben lassen, die dann
+    noch händisch vervollständigt werden.
+  </p>
+  <p>
+    "Laborparameter" enthalten eine durch Kommata getrennte Auflistung
+    von Parametern, die ausgegeben werden sollen. Jedes Element
+    "Laborparameter" kann optional einen Titel enthalten:
+  </p>
+  <p>
+    Beispiel:
+  </p>
+  <blockquote>
+    <p>
+      <img src="img/elementbearbeiten.png" alt="Element bearbeiten" />
+    </p>
+    <p>
+      Klinische Chemie: Na, K, Cl, (usw.)
+    </p>
+  </blockquote>
+  <p>
+    In diesem Fall ist "Klinische Chemie:" der optionale Titel.
+  </p>
+  <p>
+    Die Bezeichnungen der einzelnen Parameter sind fest einprogrammiert.
+    Teils decken sie sich mit den Bezeichnungen, wie sie in der
+    Zentralen Arztbriefablage erscheinen; teils sind sie aber auch
+    Surrogate (z.B. "eGFR (CKD-EPI)" anstatt "glomerul. Filtrationsr.
+    CKD-EP").
+  </p>
+  <p>
+    Die Platzhalter "SU-*", "U-*" und "*" geben die noch nicht
+    verwendeten Werte für Sammelurin, Spontanurin und alles weitere aus.
+    "*" sollte daher als letztes verwendet werden.
+  <p>
+    Die Liste der möglichen Parameternamen ist momentan fest
+    einprogrammiert und kann auch noch nicht angezeigt werden. Man kann
+    beim Entwickeln eines Stils aber probehalber den Platzhalter "*"
+    verwenden und sieht dann, welche Parameternamen noch verwendet
+    werden könnten.
+  </p>
+
+  <h2>Updates</h2>
+  <p>
+    Das Addin sucht täglich nach Updates und lädt und installiert diese
+    bei Bedarf im Hintergrund.
+  </p>
+
   <h2>Weitere Informationen</h2>
   <p><a href="doc/md_history.html">Versionsgeschichte</a></p>
   <p><a href="doc/index.html">Quellcode-Dokumentation</a></p>
+
   <hr />
-  <p>&copy; 2015 Daniel Kraus</p>
+  <p>&copy; 2015 <a href="http://www.bovender.de">Daniel Kraus</a></p>
 </body>
 <!-- vim: set tw=72 ai sts=2 ts=2 sw=2 : -->
 </html>
