From 5b599598b0e9c08e099fdeed5a86d2cad044db14 Mon Sep 17 00:00:00 2001
From: Kai Moritz <km@feder-software.de>
Date: Mon, 23 Dec 2013 00:41:16 +0100
Subject: [PATCH] Formulare

---
 .../WEB-INF/templates/test/experimente.jsp    |   4 +
 .../webapp/WEB-INF/views/test/formulare.jsp   | 259 +++++++++++
 src/main/webapp/WEB-INF/wro.xml               |   1 +
 src/main/webapp/less/base/formulare.less      | 421 ++++++++++++++++++
 src/main/webapp/less/variables.less           |   5 +
 5 files changed, 690 insertions(+)
 create mode 100644 src/main/webapp/WEB-INF/views/test/formulare.jsp
 create mode 100644 src/main/webapp/less/base/formulare.less

diff --git a/src/main/webapp/WEB-INF/templates/test/experimente.jsp b/src/main/webapp/WEB-INF/templates/test/experimente.jsp
index 36536514..f307a940 100644
--- a/src/main/webapp/WEB-INF/templates/test/experimente.jsp
+++ b/src/main/webapp/WEB-INF/templates/test/experimente.jsp
@@ -3,6 +3,10 @@
 <%@page session="false" %>
 <%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
 <s:url var="base" value="/" />
+<h2>HTML-Elemente</h2>
+<ul>
+  <li><a href="${base}test/formulare.html">Formulare</a></li>
+</ul>
 <h2>Layout-Grenzfälle</h2>
 <ul>
   <li><a href="${base}test/fast-leer-zweispaltig.html">Fast leere zweispaltige Seite</a></li>
