From: Kai Moritz <kai@juplo.de>
Date: Mon, 8 Dec 2025 20:35:55 +0000 (+0100)
Subject: WIP:Beispiel-Content in das Hugo-Template verschoben
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=b8f3be8034dacc500438d330708c015e4ae22408;p=website

WIP:Beispiel-Content in das Hugo-Template verschoben
---

diff --git a/content/error/_index.html b/content/error/_index.html
new file mode 100644
index 0000000..d79009e
--- /dev/null
+++ b/content/error/_index.html
@@ -0,0 +1,3 @@
+---
+title: Templates for Error-Pages
+---
diff --git a/content/potemkin.html b/content/potemkin.html
deleted file mode 100644
index 2fddaa2..0000000
--- a/content/potemkin.html
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: "Projects - Potemkinsche Dörfer!"
----
-<main class="maincontent">
-     <h1>Projects - Potemkinsche Dörfer!</h1>
-     <ul>
-       <li><a href="potemkin/fix-swf/overview.html" th:href="@{/potemkin/fix-swf/overview.html}">Fix SWF</a></li>
-       <li><a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
-       <li><a href="potemkin/accelerator.html" th:href="@{/potemkin/accelerator.html}">accelerator</a></li>
-       <li><a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">Typography</a></li>
-     </ul>
-   </main>
diff --git a/content/potemkin/html-experimente.html b/content/potemkin/html-experimente.html
deleted file mode 100644
index 60f40d3..0000000
--- a/content/potemkin/html-experimente.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: "HTML-Experimente"
----
-<div>
-      <h1>HTML-Elemente / spezielle Seiten</h1>
-      <h2>Die Templates</h2>
-      <ul>
-        <li><a href="templates/layout.html">Layout</a> - Das Layout für juplo.de</li>
-        <li><a href="templates/fragments.html">Fragmente</a> Auf mehreren Seiten verwendete Inhalte</li>
-        <li><a href="templates/404.html">404-Fehlerseite</a></li>
-        <li><a href="templates/error.html">5xx-Fehlerseite</a></li>
-        <li><a href="templates/testlab.html">Testlab</a> Testseite für die Skalierung auf untrschiedliche Seitenbreiten</li>
-      </ul>
-    </div>
-<article class="maincontent">
-      <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
-      <h2>Seiten zum Testen gerenderter Inhalte</h2>
-      <ul>
-        <li><a href="html-experimente/formulare.html" th:href="@{/potemkin/html-experimente/formulare.html}">Formulare</a></li>
-        <li><a href="html-experimente/symbole.html" th:href="@{/potemkin/html-experimente/symbole.html}">Symbol-Font</a></li>
-        <li><a href="templates/404.html" th:href="@{/404.html}">404-Template</a></li>
-        <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/potemkin/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
-        <li><a href="templates/error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
-        <li><a href="html-experimente/error.html" th:href="@{/potemkin/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
-      </ul>
-      <h2>Layout-Grenzfälle</h2>
-      <ul>
-        <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
-        <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
-        <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
-        <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
-        <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
-        <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
-        <li><a href="html-experimente/breadcrumb.html" th:href="@{/potemkin/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
-      </ul>
-      <h2>Layout-Variationen</h2>
-      <ul>
-        <li><a href="html-experimente/kein-layout.html" th:href="@{/potemkin/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
-        <li><a href="html-experimente/basis-layout.html" th:href="@{/potemkin/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
-        <li><a href="html-experimente/druck-layout.html" th:href="@{/potemkin/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
-        <li><a href="html-experimente/tiny.html" th:href="@{/potemkin/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
-        <li><a href="html-experimente/phone.html" th:href="@{/potemkin/html-experimente/phone.html}">Layout für Smartphones</a></li>
-        <li><a href="html-experimente/tablet.html" th:href="@{/potemkin/html-experimente/tablet.html}">Layout für Tablets</a></li>
-      </ul>
-      <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
-      <ul>
-        <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/potemkin/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
-        <li><a href="html-experimente/seitenkopf.html" th:href="@{/potemkin/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
-      </ul>
-      <h2>Anderer Krams...</h2>
-      <ul>
-        <li><a href="html-experimente/testlab.html" th:href="@{/potemkin/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
-      </ul>
-    </article>
diff --git a/content/potemkin/html-experimente/_index.html b/content/potemkin/html-experimente/_index.html
new file mode 100644
index 0000000..60f40d3
--- /dev/null
+++ b/content/potemkin/html-experimente/_index.html
@@ -0,0 +1,54 @@
+---
+title: "HTML-Experimente"
+---
+<div>
+      <h1>HTML-Elemente / spezielle Seiten</h1>
+      <h2>Die Templates</h2>
+      <ul>
+        <li><a href="templates/layout.html">Layout</a> - Das Layout für juplo.de</li>
+        <li><a href="templates/fragments.html">Fragmente</a> Auf mehreren Seiten verwendete Inhalte</li>
+        <li><a href="templates/404.html">404-Fehlerseite</a></li>
+        <li><a href="templates/error.html">5xx-Fehlerseite</a></li>
+        <li><a href="templates/testlab.html">Testlab</a> Testseite für die Skalierung auf untrschiedliche Seitenbreiten</li>
+      </ul>
+    </div>
+<article class="maincontent">
+      <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
+      <h2>Seiten zum Testen gerenderter Inhalte</h2>
+      <ul>
+        <li><a href="html-experimente/formulare.html" th:href="@{/potemkin/html-experimente/formulare.html}">Formulare</a></li>
+        <li><a href="html-experimente/symbole.html" th:href="@{/potemkin/html-experimente/symbole.html}">Symbol-Font</a></li>
+        <li><a href="templates/404.html" th:href="@{/404.html}">404-Template</a></li>
+        <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/potemkin/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
+        <li><a href="templates/error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
+        <li><a href="html-experimente/error.html" th:href="@{/potemkin/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
+      </ul>
+      <h2>Layout-Grenzfälle</h2>
+      <ul>
+        <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
+        <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
+        <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
+        <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
+        <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
+        <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
+        <li><a href="html-experimente/breadcrumb.html" th:href="@{/potemkin/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
+      </ul>
+      <h2>Layout-Variationen</h2>
+      <ul>
+        <li><a href="html-experimente/kein-layout.html" th:href="@{/potemkin/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
+        <li><a href="html-experimente/basis-layout.html" th:href="@{/potemkin/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
+        <li><a href="html-experimente/druck-layout.html" th:href="@{/potemkin/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
+        <li><a href="html-experimente/tiny.html" th:href="@{/potemkin/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
+        <li><a href="html-experimente/phone.html" th:href="@{/potemkin/html-experimente/phone.html}">Layout für Smartphones</a></li>
+        <li><a href="html-experimente/tablet.html" th:href="@{/potemkin/html-experimente/tablet.html}">Layout für Tablets</a></li>
+      </ul>
+      <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
+      <ul>
+        <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/potemkin/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
+        <li><a href="html-experimente/seitenkopf.html" th:href="@{/potemkin/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
+      </ul>
+      <h2>Anderer Krams...</h2>
+      <ul>
+        <li><a href="html-experimente/testlab.html" th:href="@{/potemkin/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
+      </ul>
+    </article>
diff --git a/content/potemkin/html-experimente/basis-layout.html b/content/potemkin/html-experimente/basis-layout.html
new file mode 100644
index 0000000..c1333cc
--- /dev/null
+++ b/content/potemkin/html-experimente/basis-layout.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Basis-Layout"
+---
+<main class="maincontent">
+      <header><h1>Nur das Basis-Layout</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/breadcrumb.html b/content/potemkin/html-experimente/breadcrumb.html
new file mode 100644
index 0000000..e6850a0
--- /dev/null
+++ b/content/potemkin/html-experimente/breadcrumb.html
@@ -0,0 +1,13 @@
+---
+title: "HTML-Experimente - Langer Breadcrumb"
+---
+<ol id="crumbs">
+      <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
+      <li class="b"><a class="b" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+      <li class="b"><a class="b" href="html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
+      <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
+    </ol>
+<article class="maincontent">
+      <header><h1>Seite mit sehr langem Breadcrumb</h1></header>
+      <p>Eine Seite mit einem extrem langen Breadcrumb...</p>
+    </article>
diff --git a/content/potemkin/html-experimente/druck-layout.html b/content/potemkin/html-experimente/druck-layout.html
new file mode 100644
index 0000000..2481b37
--- /dev/null
+++ b/content/potemkin/html-experimente/druck-layout.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Druck-Layout"
+---
+<main class="maincontent">
+      <header><h1>Die für den Ausdruck angepasste Ansicht</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/error.html b/content/potemkin/html-experimente/error.html
new file mode 100644
index 0000000..ebd4040
--- /dev/null
+++ b/content/potemkin/html-experimente/error.html
@@ -0,0 +1,4 @@
+---
+title: "This Page Will Raise An Error"
+---
+<p>This page will raise an error, because the <strong><code>uri</code></strong> is set to an unknown value...</p>
diff --git a/content/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html b/content/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
new file mode 100644
index 0000000..b206019
--- /dev/null
+++ b/content/potemkin/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
@@ -0,0 +1,21 @@
+---
+title: "HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt"
+---
+<nav id="navigation">
+      <hr class="n">
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul class="cf" id="menu">
+        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+      </ul>
+    </nav>
+<article class="maincontent">
+      <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
+      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+    </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/fast-leer-einspaltig.html b/content/potemkin/html-experimente/fast-leer-einspaltig.html
new file mode 100644
index 0000000..9e328dc
--- /dev/null
+++ b/content/potemkin/html-experimente/fast-leer-einspaltig.html
@@ -0,0 +1,18 @@
+---
+title: "HTML-Experimente - Fast leere einspaltige Seite"
+---
+<nav id="navigation">
+      <hr class="n">
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul class="cf" id="menu">
+        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+      </ul>
+    </nav>
+<article class="maincontent">
+      <header><h1>Fast leere einspaltige Seite</h1></header>
+      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
+    </article>
diff --git "a/content/potemkin/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html" "b/content/potemkin/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html"
new file mode 100644
index 0000000..f6882c3
--- /dev/null
+++ "b/content/potemkin/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html"
@@ -0,0 +1,21 @@
+---
+title: "HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte"
+---
+<nav id="navigation">
+      <hr class="n">
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul class="cf" id="menu">
+        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+      </ul>
+    </nav>
+<article class="maincontent">
+      <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git "a/content/potemkin/html-experimente/fast-leer-kein-men\303\274.html" "b/content/potemkin/html-experimente/fast-leer-kein-men\303\274.html"
new file mode 100644
index 0000000..ec4ed84
--- /dev/null
+++ "b/content/potemkin/html-experimente/fast-leer-kein-men\303\274.html"
@@ -0,0 +1,18 @@
+---
+title: "HTML-Experimente - Fast leere Seite ohne Menü"
+---
+<nav id="navigation">
+      <hr class="n">
+      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
+      <h1 class="nav">Navigation</h1>
+      <h2 class="nav menu">Section-Menu</h2>
+      <ul class="cf" id="menu">
+        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
+        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
+        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
+      </ul>
+    </nav>
+<article class="maincontent">
+      <header><h1>Fast leere Seite ohne Menü</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
diff --git "a/content/potemkin/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html" "b/content/potemkin/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html"
new file mode 100644
index 0000000..ded7db0
--- /dev/null
+++ "b/content/potemkin/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html"
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt"
+---
+<article class="maincontent">
+      <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git "a/content/potemkin/html-experimente/fast-leer-mit-men\303\274.html" "b/content/potemkin/html-experimente/fast-leer-mit-men\303\274.html"
new file mode 100644
index 0000000..62bfb46
--- /dev/null
+++ "b/content/potemkin/html-experimente/fast-leer-mit-men\303\274.html"
@@ -0,0 +1,7 @@
+---
+title: "HTML-Experimente - Fast leere Seite mit Menü"
+---
+<article class="maincontent">
+      <header><h1>Fast leere Seite mit Menü</h1></header>
+      <p>Ein ganz bischen Text...</p>
+    </article>
diff --git a/content/potemkin/html-experimente/formulare.html b/content/potemkin/html-experimente/formulare.html
new file mode 100644
index 0000000..c16952b
--- /dev/null
+++ b/content/potemkin/html-experimente/formulare.html
@@ -0,0 +1,254 @@
+---
+title: "HTML-Experimente - Formulare"
+---
+<article class="maincontent">
+      <header><h1>Formulare</h1></header>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Anzeigetext</h2>
+        <div class="f textarea">
+          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+          <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+        </div>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Textformatierung</h2>
+        <fieldset class="f radiobutton cf">
+          <legend class="f info">
+            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
+            Online erscheint die Anzeige als normaler Fließtext.
+          </legend>
+          <hr class="f">
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_02">Text zentriert</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_04">Text fett</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_05">Text fett und rot</label>
+            </div>
+          </div>
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Einspaltige Radiobuttons...</h2>
+        <fieldset class="f radiobutton">
+          <div class="f">
+            <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
+            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
+            <label class="f" for="radio_tbox_b02">Option X</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
+            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+          </div>
+        </fieldset>
+        <hr class="f">
+        <div class="f submit">
+          <input class="f" type="submit" value="> zur Übersicht">
+          <input class="f left" type="submit" value="< zurück">
+          <input class="f" type="submit" value="> weiter">
+        </div>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Bild</h2>
+        <fieldset class="f checkbox">
+          <legend class="f">
+            Du kannst Deiner Anzeige ein Bild hinzufügen.
+            Das Bild erscheint nur online.
+            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+          </legend>
+          <hr class="f">
+          <div class="f">
+            <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
+            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+          </div>
+          <div class="f">
+            <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
+            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+          </div>
+        </fieldset>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Alleinstehende Checkbox</h2>
+        <div class="f checkbox">
+          <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
+          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+        </div>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Kundendaten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
+          <input class="f" id="text_tbox_01" type="text" value="Mustermann">
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_02">Vorname</label>
+          <input class="f" id="text_tbox_02" type="text" value="Max">
+        </div>
+        <div class="f select required">
+          <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
+          <select class="f" id="text_tbox_03">
+            <option>Dortmund</option>
+            <option>Bochum</option>
+            <option>Essen</option>
+            <option>Mönchengladbach</option>
+            <option>Oberhausen</option>
+            <option>Castrop-Rauxel</option>
+            <option>Düsseldorf</option>
+          </select>
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
+          <input class="f error" id="text_tbox_04" type="text" value="">
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
+          <input class="f" id="text_tbox_05" type="text" value="">
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_06">Telefon</label>
+          <input class="f" id="text_tbox_06" type="text" value="">
+        </div>
+        <hr class="f">
+        <div class="f submit">
+          <input class="f" type="submit" value="> weiter">
+        </div>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Anzeige regionalisieren</h2>
+        <p class="f">
+          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+          bestimmten Städten suchen.
+          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+          diesen Interessenten aber auch nicht gefunden.
+        </p>
+        <hr class="f">
+        <div class="f text">
+          <label class="f" for="city">Stadt</label>
+          <input class="f" id="city" type="text">
+          <p class="f info">
+            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+          </p>
+        </div>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+        <div class="f text required">
+          <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
+          <input class="f" id="text_tbox_05" type="password" value="t">
+        </div>
+      </form>
+      <form action="#" class="form" method="get">
+        <h2 class="f">Lade das Bild hoch</h2>
+        <p class="f info">
+          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+          Das Bild darf nicht größer als 8 MByte sein.
+        </p>
+        <div class="f file required">
+          <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
+          <input class="f" id="file_tbox_01" type="file">
+        </div>
+        <hr class="f">
+        <div class="f submit">
+          <input class="f" type="submit" value="> Doch kein Bild">
+          <input class="f" type="submit" value="> Bild hochladen">
+        </div>
+      </form>
+      <div class="form">
+        <h2 class="f">Antworten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+          <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
+        </div>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+          <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
+        </div>
+        <div class="f text required">
+          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+          <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
+        </div>
+        <div class="f textarea required">
+          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+          <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
+        </div>
+        <div class="f checkbox">
+          <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
+          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+        </div>
+        <div class="f checkbox">
+          <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
+          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+        </div>
+      </div>
+      <div class="form cf">
+        <div class="col2 left">
+          <h2 class="f">Weiter mit Anmeldung</h2>
+          <div class="f text">
+            <label class="f" for="username">Benutzername</label>
+            <input class="f" id="username" name="username" tabindex="6" type="text">
+          </div>
+          <div class="f text">
+            <label class="f" for="password">Passwort</label>
+            <input class="f" id="password" name="password" tabindex="7" type="password">
+          </div>
+        </div>
+        <div class="col2 right">
+          <h2 class="f">Weiter ohne Anmeldung</h2>
+          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+          <div class="f captcha cf">
+            <span class="f">Was steht da?</span>
+            <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
+          </div>
+          <div class="f text">
+            <label class="f" for="captcha">Lösung</label>
+            <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
+          </div>
+        </div>
+      </div>
+    </article>
diff --git a/content/potemkin/html-experimente/html-experimente/basis-layout.html b/content/potemkin/html-experimente/html-experimente/basis-layout.html
deleted file mode 100644
index c1333cc..0000000
--- a/content/potemkin/html-experimente/html-experimente/basis-layout.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Basis-Layout"
----
-<main class="maincontent">
-      <header><h1>Nur das Basis-Layout</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/breadcrumb.html b/content/potemkin/html-experimente/html-experimente/breadcrumb.html
deleted file mode 100644
index e6850a0..0000000
--- a/content/potemkin/html-experimente/html-experimente/breadcrumb.html
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: "HTML-Experimente - Langer Breadcrumb"
----
-<ol id="crumbs">
-      <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
-      <li class="b"><a class="b" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
-      <li class="b"><a class="b" href="html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
-      <li class="b"><strong class="b">Dies ist ein Seite mit einem unendlich langen Breadcrumb-Eintrag der bestimmt nicht in den vorgesehenen Platz passt</strong></li>
-    </ol>
-<article class="maincontent">
-      <header><h1>Seite mit sehr langem Breadcrumb</h1></header>
-      <p>Eine Seite mit einem extrem langen Breadcrumb...</p>
-    </article>
diff --git a/content/potemkin/html-experimente/html-experimente/druck-layout.html b/content/potemkin/html-experimente/html-experimente/druck-layout.html
deleted file mode 100644
index 2481b37..0000000
--- a/content/potemkin/html-experimente/html-experimente/druck-layout.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Druck-Layout"
----
-<main class="maincontent">
-      <header><h1>Die für den Ausdruck angepasste Ansicht</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/error.html b/content/potemkin/html-experimente/html-experimente/error.html
deleted file mode 100644
index ebd4040..0000000
--- a/content/potemkin/html-experimente/html-experimente/error.html
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: "This Page Will Raise An Error"
----
-<p>This page will raise an error, because the <strong><code>uri</code></strong> is set to an unknown value...</p>
diff --git a/content/potemkin/html-experimente/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html b/content/potemkin/html-experimente/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
deleted file mode 100644
index b206019..0000000
--- a/content/potemkin/html-experimente/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: "HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt"
----
-<nav id="navigation">
-      <hr class="n">
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul class="cf" id="menu">
-        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
-        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
-        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
-      </ul>
-    </nav>
-<article class="maincontent">
-      <header><h1>Fast leere einspaltige Seite mit Marginalinhalt</h1></header>
-      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
-    </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/fast-leer-einspaltig.html b/content/potemkin/html-experimente/html-experimente/fast-leer-einspaltig.html
deleted file mode 100644
index 9e328dc..0000000
--- a/content/potemkin/html-experimente/html-experimente/fast-leer-einspaltig.html
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: "HTML-Experimente - Fast leere einspaltige Seite"
----
-<nav id="navigation">
-      <hr class="n">
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul class="cf" id="menu">
-        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
-        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
-        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
-      </ul>
-    </nav>
-<article class="maincontent">
-      <header><h1>Fast leere einspaltige Seite</h1></header>
-      <p><strong>KAPUTT:</strong> siehe Erklärung im Commit</p>
-    </article>
diff --git "a/content/potemkin/html-experimente/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html" "b/content/potemkin/html-experimente/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html"
deleted file mode 100644
index f6882c3..0000000
--- "a/content/potemkin/html-experimente/html-experimente/fast-leer-kein-men\303\274-aber-marginalinhalt.html"
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: "HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte"
----
-<nav id="navigation">
-      <hr class="n">
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul class="cf" id="menu">
-        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
-        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
-        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
-      </ul>
-    </nav>
-<article class="maincontent">
-      <header><h1>Fast leere Seite ohne Menü aber mit Marginalinhalt</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git "a/content/potemkin/html-experimente/html-experimente/fast-leer-kein-men\303\274.html" "b/content/potemkin/html-experimente/html-experimente/fast-leer-kein-men\303\274.html"
deleted file mode 100644
index ec4ed84..0000000
--- "a/content/potemkin/html-experimente/html-experimente/fast-leer-kein-men\303\274.html"
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: "HTML-Experimente - Fast leere Seite ohne Menü"
----
-<nav id="navigation">
-      <hr class="n">
-      <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
-      <h1 class="nav">Navigation</h1>
-      <h2 class="nav menu">Section-Menu</h2>
-      <ul class="cf" id="menu">
-        <li class="m blog"><a class="m" href="../blog/" th:href="@{/blog/}">Blog</a></li>
-        <li class="m projects"><a class="m selected" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
-        <li class="m about"><a class="m" href="../about.html" th:href="@{/about.html}">About</a></li>
-      </ul>
-    </nav>
-<article class="maincontent">
-      <header><h1>Fast leere Seite ohne Menü</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
diff --git "a/content/potemkin/html-experimente/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html" "b/content/potemkin/html-experimente/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html"
deleted file mode 100644
index ded7db0..0000000
--- "a/content/potemkin/html-experimente/html-experimente/fast-leer-mit-men\303\274-und-marginalinhalt.html"
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Fast leere Seite mit Menü und Marginalinhalt"
----
-<article class="maincontent">
-      <header><h1>Fast leere Seite mit Menü und Marginalinhalt</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git "a/content/potemkin/html-experimente/html-experimente/fast-leer-mit-men\303\274.html" "b/content/potemkin/html-experimente/html-experimente/fast-leer-mit-men\303\274.html"
deleted file mode 100644
index 62bfb46..0000000
--- "a/content/potemkin/html-experimente/html-experimente/fast-leer-mit-men\303\274.html"
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: "HTML-Experimente - Fast leere Seite mit Menü"
----
-<article class="maincontent">
-      <header><h1>Fast leere Seite mit Menü</h1></header>
-      <p>Ein ganz bischen Text...</p>
-    </article>
diff --git a/content/potemkin/html-experimente/html-experimente/formulare.html b/content/potemkin/html-experimente/html-experimente/formulare.html
deleted file mode 100644
index c16952b..0000000
--- a/content/potemkin/html-experimente/html-experimente/formulare.html
+++ /dev/null
@@ -1,254 +0,0 @@
----
-title: "HTML-Experimente - Formulare"
----
-<article class="maincontent">
-      <header><h1>Formulare</h1></header>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Anzeigetext</h2>
-        <div class="f textarea">
-          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
-          <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
-        </div>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Textformatierung</h2>
-        <fieldset class="f radiobutton cf">
-          <legend class="f info">
-            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
-            Online erscheint die Anzeige als normaler Fließtext.
-          </legend>
-          <hr class="f">
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_02">Text zentriert</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_04">Text fett</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_05">Text fett und rot</label>
-            </div>
-          </div>
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Einspaltige Radiobuttons...</h2>
-        <fieldset class="f radiobutton">
-          <div class="f">
-            <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
-            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
-            <label class="f" for="radio_tbox_b02">Option X</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
-            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
-          </div>
-        </fieldset>
-        <hr class="f">
-        <div class="f submit">
-          <input class="f" type="submit" value="> zur Übersicht">
-          <input class="f left" type="submit" value="< zurück">
-          <input class="f" type="submit" value="> weiter">
-        </div>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Bild</h2>
-        <fieldset class="f checkbox">
-          <legend class="f">
-            Du kannst Deiner Anzeige ein Bild hinzufügen.
-            Das Bild erscheint nur online.
-            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
-          </legend>
-          <hr class="f">
-          <div class="f">
-            <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
-            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-          </div>
-          <div class="f">
-            <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
-            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
-          </div>
-        </fieldset>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Alleinstehende Checkbox</h2>
-        <div class="f checkbox">
-          <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
-          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-        </div>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Kundendaten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
-          <input class="f" id="text_tbox_01" type="text" value="Mustermann">
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_02">Vorname</label>
-          <input class="f" id="text_tbox_02" type="text" value="Max">
-        </div>
-        <div class="f select required">
-          <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
-          <select class="f" id="text_tbox_03">
-            <option>Dortmund</option>
-            <option>Bochum</option>
-            <option>Essen</option>
-            <option>Mönchengladbach</option>
-            <option>Oberhausen</option>
-            <option>Castrop-Rauxel</option>
-            <option>Düsseldorf</option>
-          </select>
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
-          <input class="f error" id="text_tbox_04" type="text" value="">
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
-          <input class="f" id="text_tbox_05" type="text" value="">
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_06">Telefon</label>
-          <input class="f" id="text_tbox_06" type="text" value="">
-        </div>
-        <hr class="f">
-        <div class="f submit">
-          <input class="f" type="submit" value="> weiter">
-        </div>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Anzeige regionalisieren</h2>
-        <p class="f">
-          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
-          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
-          bestimmten Städten suchen.
-          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
-          diesen Interessenten aber auch nicht gefunden.
-        </p>
-        <hr class="f">
-        <div class="f text">
-          <label class="f" for="city">Stadt</label>
-          <input class="f" id="city" type="text">
-          <p class="f info">
-            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
-          </p>
-        </div>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
-        <div class="f text required">
-          <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
-          <input class="f" id="text_tbox_05" type="password" value="t">
-        </div>
-      </form>
-      <form action="#" class="form" method="get">
-        <h2 class="f">Lade das Bild hoch</h2>
-        <p class="f info">
-          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
-          Das Bild darf nicht größer als 8 MByte sein.
-        </p>
-        <div class="f file required">
-          <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
-          <input class="f" id="file_tbox_01" type="file">
-        </div>
-        <hr class="f">
-        <div class="f submit">
-          <input class="f" type="submit" value="> Doch kein Bild">
-          <input class="f" type="submit" value="> Bild hochladen">
-        </div>
-      </form>
-      <div class="form">
-        <h2 class="f">Antworten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
-          <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
-        </div>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
-          <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
-        </div>
-        <div class="f text required">
-          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
-          <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
-        </div>
-        <div class="f textarea required">
-          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
-          <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
-        </div>
-        <div class="f checkbox">
-          <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
-          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
-        </div>
-        <div class="f checkbox">
-          <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
-          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
-        </div>
-      </div>
-      <div class="form cf">
-        <div class="col2 left">
-          <h2 class="f">Weiter mit Anmeldung</h2>
-          <div class="f text">
-            <label class="f" for="username">Benutzername</label>
-            <input class="f" id="username" name="username" tabindex="6" type="text">
-          </div>
-          <div class="f text">
-            <label class="f" for="password">Passwort</label>
-            <input class="f" id="password" name="password" tabindex="7" type="password">
-          </div>
-        </div>
-        <div class="col2 right">
-          <h2 class="f">Weiter ohne Anmeldung</h2>
-          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
-          <div class="f captcha cf">
-            <span class="f">Was steht da?</span>
-            <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
-          </div>
-          <div class="f text">
-            <label class="f" for="captcha">Lösung</label>
-            <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
-          </div>
-        </div>
-      </div>
-    </article>
diff --git a/content/potemkin/html-experimente/html-experimente/kein-layout.html b/content/potemkin/html-experimente/html-experimente/kein-layout.html
deleted file mode 100644
index 6ad88c8..0000000
--- a/content/potemkin/html-experimente/html-experimente/kein-layout.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Kein Layout"
----
-<main class="maincontent">
-      <header><h1>Alle Stylings deaktiviert</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/phone.html b/content/potemkin/html-experimente/html-experimente/phone.html
deleted file mode 100644
index e95f691..0000000
--- a/content/potemkin/html-experimente/html-experimente/phone.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Layout PHONE"
----
-<main class="maincontent">
-      <header><h1>Layout für Smartphones</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/seitenaufteilung.html b/content/potemkin/html-experimente/html-experimente/seitenaufteilung.html
deleted file mode 100644
index 6fa306c..0000000
--- a/content/potemkin/html-experimente/html-experimente/seitenaufteilung.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Basis-Layout & Seitenaufteilung"
----
-<main class="maincontent">
-      <header><h1>Nur das Basis-Layout und die Seitenaufteiltung</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/seitenkopf.html b/content/potemkin/html-experimente/html-experimente/seitenkopf.html
deleted file mode 100644
index 96a5a7d..0000000
--- a/content/potemkin/html-experimente/html-experimente/seitenkopf.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Basis-Layout & Seitenkopf"
----
-<main class="maincontent">
-      <header><h1>Nur das Basis-Layout und der Seitenkopf</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/symbole.html b/content/potemkin/html-experimente/html-experimente/symbole.html
deleted file mode 100644
index 9c55e18..0000000
--- a/content/potemkin/html-experimente/html-experimente/symbole.html
+++ /dev/null
@@ -1,401 +0,0 @@
----
-title: "HTML-Experimente - Symbol-Font"
----
-<article class="maincontent">
-      <header><h1>Symbol-Font</h1></header>
-      <h2>100%</h2>
-      <div class="symbols">
-        <span class="e600"></span>
-        <span class="e601"></span>
-        <span class="e602"></span>
-        <span class="e603"></span>
-        <span class="e604"></span>
-        <span class="e605"></span>
-        <span class="e606"></span>
-        <span class="e607"></span>
-        <span class="e608"></span>
-        <span class="e609"></span>
-        <span class="e60a"></span>
-        <span class="e60b"></span>
-        <span class="e60c"></span>
-        <span class="e60d"></span>
-        <span class="e60e"></span>
-        <span class="e60f"></span>
-        <span class="e610"></span>
-        <span class="e611"></span>
-        <span class="e612"></span>
-        <span class="e613"></span>
-        <span class="e614"></span>
-        <span class="e615"></span>
-        <span class="e616"></span>
-        <span class="e617"></span>
-        <span class="e618"></span>
-        <span class="e619"></span>
-        <span class="e61a"></span>
-        <span class="e61b"></span>
-        <span class="e61c"></span>
-        <span class="e61d"></span>
-        <span class="e61e"></span>
-        <span class="e61f"></span>
-        <span class="e620"></span>
-        <span class="e621"></span>
-        <span class="e622"></span>
-        <span class="e623"></span>
-        <span class="e624"></span>
-        <span class="e625"></span>
-        <span class="e626"></span>
-        <span class="e627"></span>
-        <span class="e628"></span>
-        <span class="e629"></span>
-        <span class="e62a"></span>
-        <span class="e62b"></span>
-        <span class="e62c"></span>
-        <span class="e62d"></span>
-        <span class="e62e"></span>
-        <span class="e62f"></span>
-        <span class="e630"></span>
-        <span class="e631"></span>
-        <span class="e632"></span>
-        <span class="e633"></span>
-        <span class="e634"></span>
-        <span class="e635"></span>
-        <span class="e636"></span>
-        <span class="e637"></span>
-        <span class="e638"></span>
-        <span class="e639"></span>
-        <span class="e63a"></span>
-        <span class="e63b"></span>
-        <span class="e63c"></span>
-        <span class="e63d"></span>
-        <span class="e63e"></span>
-        <span class="e63f"></span>
-        <span class="e640"></span>
-        <span class="e641"></span>
-        <span class="e642"></span>
-        <span class="e643"></span>
-        <span class="e644"></span>
-        <span class="e645"></span>
-        <span class="e646"></span>
-        <span class="e647"></span>
-        <span class="e648"></span>
-        <span class="e649"></span>
-        <span class="e64a"></span>
-        <span class="e64b"></span>
-      </div>
-      <h2>200%</h2>
-      <div class="symbols" style="font-size: 200%; line-height: 1.5em">
-        <span class="e600"></span>
-        <span class="e601"></span>
-        <span class="e602"></span>
-        <span class="e603"></span>
-        <span class="e604"></span>
-        <span class="e605"></span>
-        <span class="e606"></span>
-        <span class="e607"></span>
-        <span class="e608"></span>
-        <span class="e609"></span>
-        <span class="e60a"></span>
-        <span class="e60b"></span>
-        <span class="e60c"></span>
-        <span class="e60d"></span>
-        <span class="e60e"></span>
-        <span class="e60f"></span>
-        <span class="e610"></span>
-        <span class="e611"></span>
-        <span class="e612"></span>
-        <span class="e613"></span>
-        <span class="e614"></span>
-        <span class="e615"></span>
-        <span class="e616"></span>
-        <span class="e617"></span>
-        <span class="e618"></span>
-        <span class="e619"></span>
-        <span class="e61a"></span>
-        <span class="e61b"></span>
-        <span class="e61c"></span>
-        <span class="e61d"></span>
-        <span class="e61e"></span>
-        <span class="e61f"></span>
-        <span class="e620"></span>
-        <span class="e621"></span>
-        <span class="e622"></span>
-        <span class="e623"></span>
-        <span class="e624"></span>
-        <span class="e625"></span>
-        <span class="e626"></span>
-        <span class="e627"></span>
-        <span class="e628"></span>
-        <span class="e629"></span>
-        <span class="e62a"></span>
-        <span class="e62b"></span>
-        <span class="e62c"></span>
-        <span class="e62d"></span>
-        <span class="e62e"></span>
-        <span class="e62f"></span>
-        <span class="e630"></span>
-        <span class="e631"></span>
-        <span class="e632"></span>
-        <span class="e633"></span>
-        <span class="e634"></span>
-        <span class="e635"></span>
-        <span class="e636"></span>
-        <span class="e637"></span>
-        <span class="e638"></span>
-        <span class="e639"></span>
-        <span class="e63a"></span>
-        <span class="e63b"></span>
-        <span class="e63c"></span>
-        <span class="e63d"></span>
-        <span class="e63e"></span>
-        <span class="e63f"></span>
-        <span class="e640"></span>
-        <span class="e641"></span>
-        <span class="e642"></span>
-        <span class="e643"></span>
-        <span class="e644"></span>
-        <span class="e645"></span>
-        <span class="e646"></span>
-        <span class="e647"></span>
-        <span class="e648"></span>
-        <span class="e649"></span>
-        <span class="e64a"></span>
-        <span class="e64b"></span>
-      </div>
-      <h2>300%</h2>
-      <div class="symbols" style="font-size: 300%; line-height: 1.5em">
-        <span class="e600"></span>
-        <span class="e601"></span>
-        <span class="e602"></span>
-        <span class="e603"></span>
-        <span class="e604"></span>
-        <span class="e605"></span>
-        <span class="e606"></span>
-        <span class="e607"></span>
-        <span class="e608"></span>
-        <span class="e609"></span>
-        <span class="e60a"></span>
-        <span class="e60b"></span>
-        <span class="e60c"></span>
-        <span class="e60d"></span>
-        <span class="e60e"></span>
-        <span class="e60f"></span>
-        <span class="e610"></span>
-        <span class="e611"></span>
-        <span class="e612"></span>
-        <span class="e613"></span>
-        <span class="e614"></span>
-        <span class="e615"></span>
-        <span class="e616"></span>
-        <span class="e617"></span>
-        <span class="e618"></span>
-        <span class="e619"></span>
-        <span class="e61a"></span>
-        <span class="e61b"></span>
-        <span class="e61c"></span>
-        <span class="e61d"></span>
-        <span class="e61e"></span>
-        <span class="e61f"></span>
-        <span class="e620"></span>
-        <span class="e621"></span>
-        <span class="e622"></span>
-        <span class="e623"></span>
-        <span class="e624"></span>
-        <span class="e625"></span>
-        <span class="e626"></span>
-        <span class="e627"></span>
-        <span class="e628"></span>
-        <span class="e629"></span>
-        <span class="e62a"></span>
-        <span class="e62b"></span>
-        <span class="e62c"></span>
-        <span class="e62d"></span>
-        <span class="e62e"></span>
-        <span class="e62f"></span>
-        <span class="e630"></span>
-        <span class="e631"></span>
-        <span class="e632"></span>
-        <span class="e633"></span>
-        <span class="e634"></span>
-        <span class="e635"></span>
-        <span class="e636"></span>
-        <span class="e637"></span>
-        <span class="e638"></span>
-        <span class="e639"></span>
-        <span class="e63a"></span>
-        <span class="e63b"></span>
-        <span class="e63c"></span>
-        <span class="e63d"></span>
-        <span class="e63e"></span>
-        <span class="e63f"></span>
-        <span class="e640"></span>
-        <span class="e641"></span>
-        <span class="e642"></span>
-        <span class="e643"></span>
-        <span class="e644"></span>
-        <span class="e645"></span>
-        <span class="e646"></span>
-        <span class="e647"></span>
-        <span class="e648"></span>
-        <span class="e649"></span>
-        <span class="e64a"></span>
-        <span class="e64b"></span>
-      </div>
-      <h2>400%</h2>
-      <div class="symbols" style="font-size: 400%; line-height: 1.5em">
-        <span class="e600"></span>
-        <span class="e601"></span>
-        <span class="e602"></span>
-        <span class="e603"></span>
-        <span class="e604"></span>
-        <span class="e605"></span>
-        <span class="e606"></span>
-        <span class="e607"></span>
-        <span class="e608"></span>
-        <span class="e609"></span>
-        <span class="e60a"></span>
-        <span class="e60b"></span>
-        <span class="e60c"></span>
-        <span class="e60d"></span>
-        <span class="e60e"></span>
-        <span class="e60f"></span>
-        <span class="e610"></span>
-        <span class="e611"></span>
-        <span class="e612"></span>
-        <span class="e613"></span>
-        <span class="e614"></span>
-        <span class="e615"></span>
-        <span class="e616"></span>
-        <span class="e617"></span>
-        <span class="e618"></span>
-        <span class="e619"></span>
-        <span class="e61a"></span>
-        <span class="e61b"></span>
-        <span class="e61c"></span>
-        <span class="e61d"></span>
-        <span class="e61e"></span>
-        <span class="e61f"></span>
-        <span class="e620"></span>
-        <span class="e621"></span>
-        <span class="e622"></span>
-        <span class="e623"></span>
-        <span class="e624"></span>
-        <span class="e625"></span>
-        <span class="e626"></span>
-        <span class="e627"></span>
-        <span class="e628"></span>
-        <span class="e629"></span>
-        <span class="e62a"></span>
-        <span class="e62b"></span>
-        <span class="e62c"></span>
-        <span class="e62d"></span>
-        <span class="e62e"></span>
-        <span class="e62f"></span>
-        <span class="e630"></span>
-        <span class="e631"></span>
-        <span class="e632"></span>
-        <span class="e633"></span>
-        <span class="e634"></span>
-        <span class="e635"></span>
-        <span class="e636"></span>
-        <span class="e637"></span>
-        <span class="e638"></span>
-        <span class="e639"></span>
-        <span class="e63a"></span>
-        <span class="e63b"></span>
-        <span class="e63c"></span>
-        <span class="e63d"></span>
-        <span class="e63e"></span>
-        <span class="e63f"></span>
-        <span class="e640"></span>
-        <span class="e641"></span>
-        <span class="e642"></span>
-        <span class="e643"></span>
-        <span class="e644"></span>
-        <span class="e645"></span>
-        <span class="e646"></span>
-        <span class="e647"></span>
-        <span class="e648"></span>
-        <span class="e649"></span>
-        <span class="e64a"></span>
-        <span class="e64b"></span>
-      </div>
-      <h2>500%</h2>
-      <div class="symbols" style="font-size: 500%; line-height: 1.5em">
-        <span class="e600"></span>
-        <span class="e601"></span>
-        <span class="e602"></span>
-        <span class="e603"></span>
-        <span class="e604"></span>
-        <span class="e605"></span>
-        <span class="e606"></span>
-        <span class="e607"></span>
-        <span class="e608"></span>
-        <span class="e609"></span>
-        <span class="e60a"></span>
-        <span class="e60b"></span>
-        <span class="e60c"></span>
-        <span class="e60d"></span>
-        <span class="e60e"></span>
-        <span class="e60f"></span>
-        <span class="e610"></span>
-        <span class="e611"></span>
-        <span class="e612"></span>
-        <span class="e613"></span>
-        <span class="e614"></span>
-        <span class="e615"></span>
-        <span class="e616"></span>
-        <span class="e617"></span>
-        <span class="e618"></span>
-        <span class="e619"></span>
-        <span class="e61a"></span>
-        <span class="e61b"></span>
-        <span class="e61c"></span>
-        <span class="e61d"></span>
-        <span class="e61e"></span>
-        <span class="e61f"></span>
-        <span class="e620"></span>
-        <span class="e621"></span>
-        <span class="e622"></span>
-        <span class="e623"></span>
-        <span class="e624"></span>
-        <span class="e625"></span>
-        <span class="e626"></span>
-        <span class="e627"></span>
-        <span class="e628"></span>
-        <span class="e629"></span>
-        <span class="e62a"></span>
-        <span class="e62b"></span>
-        <span class="e62c"></span>
-        <span class="e62d"></span>
-        <span class="e62e"></span>
-        <span class="e62f"></span>
-        <span class="e630"></span>
-        <span class="e631"></span>
-        <span class="e632"></span>
-        <span class="e633"></span>
-        <span class="e634"></span>
-        <span class="e635"></span>
-        <span class="e636"></span>
-        <span class="e637"></span>
-        <span class="e638"></span>
-        <span class="e639"></span>
-        <span class="e63a"></span>
-        <span class="e63b"></span>
-        <span class="e63c"></span>
-        <span class="e63d"></span>
-        <span class="e63e"></span>
-        <span class="e63f"></span>
-        <span class="e640"></span>
-        <span class="e641"></span>
-        <span class="e642"></span>
-        <span class="e643"></span>
-        <span class="e644"></span>
-        <span class="e645"></span>
-        <span class="e646"></span>
-        <span class="e647"></span>
-        <span class="e648"></span>
-        <span class="e649"></span>
-        <span class="e64a"></span>
-        <span class="e64b"></span>
-      </div>
-    </article>
diff --git a/content/potemkin/html-experimente/html-experimente/tablet.html b/content/potemkin/html-experimente/html-experimente/tablet.html
deleted file mode 100644
index 50e615d..0000000
--- a/content/potemkin/html-experimente/html-experimente/tablet.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Layout TABLET"
----
-<main class="maincontent">
-      <header><h1>Layout für Tablets</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/html-experimente/testlab.html b/content/potemkin/html-experimente/html-experimente/testlab.html
deleted file mode 100644
index e6d455c..0000000
--- a/content/potemkin/html-experimente/html-experimente/testlab.html
+++ /dev/null
@@ -1,253 +0,0 @@
----
-title: "HTML-Experimente - Media-Query-Test: BEISPIEL"
----
-<div class="content">
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Anzeigetext</h2>
-        <div class="f textarea">
-          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
-          <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
-        </div>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Textformatierung</h2>
-        <fieldset class="f radiobutton cf">
-          <legend class="f info">
-            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
-            Online erscheint die Anzeige als normaler Fließtext.
-          </legend>
-          <hr class="f">
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_02">Text zentriert</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_04">Text fett</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_05">Text fett und rot</label>
-            </div>
-          </div>
-          <div class="col2">
-            <div class="f">
-              <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
-            </div>
-            <div class="f">
-              <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
-              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
-            </div>
-          </div>
-        </fieldset>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Einspaltige Radiobuttons...</h2>
-        <fieldset class="f radiobutton">
-          <div class="f">
-            <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
-            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
-            <label class="f" for="radio_tbox_b02">Option X</label>
-          </div>
-          <div class="f">
-            <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
-            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
-          </div>
-        </fieldset>
-        <hr class="f">
-        <div class="f submit">
-          <input class="f" type="submit" value="> zur Übersicht">
-          <input class="f left" type="submit" value="< zurück">
-          <input class="f" type="submit" value="> weiter">
-        </div>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Bild</h2>
-        <fieldset class="f checkbox">
-          <legend class="f">
-            Du kannst Deiner Anzeige ein Bild hinzufügen.
-            Das Bild erscheint nur online.
-            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
-          </legend>
-          <hr class="f">
-          <div class="f">
-            <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
-            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-          </div>
-          <div class="f">
-            <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
-            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
-          </div>
-        </fieldset>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Alleinstehende Checkbox</h2>
-        <div class="f checkbox">
-          <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
-          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
-        </div>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Kundendaten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
-          <input class="f" id="text_tbox_01" type="text" value="Mustermann">
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_02">Vorname</label>
-          <input class="f" id="text_tbox_02" type="text" value="Max">
-        </div>
-        <div class="f select required">
-          <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
-          <select class="f" id="text_tbox_03">
-            <option>Dortmund</option>
-            <option>Bochum</option>
-            <option>Essen</option>
-            <option>Mönchengladbach</option>
-            <option>Oberhausen</option>
-            <option>Castrop-Rauxel</option>
-            <option>Düsseldorf</option>
-          </select>
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
-          <input class="f error" id="text_tbox_04" type="text" value="">
-          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
-          <input class="f" id="text_tbox_05" type="text" value="">
-        </div>
-        <div class="f text required">
-          <label class="f" for="text_tbox_06">Telefon</label>
-          <input class="f" id="text_tbox_06" type="text" value="">
-        </div>
-        <hr class="f">
-        <div class="f submit">
-          <input class="f" type="submit" value="> weiter">
-        </div>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Anzeige regionalisieren</h2>
-        <p class="f">
-          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
-          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
-          bestimmten Städten suchen.
-          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
-          diesen Interessenten aber auch nicht gefunden.
-        </p>
-        <hr class="f">
-        <div class="f text">
-          <label class="f" for="city">Stadt</label>
-          <input class="f" id="city" type="text">
-          <p class="f info">
-            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
-          </p>
-        </div>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
-        <div class="f text required">
-          <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
-          <input class="f" id="text_tbox_05" type="password" value="t">
-        </div>
-      </form>
-      <form action="#" class="testlab form" method="get">
-        <h2 class="f">Lade das Bild hoch</h2>
-        <p class="f info">
-          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
-          Das Bild darf nicht größer als 8 MByte sein.
-        </p>
-        <div class="f file required">
-          <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
-          <input class="f" id="file_tbox_01" type="file">
-        </div>
-        <hr class="f">
-        <div class="f submit">
-          <input class="f" type="submit" value="> Doch kein Bild">
-          <input class="f" type="submit" value="> Bild hochladen">
-        </div>
-      </form>
-      <div class="testlab form">
-        <h2 class="f">Antworten</h2>
-        <p class="f required">
-          <strong class="r">Pflichtfelder</strong> sind mit einem
-          <strong class="r symbol">*</strong> markiert.
-        </p>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
-          <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
-        </div>
-        <div class="f text required">
-          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
-          <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
-        </div>
-        <div class="f text required">
-          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
-          <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
-        </div>
-        <div class="f textarea required">
-          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
-          <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
-        </div>
-        <div class="f checkbox">
-          <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
-          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
-        </div>
-        <div class="f checkbox">
-          <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
-          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
-        </div>
-      </div>
-      <div class="testlab form cf">
-        <div class="col2 left">
-          <h2 class="f">Weiter mit Anmeldung</h2>
-          <div class="f text">
-            <label class="f" for="username">Benutzername</label>
-            <input class="f" id="username" name="username" tabindex="6" type="text">
-          </div>
-          <div class="f text">
-            <label class="f" for="password">Passwort</label>
-            <input class="f" id="password" name="password" tabindex="7" type="password">
-          </div>
-        </div>
-        <div class="col2 right">
-          <h2 class="f">Weiter ohne Anmeldung</h2>
-          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
-          <div class="f captcha cf">
-            <span class="f">Was steht da?</span>
-            <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
-          </div>
-          <div class="f text">
-            <label class="f" for="captcha">Lösung</label>
-            <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
-          </div>
-        </div>
-      </div>
-    </div>
diff --git a/content/potemkin/html-experimente/html-experimente/tiny.html b/content/potemkin/html-experimente/html-experimente/tiny.html
deleted file mode 100644
index 5454099..0000000
--- a/content/potemkin/html-experimente/html-experimente/tiny.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: "HTML-Experimente - Layout TINY"
----
-<main class="maincontent">
-      <header><h1>Layout für sehr kleine Bildschirmgrößen</h1></header>
-      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
-    </main>
-<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
-      MARGINAL-CONTENT
-    </aside>
diff --git a/content/potemkin/html-experimente/kein-layout.html b/content/potemkin/html-experimente/kein-layout.html
new file mode 100644
index 0000000..6ad88c8
--- /dev/null
+++ b/content/potemkin/html-experimente/kein-layout.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Kein Layout"
+---
+<main class="maincontent">
+      <header><h1>Alle Stylings deaktiviert</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/phone.html b/content/potemkin/html-experimente/phone.html
new file mode 100644
index 0000000..e95f691
--- /dev/null
+++ b/content/potemkin/html-experimente/phone.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Layout PHONE"
+---
+<main class="maincontent">
+      <header><h1>Layout für Smartphones</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/seitenaufteilung.html b/content/potemkin/html-experimente/seitenaufteilung.html
new file mode 100644
index 0000000..6fa306c
--- /dev/null
+++ b/content/potemkin/html-experimente/seitenaufteilung.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Basis-Layout & Seitenaufteilung"
+---
+<main class="maincontent">
+      <header><h1>Nur das Basis-Layout und die Seitenaufteiltung</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/seitenkopf.html b/content/potemkin/html-experimente/seitenkopf.html
new file mode 100644
index 0000000..96a5a7d
--- /dev/null
+++ b/content/potemkin/html-experimente/seitenkopf.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Basis-Layout & Seitenkopf"
+---
+<main class="maincontent">
+      <header><h1>Nur das Basis-Layout und der Seitenkopf</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/symbole.html b/content/potemkin/html-experimente/symbole.html
new file mode 100644
index 0000000..9c55e18
--- /dev/null
+++ b/content/potemkin/html-experimente/symbole.html
@@ -0,0 +1,401 @@
+---
+title: "HTML-Experimente - Symbol-Font"
+---
+<article class="maincontent">
+      <header><h1>Symbol-Font</h1></header>
+      <h2>100%</h2>
+      <div class="symbols">
+        <span class="e600"></span>
+        <span class="e601"></span>
+        <span class="e602"></span>
+        <span class="e603"></span>
+        <span class="e604"></span>
+        <span class="e605"></span>
+        <span class="e606"></span>
+        <span class="e607"></span>
+        <span class="e608"></span>
+        <span class="e609"></span>
+        <span class="e60a"></span>
+        <span class="e60b"></span>
+        <span class="e60c"></span>
+        <span class="e60d"></span>
+        <span class="e60e"></span>
+        <span class="e60f"></span>
+        <span class="e610"></span>
+        <span class="e611"></span>
+        <span class="e612"></span>
+        <span class="e613"></span>
+        <span class="e614"></span>
+        <span class="e615"></span>
+        <span class="e616"></span>
+        <span class="e617"></span>
+        <span class="e618"></span>
+        <span class="e619"></span>
+        <span class="e61a"></span>
+        <span class="e61b"></span>
+        <span class="e61c"></span>
+        <span class="e61d"></span>
+        <span class="e61e"></span>
+        <span class="e61f"></span>
+        <span class="e620"></span>
+        <span class="e621"></span>
+        <span class="e622"></span>
+        <span class="e623"></span>
+        <span class="e624"></span>
+        <span class="e625"></span>
+        <span class="e626"></span>
+        <span class="e627"></span>
+        <span class="e628"></span>
+        <span class="e629"></span>
+        <span class="e62a"></span>
+        <span class="e62b"></span>
+        <span class="e62c"></span>
+        <span class="e62d"></span>
+        <span class="e62e"></span>
+        <span class="e62f"></span>
+        <span class="e630"></span>
+        <span class="e631"></span>
+        <span class="e632"></span>
+        <span class="e633"></span>
+        <span class="e634"></span>
+        <span class="e635"></span>
+        <span class="e636"></span>
+        <span class="e637"></span>
+        <span class="e638"></span>
+        <span class="e639"></span>
+        <span class="e63a"></span>
+        <span class="e63b"></span>
+        <span class="e63c"></span>
+        <span class="e63d"></span>
+        <span class="e63e"></span>
+        <span class="e63f"></span>
+        <span class="e640"></span>
+        <span class="e641"></span>
+        <span class="e642"></span>
+        <span class="e643"></span>
+        <span class="e644"></span>
+        <span class="e645"></span>
+        <span class="e646"></span>
+        <span class="e647"></span>
+        <span class="e648"></span>
+        <span class="e649"></span>
+        <span class="e64a"></span>
+        <span class="e64b"></span>
+      </div>
+      <h2>200%</h2>
+      <div class="symbols" style="font-size: 200%; line-height: 1.5em">
+        <span class="e600"></span>
+        <span class="e601"></span>
+        <span class="e602"></span>
+        <span class="e603"></span>
+        <span class="e604"></span>
+        <span class="e605"></span>
+        <span class="e606"></span>
+        <span class="e607"></span>
+        <span class="e608"></span>
+        <span class="e609"></span>
+        <span class="e60a"></span>
+        <span class="e60b"></span>
+        <span class="e60c"></span>
+        <span class="e60d"></span>
+        <span class="e60e"></span>
+        <span class="e60f"></span>
+        <span class="e610"></span>
+        <span class="e611"></span>
+        <span class="e612"></span>
+        <span class="e613"></span>
+        <span class="e614"></span>
+        <span class="e615"></span>
+        <span class="e616"></span>
+        <span class="e617"></span>
+        <span class="e618"></span>
+        <span class="e619"></span>
+        <span class="e61a"></span>
+        <span class="e61b"></span>
+        <span class="e61c"></span>
+        <span class="e61d"></span>
+        <span class="e61e"></span>
+        <span class="e61f"></span>
+        <span class="e620"></span>
+        <span class="e621"></span>
+        <span class="e622"></span>
+        <span class="e623"></span>
+        <span class="e624"></span>
+        <span class="e625"></span>
+        <span class="e626"></span>
+        <span class="e627"></span>
+        <span class="e628"></span>
+        <span class="e629"></span>
+        <span class="e62a"></span>
+        <span class="e62b"></span>
+        <span class="e62c"></span>
+        <span class="e62d"></span>
+        <span class="e62e"></span>
+        <span class="e62f"></span>
+        <span class="e630"></span>
+        <span class="e631"></span>
+        <span class="e632"></span>
+        <span class="e633"></span>
+        <span class="e634"></span>
+        <span class="e635"></span>
+        <span class="e636"></span>
+        <span class="e637"></span>
+        <span class="e638"></span>
+        <span class="e639"></span>
+        <span class="e63a"></span>
+        <span class="e63b"></span>
+        <span class="e63c"></span>
+        <span class="e63d"></span>
+        <span class="e63e"></span>
+        <span class="e63f"></span>
+        <span class="e640"></span>
+        <span class="e641"></span>
+        <span class="e642"></span>
+        <span class="e643"></span>
+        <span class="e644"></span>
+        <span class="e645"></span>
+        <span class="e646"></span>
+        <span class="e647"></span>
+        <span class="e648"></span>
+        <span class="e649"></span>
+        <span class="e64a"></span>
+        <span class="e64b"></span>
+      </div>
+      <h2>300%</h2>
+      <div class="symbols" style="font-size: 300%; line-height: 1.5em">
+        <span class="e600"></span>
+        <span class="e601"></span>
+        <span class="e602"></span>
+        <span class="e603"></span>
+        <span class="e604"></span>
+        <span class="e605"></span>
+        <span class="e606"></span>
+        <span class="e607"></span>
+        <span class="e608"></span>
+        <span class="e609"></span>
+        <span class="e60a"></span>
+        <span class="e60b"></span>
+        <span class="e60c"></span>
+        <span class="e60d"></span>
+        <span class="e60e"></span>
+        <span class="e60f"></span>
+        <span class="e610"></span>
+        <span class="e611"></span>
+        <span class="e612"></span>
+        <span class="e613"></span>
+        <span class="e614"></span>
+        <span class="e615"></span>
+        <span class="e616"></span>
+        <span class="e617"></span>
+        <span class="e618"></span>
+        <span class="e619"></span>
+        <span class="e61a"></span>
+        <span class="e61b"></span>
+        <span class="e61c"></span>
+        <span class="e61d"></span>
+        <span class="e61e"></span>
+        <span class="e61f"></span>
+        <span class="e620"></span>
+        <span class="e621"></span>
+        <span class="e622"></span>
+        <span class="e623"></span>
+        <span class="e624"></span>
+        <span class="e625"></span>
+        <span class="e626"></span>
+        <span class="e627"></span>
+        <span class="e628"></span>
+        <span class="e629"></span>
+        <span class="e62a"></span>
+        <span class="e62b"></span>
+        <span class="e62c"></span>
+        <span class="e62d"></span>
+        <span class="e62e"></span>
+        <span class="e62f"></span>
+        <span class="e630"></span>
+        <span class="e631"></span>
+        <span class="e632"></span>
+        <span class="e633"></span>
+        <span class="e634"></span>
+        <span class="e635"></span>
+        <span class="e636"></span>
+        <span class="e637"></span>
+        <span class="e638"></span>
+        <span class="e639"></span>
+        <span class="e63a"></span>
+        <span class="e63b"></span>
+        <span class="e63c"></span>
+        <span class="e63d"></span>
+        <span class="e63e"></span>
+        <span class="e63f"></span>
+        <span class="e640"></span>
+        <span class="e641"></span>
+        <span class="e642"></span>
+        <span class="e643"></span>
+        <span class="e644"></span>
+        <span class="e645"></span>
+        <span class="e646"></span>
+        <span class="e647"></span>
+        <span class="e648"></span>
+        <span class="e649"></span>
+        <span class="e64a"></span>
+        <span class="e64b"></span>
+      </div>
+      <h2>400%</h2>
+      <div class="symbols" style="font-size: 400%; line-height: 1.5em">
+        <span class="e600"></span>
+        <span class="e601"></span>
+        <span class="e602"></span>
+        <span class="e603"></span>
+        <span class="e604"></span>
+        <span class="e605"></span>
+        <span class="e606"></span>
+        <span class="e607"></span>
+        <span class="e608"></span>
+        <span class="e609"></span>
+        <span class="e60a"></span>
+        <span class="e60b"></span>
+        <span class="e60c"></span>
+        <span class="e60d"></span>
+        <span class="e60e"></span>
+        <span class="e60f"></span>
+        <span class="e610"></span>
+        <span class="e611"></span>
+        <span class="e612"></span>
+        <span class="e613"></span>
+        <span class="e614"></span>
+        <span class="e615"></span>
+        <span class="e616"></span>
+        <span class="e617"></span>
+        <span class="e618"></span>
+        <span class="e619"></span>
+        <span class="e61a"></span>
+        <span class="e61b"></span>
+        <span class="e61c"></span>
+        <span class="e61d"></span>
+        <span class="e61e"></span>
+        <span class="e61f"></span>
+        <span class="e620"></span>
+        <span class="e621"></span>
+        <span class="e622"></span>
+        <span class="e623"></span>
+        <span class="e624"></span>
+        <span class="e625"></span>
+        <span class="e626"></span>
+        <span class="e627"></span>
+        <span class="e628"></span>
+        <span class="e629"></span>
+        <span class="e62a"></span>
+        <span class="e62b"></span>
+        <span class="e62c"></span>
+        <span class="e62d"></span>
+        <span class="e62e"></span>
+        <span class="e62f"></span>
+        <span class="e630"></span>
+        <span class="e631"></span>
+        <span class="e632"></span>
+        <span class="e633"></span>
+        <span class="e634"></span>
+        <span class="e635"></span>
+        <span class="e636"></span>
+        <span class="e637"></span>
+        <span class="e638"></span>
+        <span class="e639"></span>
+        <span class="e63a"></span>
+        <span class="e63b"></span>
+        <span class="e63c"></span>
+        <span class="e63d"></span>
+        <span class="e63e"></span>
+        <span class="e63f"></span>
+        <span class="e640"></span>
+        <span class="e641"></span>
+        <span class="e642"></span>
+        <span class="e643"></span>
+        <span class="e644"></span>
+        <span class="e645"></span>
+        <span class="e646"></span>
+        <span class="e647"></span>
+        <span class="e648"></span>
+        <span class="e649"></span>
+        <span class="e64a"></span>
+        <span class="e64b"></span>
+      </div>
+      <h2>500%</h2>
+      <div class="symbols" style="font-size: 500%; line-height: 1.5em">
+        <span class="e600"></span>
+        <span class="e601"></span>
+        <span class="e602"></span>
+        <span class="e603"></span>
+        <span class="e604"></span>
+        <span class="e605"></span>
+        <span class="e606"></span>
+        <span class="e607"></span>
+        <span class="e608"></span>
+        <span class="e609"></span>
+        <span class="e60a"></span>
+        <span class="e60b"></span>
+        <span class="e60c"></span>
+        <span class="e60d"></span>
+        <span class="e60e"></span>
+        <span class="e60f"></span>
+        <span class="e610"></span>
+        <span class="e611"></span>
+        <span class="e612"></span>
+        <span class="e613"></span>
+        <span class="e614"></span>
+        <span class="e615"></span>
+        <span class="e616"></span>
+        <span class="e617"></span>
+        <span class="e618"></span>
+        <span class="e619"></span>
+        <span class="e61a"></span>
+        <span class="e61b"></span>
+        <span class="e61c"></span>
+        <span class="e61d"></span>
+        <span class="e61e"></span>
+        <span class="e61f"></span>
+        <span class="e620"></span>
+        <span class="e621"></span>
+        <span class="e622"></span>
+        <span class="e623"></span>
+        <span class="e624"></span>
+        <span class="e625"></span>
+        <span class="e626"></span>
+        <span class="e627"></span>
+        <span class="e628"></span>
+        <span class="e629"></span>
+        <span class="e62a"></span>
+        <span class="e62b"></span>
+        <span class="e62c"></span>
+        <span class="e62d"></span>
+        <span class="e62e"></span>
+        <span class="e62f"></span>
+        <span class="e630"></span>
+        <span class="e631"></span>
+        <span class="e632"></span>
+        <span class="e633"></span>
+        <span class="e634"></span>
+        <span class="e635"></span>
+        <span class="e636"></span>
+        <span class="e637"></span>
+        <span class="e638"></span>
+        <span class="e639"></span>
+        <span class="e63a"></span>
+        <span class="e63b"></span>
+        <span class="e63c"></span>
+        <span class="e63d"></span>
+        <span class="e63e"></span>
+        <span class="e63f"></span>
+        <span class="e640"></span>
+        <span class="e641"></span>
+        <span class="e642"></span>
+        <span class="e643"></span>
+        <span class="e644"></span>
+        <span class="e645"></span>
+        <span class="e646"></span>
+        <span class="e647"></span>
+        <span class="e648"></span>
+        <span class="e649"></span>
+        <span class="e64a"></span>
+        <span class="e64b"></span>
+      </div>
+    </article>
diff --git a/content/potemkin/html-experimente/tablet.html b/content/potemkin/html-experimente/tablet.html
new file mode 100644
index 0000000..50e615d
--- /dev/null
+++ b/content/potemkin/html-experimente/tablet.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Layout TABLET"
+---
+<main class="maincontent">
+      <header><h1>Layout für Tablets</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/html-experimente/testlab.html b/content/potemkin/html-experimente/testlab.html
new file mode 100644
index 0000000..e6d455c
--- /dev/null
+++ b/content/potemkin/html-experimente/testlab.html
@@ -0,0 +1,253 @@
+---
+title: "HTML-Experimente - Media-Query-Test: BEISPIEL"
+---
+<div class="content">
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Anzeigetext</h2>
+        <div class="f textarea">
+          <label class="f info" for="textarea_01">Geben Sie hier Ihren Anzeigentext ein.</label>
+          <textarea class="f error" cols="50" id="textarea_01" rows="10">Eingegebener Text</textarea>
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Es wurde kein Text für die Anzeige eingegeben!</span>
+        </div>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Textformatierung</h2>
+        <fieldset class="f radiobutton cf">
+          <legend class="f info">
+            Die zusätzlichen Gestaltungsoptionen sind nur für das Magazin wählbar.<br>
+            Online erscheint die Anzeige als normaler Fließtext.
+          </legend>
+          <hr class="f">
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_01" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_02" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_02">Text zentriert</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_03" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_04" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_04">Text fett</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_05" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_05">Text fett und rot</label>
+            </div>
+          </div>
+          <div class="col2">
+            <div class="f">
+              <input class="f" id="radio_tbox_06" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_07" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_08" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+            </div>
+            <div class="f">
+              <input class="f" id="radio_tbox_09" name="radio_tbox" type="radio">
+              <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Einspaltige Radiobuttons...</h2>
+        <fieldset class="f radiobutton">
+          <div class="f">
+            <input class="f" id="radio_tbox_b01" name="radio_tbox" type="radio">
+            <label class="f" for="radio_tbox_b01">Dies ist eine etwas länglichere Beschreibung der auswählbaren Option</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b02" name="radio_tbox" type="radio">
+            <label class="f" for="radio_tbox_b02">Option X</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_b03" name="radio_tbox" type="radio">
+            <label class="f" for="radio_tbox_b03">Dies ist eine sehr, sehr lange Beschreibung der auswählbaren Option - so lang, dass sie am Ende hoffentlich umbricht...</label>
+          </div>
+        </fieldset>
+        <hr class="f">
+        <div class="f submit">
+          <input class="f" type="submit" value="> zur Übersicht">
+          <input class="f left" type="submit" value="< zurück">
+          <input class="f" type="submit" value="> weiter">
+        </div>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Bild</h2>
+        <fieldset class="f checkbox">
+          <legend class="f">
+            Du kannst Deiner Anzeige ein Bild hinzufügen.
+            Das Bild erscheint nur online.
+            Im Magazin erscheint die Kleinanzeige mit Hinweis auf das Onlinebild.
+          </legend>
+          <hr class="f">
+          <div class="f">
+            <input class="f" id="checkbox_tbox_01" name="checkbox_tbox" type="checkbox">
+            <label class="f" for="checkbox_tbox_01">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+          </div>
+          <div class="f">
+            <input class="f" id="checkbox_tbox_02" name="checkbox_tbox" type="checkbox">
+            <label class="f" for="checkbox_tbox_02">Ich habe die AGB für das Hochladen von Bildern gelesen und akzeptiere diese</label>
+          </div>
+        </fieldset>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Alleinstehende Checkbox</h2>
+        <div class="f checkbox">
+          <input class="f" id="checkbox_tbox_03" name="checkbox_tbox" type="checkbox">
+          <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+        </div>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Kundendaten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label class="f" for="text_tbox_01"><span class="required">* </span>Nachname</label>
+          <input class="f" id="text_tbox_01" type="text" value="Mustermann">
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_02">Vorname</label>
+          <input class="f" id="text_tbox_02" type="text" value="Max">
+        </div>
+        <div class="f select required">
+          <label class="f" for="text_tbox_03"><span class="required">* </span>Ort</label>
+          <select class="f" id="text_tbox_03">
+            <option>Dortmund</option>
+            <option>Bochum</option>
+            <option>Essen</option>
+            <option>Mönchengladbach</option>
+            <option>Oberhausen</option>
+            <option>Castrop-Rauxel</option>
+            <option>Düsseldorf</option>
+          </select>
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_04"><span class="required">* </span>Straße/Hausnr.</label>
+          <input class="f error" id="text_tbox_04" type="text" value="">
+          <span class="f error"><span class="e">&lt; </span><strong class="e">Fehler:</strong> Dies ist ein Pflichtfeld!</span>
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_05"><span class="required">* </span>Postleitzahl</label>
+          <input class="f" id="text_tbox_05" type="text" value="">
+        </div>
+        <div class="f text required">
+          <label class="f" for="text_tbox_06">Telefon</label>
+          <input class="f" id="text_tbox_06" type="text" value="">
+        </div>
+        <hr class="f">
+        <div class="f submit">
+          <input class="f" type="submit" value="> weiter">
+        </div>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Anzeige regionalisieren</h2>
+        <p class="f">
+          Indem Du Deine Kleinanzeige einer Stadt zuordnest, können Interessenten
+          diese online leichter finden, wenn sie nur nach Kleinanzeigen aus
+          bestimmten Städten suchen.
+          Du kannst auch keine Stadt zuordnen, dann wird die Kleinanzeige von
+          diesen Interessenten aber auch nicht gefunden.
+        </p>
+        <hr class="f">
+        <div class="f text">
+          <label class="f" for="city">Stadt</label>
+          <input class="f" id="city" type="text">
+          <p class="f info">
+            Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+          </p>
+        </div>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+        <div class="f text required">
+          <label class="f" for="text_tbox_05"><span class="required">* </span>Passwort</label>
+          <input class="f" id="text_tbox_05" type="password" value="t">
+        </div>
+      </form>
+      <form action="#" class="testlab form" method="get">
+        <h2 class="f">Lade das Bild hoch</h2>
+        <p class="f info">
+          Du kannst ein Bild im JPEG- oder PNG-Format hochladen.
+          Das Bild darf nicht größer als 8 MByte sein.
+        </p>
+        <div class="f file required">
+          <label class="f" for="file_tbox_01"><span class="required">* </span>Bild</label>
+          <input class="f" id="file_tbox_01" type="file">
+        </div>
+        <hr class="f">
+        <div class="f submit">
+          <input class="f" type="submit" value="> Doch kein Bild">
+          <input class="f" type="submit" value="> Bild hochladen">
+        </div>
+      </form>
+      <div class="testlab form">
+        <h2 class="f">Antworten</h2>
+        <p class="f required">
+          <strong class="r">Pflichtfelder</strong> sind mit einem
+          <strong class="r symbol">*</strong> markiert.
+        </p>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Antwort-Adresse</label>
+          <input class="f" id="replyTo" name="replyTo" tabindex="1" type="text" value="">
+        </div>
+        <div class="f text required">
+          <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+          <input class="f" id="replyToRepeated" name="replyToRepeated" tabindex="2" type="text" value="">
+        </div>
+        <div class="f text required">
+          <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+          <input class="f" id="subject" name="subject" tabindex="3" type="text" value="">
+        </div>
+        <div class="f textarea required">
+          <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+          <textarea class="f" cols="20" id="text" name="text" rows="15" tabindex="4"></textarea>
+        </div>
+        <div class="f checkbox">
+          <input checked="checked" class="f" id="attachment1" name="attachment" tabindex="4" type="checkbox" value="true"><input name="_attachment" type="hidden" value="on">
+          <label class="f" for="attachment">Ich möchte eine Datei an die E-Mail anhängen.</label>
+        </div>
+        <div class="f checkbox">
+          <input checked="checked" class="f" id="copy1" name="copy" tabindex="5" type="checkbox" value="true"><input name="_copy" type="hidden" value="on">
+          <label class="f" for="copy">Ich möchte eine Kopie der Nachricht zugesendet bekommen.</label>
+        </div>
+      </div>
+      <div class="testlab form cf">
+        <div class="col2 left">
+          <h2 class="f">Weiter mit Anmeldung</h2>
+          <div class="f text">
+            <label class="f" for="username">Benutzername</label>
+            <input class="f" id="username" name="username" tabindex="6" type="text">
+          </div>
+          <div class="f text">
+            <label class="f" for="password">Passwort</label>
+            <input class="f" id="password" name="password" tabindex="7" type="password">
+          </div>
+        </div>
+        <div class="col2 right">
+          <h2 class="f">Weiter ohne Anmeldung</h2>
+          <!-- <a href="/kleinanzeigen/37431/lust+.html" title="Zu schwer? Hier klicken um das Bild zu wechseln!"><img src="/img/captcha.jpg" alt="Captcha" width="120" height="60" /></a> -->
+          <div class="f captcha cf">
+            <span class="f">Was steht da?</span>
+            <img alt="Captcha" class="f" height="60" src="/img/captcha.jpg" width="120">
+          </div>
+          <div class="f text">
+            <label class="f" for="captcha">Lösung</label>
+            <input class="f" id="captcha" name="captcha" tabindex="8" type="text">
+          </div>
+        </div>
+      </div>
+    </div>
diff --git a/content/potemkin/html-experimente/tiny.html b/content/potemkin/html-experimente/tiny.html
new file mode 100644
index 0000000..5454099
--- /dev/null
+++ b/content/potemkin/html-experimente/tiny.html
@@ -0,0 +1,10 @@
+---
+title: "HTML-Experimente - Layout TINY"
+---
+<main class="maincontent">
+      <header><h1>Layout für sehr kleine Bildschirmgrößen</h1></header>
+      <strong th:replace="/templates/layout.html :: maincontent">MAIN-CONTENT</strong>
+    </main>
+<aside class="marginalcontent" th:replace="/templates/fragments.html :: marginalcontent">
+      MARGINAL-CONTENT
+    </aside>
diff --git a/content/potemkin/potemkin.html b/content/potemkin/potemkin.html
new file mode 100644
index 0000000..2fddaa2
--- /dev/null
+++ b/content/potemkin/potemkin.html
@@ -0,0 +1,12 @@
+---
+title: "Projects - Potemkinsche Dörfer!"
+---
+<main class="maincontent">
+     <h1>Projects - Potemkinsche Dörfer!</h1>
+     <ul>
+       <li><a href="potemkin/fix-swf/overview.html" th:href="@{/potemkin/fix-swf/overview.html}">Fix SWF</a></li>
+       <li><a href="potemkin/html-experimente.html" th:href="@{/potemkin/html-experimente.html}">HTML-Experimente</a></li>
+       <li><a href="potemkin/accelerator.html" th:href="@{/potemkin/accelerator.html}">accelerator</a></li>
+       <li><a href="potemkin/typo.html" th:href="@{/potemkin/typo.html}">Typography</a></li>
+     </ul>
+   </main>
diff --git a/content/templates/_index.html b/content/templates/_index.html
new file mode 100644
index 0000000..68bfa11
--- /dev/null
+++ b/content/templates/_index.html
@@ -0,0 +1,3 @@
+---
+title: Templates
+---