diff --git a/src/main/webapp/WEB-INF/views/test/formulare.jsp b/src/main/webapp/WEB-INF/views/test/formulare.jsp
new file mode 100644
index 00000000..dbc96726
--- /dev/null
+++ b/src/main/webapp/WEB-INF/views/test/formulare.jsp
@@ -0,0 +1,259 @@
+<%@page contentType="text/html;charset=UTF-8"%>
+<%@page pageEncoding="UTF-8"%>
+<%@page session="false" %>
+<%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
+<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
+<s:url var="base" value="/" />
+<t:insertDefinition name="test">
+  <t:putAttribute name="title" value="Formulare" type="string"/>
+  <t:putAttribute name="maincontent" type="string">
+    <form class="form" action="#" 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" id="textarea_01" cols="50" 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 class="form" action="#" 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" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_01">normaler Fließtext</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_02" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_02">Text zentriert</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_03" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_03">Text fett, Negativdruck</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_04" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_04">Text fett</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_05" type="radio" name="radio_tbox" />
+            <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" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_06">Text fett, Anzeige blau hinterlegt</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_07" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_07">Text fett, Anzeige gelb hinterlegt</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_08" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_08">Anzeige schwarz eingerahmt</label>
+          </div>
+          <div class="f">
+            <input class="f" id="radio_tbox_09" type="radio" name="radio_tbox" />
+            <label class="f" for="radio_tbox_09">Anzeige rot eingerahmt</label>
+          </div>
+        </div>
+      </fieldset>
+    </form>
+    <form class="form" action="#" method="get">
+      <h2 class="f">Einspaltige Radiobuttons...</h2>
+      <fieldset class="f radiobutton">
+        <div class="f">
+          <input class="f" id="radio_tbox_b01" type="radio" name="radio_tbox" />
+          <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" type="radio" name="radio_tbox" />
+          <label class="f" for="radio_tbox_b02">Option X</label>
+        </div>
+        <div class="f">
+          <input class="f" id="radio_tbox_b03" type="radio" name="radio_tbox" />
+          <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="&gt; zur Übersicht" />
+        <input class="f left" type="submit" value="&lt; zurück" />
+        <input class="f" type="submit" value="&gt; weiter" />
+      </div>
+    </form>
+    <form class="form" action="#" 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" type="checkbox" name="checkbox_tbox" />
+          <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" type="checkbox" name="checkbox_tbox" />
+          <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 class="form" action="#" method="get">
+      <h2 class="f">Alleinstehende Checkbox</h2>
+      <div class="f checkbox">
+        <input class="f" id="checkbox_tbox_03" type="checkbox" name="checkbox_tbox" />
+        <label class="f" for="checkbox_tbox_03">Ich möchte ein Bild zu dieser Anzeige hinzufügen</label>
+      </div>
+    </form>
+    <form class="form" action="#" 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 for="text_tbox_01" class="f"><span class="required">* </span>Nachname</label>
+        <input class="f" id="text_tbox_01" type="text" value="Mustermann" />
+      </div>
+      <div class="f text required">
+        <label for="text_tbox_02" class="f">Vorname</label>
+        <input class="f" id="text_tbox_02" type="text" value="Max" />
+      </div>
+      <div class="f select required">
+        <label for="text_tbox_03" class="f"><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 for="text_tbox_04" class="f"><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 for="text_tbox_05" class="f"><span class="required">* </span>Postleitzahl</label>
+        <input class="f" id="text_tbox_05" type="text" value="" />
+      </div>
+      <div class="f text required">
+        <label for="text_tbox_06" class="f">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="&gt; weiter" />
+      </div>
+    </form>
+    <form class="form" action="#" 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 id="city" type="text" class="f" />
+        <p class="f info">
+          Das Feld leer lassen, wenn die Anzeige nicht regionalisiert werden soll.
+        </p>
+      </div>
+    </form>
+    <form class="form" action="#" method="get">
+      <h2 class="f">Ein Passwort-Eingabe-Feld</h2>
+      <div class="f text required">
+        <label for="text_tbox_05" class="f"><span class="required">* </span>Passwort</label>
+        <input class="f" id="text_tbox_05" type="password" value="t" />
+      </div>
+    </form>
+    <form class="form" action="#" 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 for="file_tbox_01" class="f"><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="&gt; Doch kein Bild" />
+        <input class="f" type="submit" value="&gt; 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 id="replyTo" name="replyTo" class="f" tabindex="1" type="text" value=""/>
+      </div>
+      <div class="f text required">
+        <label class="f" for="replyTo"><span class="required">*</span> Adresse wiederholen</label>
+        <input id="replyToRepeated" name="replyToRepeated" class="f" tabindex="2" type="text" value=""/>
+      </div>
+      <div class="f text required">
+        <label class="f" for="subject"><span class="required">*</span> Betreff</label>
+        <input id="subject" name="subject" class="f" tabindex="3" type="text" value=""/>
+      </div>
+      <div class="f textarea required">
+        <label class="f" for="text"><span class="required">*</span> Nachricht</label>
+        <textarea id="text" name="text" class="f" tabindex="4" rows="15" cols="20"></textarea>
+      </div>
+      <div class="f checkbox">
+        <input id="attachment1" name="attachment" class="f" tabindex="4" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_attachment" 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 id="copy1" name="copy" class="f" tabindex="5" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_copy" 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" name="username" id="username" type="text" tabindex="6" />
+        </div>
+        <div class="f text">
+          <label class="f" for="password">Passwort</label>
+          <input class="f" name="password" id="password" type="password" tabindex="7" />
+        </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 class="f" src="/img/captcha.jpg" alt="Captcha" width="120" height="60" />
+        </div>
+        <div class="f text">
+          <label class="f" for="captcha">Lösung</label>
+          <input class="f" name="captcha" id="captcha" type="text" tabindex="8" />
+        </div>
+      </div>
+    </div>
+  </t:putAttribute>
+</t:insertDefinition>
diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index ea521ea2..9e8990ba 100644
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -11,6 +11,7 @@
     <css>/less/base/prettify.less</css>
     <css>/less/base/marginal.less</css>
     <css>/less/base/footer.less</css>
+    <css>/less/base/formulare.less</css>
     <js>/js/prettify.js</js>
   </group>
 
diff --git a/src/main/webapp/less/base/formulare.less b/src/main/webapp/less/base/formulare.less
new file mode 100644
index 00000000..0e2ff374
--- /dev/null
+++ b/src/main/webapp/less/base/formulare.less
@@ -0,0 +1,421 @@
+/** Formulare *****************************************************************/
+
+@import '../variables.less';
+
+.form {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+/** Trennlinie */
+.form hr.f {
+  border-style: none;
+  border-top-style: dashed;
+  border-color: @normal;
+  border-width: .0625em;
+  margin: .625em 0; /** 10px 0 */
+  background-color: transparent;
+}
+
+/** Text im Formular */
+.form p.f {
+  color: @schrifthell;
+}
+.form p.f,
+.form .radiobutton > legend.f,
+.form .checkbox > legend.f,
+.form .textarea > label.f {
+  display: block;
+  font-size: 87.5%; /** 14px */
+  line-height: 1.5em; /** 21px */
+  color: @schrifthell;
+  margin: .428571429em 0; /** 6px 0 */
+}
+
+/** Aufzählungen im Formular */
+.form ul.f,
+.form ol.f {
+  color: @schrifthell;
+  margin: 1em 0;
+}
+
+/** Info-Text */
+.form p.f.info,
+.form .textarea > label.f.info,
+.form .radiobutton > legend.f.info,
+.form .checkbox > legend.f.info,
+.form .textarea > label.f.info {
+  display: block;
+  font-size: 81.25%; /** 13px */
+  line-height: 1.230769231em; /** 16px */
+  font-style: italic;
+  color: @schrifthell;
+  padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
+  background-image: url(../../img/em.png);
+  background-repeat: no-repeat;
+  background-position: 0 1px;
+  margin-top: .461538462em; /** 6px */
+  margin-bottom: .461538462em; /** 6px */
+}
+.form .info > a {
+  display: inline-block;
+}
+
+/** Überschriften */
+.form h1.f {
+  font-size: 137.5%; /** 22px */
+  letter-spacing: .0454545em; /** 1px */
+  line-height: 1em;
+  padding: 0 0 .454545455em; /** 0 0 10px */
+  border-bottom: .090909091em solid @normal; /** 2px */
+  margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
+}
+.form h2.f {
+  font-size: 100%; /** 16px */
+  letter-spacing: .0625em; /** 1px */
+  text-transform: uppercase;
+  line-height: 1.625em; /** 26px */
+  padding: 0 0 0 .125em; /** 0 0 0 2px */
+  border-bottom: .0625em solid @normal; /** 1px */
+  margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
+}
+.form h3.f {
+/**  border-bottom: 1px dashed @normal; */
+}
+.form p.required {
+  text-indent: -999em;
+  margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */
+}
+.form p.required > strong.r {
+  display: block;
+  float: right;
+  position: relative;
+  right: -994em;
+  margin-right: 1em; /** 14px */
+  font-weight: normal;
+}
+.form p.required > strong.symbol {
+  font-size: 128.5714286%; /** 18px zu 14px */
+  margin-right: .555555em; /** 10px */
+  padding-top: .1666666em; /** 3px */
+  right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
+  font-weight: 700;
+  color: @dunkel;
+}
+
+/** Fehler-Hinweise */
+.f.error {
+  color: @fehler;
+}
+span.f.error {
+  display: block;
+  position: relative;
+  font-size: 87.5%; /** 14px */
+  line-height: 1.214285714em; /** 17px */
+  padding: .571428571em; /** 8px */
+  color: @hintergrund;
+  background-color: @fehler;
+  margin: .857142857em 0 0 0; /** 12px 0 0 0 */
+}
+span.f.error > span.e {
+  display: block;
+  width: .857142857em; /** 12px */
+  height: .428571429em; /** 6px */
+  background-image: url(../../img/arrow-red.gif);
+  text-indent: -9999em;
+  position: absolute;
+  top: -.428571429em; /** -6px */
+  left: 2.142857143em; /** 30px */
+}
+span.f.error > strong.e {
+  text-transform: uppercase;
+}
+
+/** Input, Select und Dateiupload mit Label */
+.form .text,
+.form .select,
+.form .file {
+  position: relative;
+  margin-bottom: .75em; /** 12px */
+}
+.form .text,
+.form .file {
+  margin-right: 10em; /** 160px */
+}
+.form .select {
+  margin-right: 9em; /** 144px */
+}
+h2.f + div.text,
+h2.f + div.select,
+h2.f + div.file,
+h2.f + div.captcha,
+p.f + div.text,
+p.f + div.select,
+p.f + div.file {
+  margin-top: 20px;
+}
+.form .text > label.f,
+.form .textarea > label.f,
+.form .select > label.f,
+.form .file > label.f,
+.form .captcha > span.f {
+  display: block;
+  position: relative;
+  font-size: 87.5%; /** 14px */
+  line-height: 1.214285714em; /** 17px */
+  padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
+  color: @schrift;
+}
+.form .file > label.f {
+  padding-top: .285714286em; /** 4px */
+  padding-bottom: .285714286em; /** 4px */
+}
+.form .captcha > span.f {
+  position: absolute;
+}
+.form .required > label.f {
+  padding-left: 1em; /** 14px */
+}
+.form .required > label.f > .required {
+  display: block;
+  position: absolute;
+  font-size: 128.5714286%; /** 18px zu 14px */
+  font-weight: 700;
+  color: @dunkel;
+  top: .611111111em; /** 11px */
+  left: 0;
+}
+.form .file > label.f > .required {
+  top: .5em; /** 7px */
+}
+.form .text > input.f,
+.form .select > select.f,
+.form .file > input.f {
+  display: block;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  font-size: 81.25%; /** 13px */
+  border: .076923077em solid @normal; /** 1px */
+  color: @schrift;
+  background-color: @sehrhell;
+}
+.form .text > input.f {
+  line-height: 1.307692308em; /** 17px */
+  padding: .538461538em; /** 7px */
+  right: -12.307692308em; /** -160px */
+}
+.form .select > select.f {
+  line-height: 1.230769231em; /** 16px */
+  padding: .461538462em .538461538em; /** 6px 7px */
+  right: -11.076923077em; /** -144px */
+}
+.form .file > input.f {
+  margin-left: 11.076923077em; /** 144px */
+}
+.form .captcha > img.f {
+    float: right;
+    margin-top: -.9375em; /** 15px */
+    width: 7.5em; /** 120px */
+    height: 3.75em; /** 60px */
+}
+.form .text > input.f:focus,
+.form .select > select.f:focus,
+.form .text > input.f:active,
+.form .select > select.f:active {
+  background-color: transparent;
+}
+.form .text > p.f.info,
+.form .select > p.f.info,
+.form .file > p.f.info {
+  position: relative;
+  left: 11.076923077em; /** 144px */
+}
+.form .text > span.f.error,
+.form .select > span.f.error,
+.form .file > span.f.error {
+  width: 100%;
+  margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/
+}
+
+/** Textfelder */
+.form .textarea {
+  position: relative;
+  margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */
+}
+.form .textarea > label.f {
+  margin: .615384615em -.846153846em; /** 8px -11px */
+}
+.form .textarea > textarea.f,
+.form .textarea > div.textarea {
+  width: 100%;
+  border: .076923077em solid @normal; /** 1px */
+  color: @schrift;
+  background-color: @sehrhell;
+  padding: .769230769em; /** 10px */
+  position: relative;
+  left: -.846153846em; /** -11px */
+}
+.form .textarea > div.textarea {
+  margin: 0;
+  font-size: 87.5%; /** 14px */
+}
+.form .textarea > textarea.f:focus,
+.form .textarea > textarea.f:active {
+  background-color: transparent;
+}
+.form .textarea > span.f.error {
+  margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */
+}
+
+/** Radiobuttons und Checkboxen */
+.form .radiobutton > legend.f.info,
+.form .checkbox > legend.f.info {
+  padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/
+  background-position: 0 .230769231em; /** 0 3px */
+}
+.form .col2,
+.form .radiobutton > .col2,
+.form .checkbox > .col2 {
+  width: 48%;
+  float: left;
+}
+.form .col2.left,
+.form .radiobutton > .col2.left,
+.form .checkbox > .col2.left {
+  margin-right: 2%;
+}
+.form .col2.right,
+.form .radiobutton > .col2.right,
+.form .checkbox > .col2.right {
+  float: right;
+  margin-left: 2%;
+}
+.form div.checkbox,
+.form .radiobutton > .f,
+.form .checkbox > .f,
+.form .radiobutton > .col2 > .f,
+.form .checkbox > .col2 > .f {
+  position: relative;
+}
+.form div.checkbox > label.f,
+.form .radiobutton > .f > label.f,
+.form .checkbox > .f > label.f,
+.form .radiobutton > .col2 > .f > label.f,
+.form .checkbox > .col2 > .f > label.f {
+  display: block;
+  font-size: 87.5%; /** 14px */
+  line-height: 1.285714286em; /** 18px */
+  color: @schrift;
+  margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
+}
+.form div.checkbox > input.f,
+.form .radiobutton > .f > input.f,
+.form .checkbox > .f > input.f,
+.form .radiobutton > .col2 > .f > input.f,
+.form .checkbox > .col2 > .f > input.f {
+  position: absolute;
+  margin: .285714286em 0; /** 4px 0 */
+}
+.form div.checkbox > input.error,
+.form .radiobutton > .f > input.error,
+.form .checkbox > .f > input.error {
+  /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */
+}
+.form div.checkbox:hover > label.f,
+.form .radiobutton > .f:hover > label.f,
+.form .checkbox > .f:hover > label.f,
+.form div.checkbox:focus > label.f,
+.form .radiobutton > .f:focus > label.f,
+.form .checkbox > .f:focus > label.f,
+.form div.checkbox:active > label.f,
+.form .radiobutton > .f:active > label.f,
+.form .checkbox > .f:active > label.f,
+.form .radiobutton > .col2 > .f:hover > label.f,
+.form .checkbox > .col2 > .f:hover > label.f,
+.form .radiobutton > .col2 > .f:focus > label.f,
+.form .checkbox > .col2 > .f:focus > label.f,
+.form .radiobutton > .col2 > .f:active > label.f,
+.form .checkbox > .col2 > .f:active > label.f {
+  color: @schrift;
+}
+
+/** Sondereinstellungen für Fehler-Hervorhebungen */
+.form .text > input.error,
+.form .textarea > textarea.error,
+.form .select > select.error,
+.form .file > input.error {
+  color: @schrift;
+  font-weight: 700;
+  border-color: @fehler;
+  background-color: @fehlerhell;
+}
+
+
+/** Absende-Buttons */
+ul.buttons,
+ol.buttons {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  text-align: right;
+}
+ul.buttons > li.b,
+ol.buttons > li.b {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}
+.form .submit {
+  text-align: right;
+  margin-bottom: .75em; /** 12px */
+}
+.form .submit > input.f,
+.form .submit > a.f,
+a.ln.button {
+  display: inline-block;
+  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
+  font-size: 81.25%; /** 13px */
+  letter-spacing: .076923077em; /** 1px */
+  line-height: 25px;
+  padding:0 6px;
+  height: 1.923076923em; /** 25px */
+  color: @hintergrund;
+  font-weight: 700;
+  background-color: @normal;
+  border-style: none;
+}
+.form .submit > input.f,
+.form .submit > a.f,
+ul.buttons > li.b,
+ol.buttons > li.b {
+  margin: 0 0 0 .615384615em; /** 0 0 0 8px */
+}
+a.ln.button:before {
+  content: none;
+}
+.form .submit > input.left,
+.form .submit > a.left,
+a.ln.button.left {
+  float: left;
+  margin: 0 .923076923em 0 0; /** 0 12px 0 0 */
+}
+.form .submit > input.right,
+.form .submit > a.right,
+a.ln.button.right {
+  float: right;
+  margin: 0 0 0 .923076923em; /** 0 0 0 12px */
+}
+.form .submit > input.f:hover,
+.form .submit > a.f:hover,
+a.ln.button:hover,
+.form .submit > input.f:focus,
+.form .submit > a.f:focus,
+a.ln.button:focus,
+.form .submit > a.f:active,
+.form .submit > input.f:active,
+a.ln.button:active {
+  background-color: @dunkel;
+  text-decoration: none;
+}
diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less
index 915003db..cdb90c79 100644
--- a/src/main/webapp/less/variables.less
+++ b/src/main/webapp/less/variables.less
@@ -9,8 +9,13 @@
 @sehrhell:    #CEF7C8;
 
 @schrift:     #000;
+@schrifthell: tint(@schrift, 45%); 
+
 @hintergrund: #FFF;
 
+@fehler:      #e60000;
+@fehlerhell:  tint(@fehler, 70%);
+
 
 /** Schriften */
 
-- 
2.20.1