Formular-Abstaende korrigiert und Anleitungsseite ergaenzt

Abstaende:
Im Template hat das Label 1em Abstand nach unten, das Eingabefeld aber gar
keinen, und die Formular-Grids nutzen keinen vertikalen Gutter (gtr-uniform).
Dadurch war der Abstand vom Feld zum naechsten Label 0, waehrend Label zu
eigenem Feld 1em betrug - das Label wirkte, als gehoere es zum Feld darueber.
Jetzt sitzt das Label eng an seinem eigenen Feld (0,5em) und die Felder haben
1,5em Abstand nach unten.

Ausserdem stylt main.css die Typen number, date, datetime-local und file gar
nicht; diese Felder erschienen als kleine native Kaestchen zwischen den sonst
einheitlichen Feldern (z. B. "Listenfenster in Tagen" und "Zeilenhoehe im
Ausdruck"). Sie bekommen jetzt dasselbe Aussehen wie die Textfelder.

Die Anpassungen liegen in einer eigenen assets/css/app.css, damit main.css als
Template-Datei unveraendert bleibt. Nebenbei: .hint-box.error war nirgends
definiert, obwohl es die haeufigste Variante ist - Fehlermeldungen erschienen
ungefaerbt wie neutrale Hinweise.

In faq.php, hinweise.php, namenanpassen.php und stricheintragen.php standen
<br>/<br><br> als Abstandsersatz hinter Labels und Feldern; mit den neuen
Abstaenden waere daraus doppelter Leerraum geworden. Entfernt, das Layout
kommt jetzt aus dem CSS.

Anleitung:
Neue Seite anleitung.php mit den wichtigsten Funktionen, gegliedert nach
Zielgruppe. Die Abschnitte fuer Kassenwart bzw. Administration werden nur
eingeblendet, wenn die Rolle sie auch nutzen kann - sonst stuenden dort
Hinweise auf Menuepunkte, die es fuer den Nutzer nicht gibt. Verlinkt im Menue
unter "Kaffeeliste" und im Smoke-Test abgedeckt.

Geprueft: alle 12 Formularseiten rendern fehlerfrei, http-smoke 34/0,
role-matrix 55/0, tenant-isolation 12/0, settings-flow 15/0.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/css/app.css

@@ -0,0 +1,127 @@
+/*
+ * Anpassungen der Kaffeeliste gegenueber dem HTML5-UP-Template (main.css).
+ * Bewusst eine eigene Datei, damit main.css unveraendert bleibt und bei einem
+ * Template-Update nicht mit eigenen Aenderungen kollidiert. Wird in header.php
+ * NACH main.css geladen.
+ */
+
+/* ---------------------------------------------------------------------------
+ * Formular-Abstaende
+ *
+ * Im Template hat das Label 1em Abstand nach unten, das Eingabefeld aber gar
+ * keinen. In einem Formular mit mehreren Feldern klebte das naechste Label
+ * dadurch direkt am Feld darueber und wirkte, als gehoere es zu diesem statt
+ * zum eigenen Feld. Jetzt gilt: Label eng am eigenen Feld, deutlicher Abstand
+ * zur naechsten Gruppe.
+ * ------------------------------------------------------------------------ */
+label {
+	margin-bottom: 0.5em;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="file"],
+select,
+textarea {
+	margin-bottom: 1.5em;
+}
+
+/* Achtung: hier bewusst KEIN ".row > * > :last-child { margin-bottom: 0 }".
+   In einer Grid-Spalte ist das Eingabefeld das letzte Kind - genau dessen
+   unterer Abstand erzeugt die Trennung zur naechsten Formularzeile. */
+
+/* In Tabellen und nebeneinanderliegenden Bedienelementen wuerde der
+   zusaetzliche Abstand die Zeilen auseinanderziehen. */
+td label,
+td input,
+td select,
+td textarea,
+.form-inline label,
+.form-inline input,
+.form-inline select {
+	margin-bottom: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ * Zahlen-, Datums- und Dateifelder
+ *
+ * main.css stylt diese Typen nicht, sie erschienen deshalb als kleine native
+ * Kaestchen zwischen den sonst einheitlich gestalteten Feldern. Hier wird das
+ * Aussehen der Textfelder uebernommen.
+ * ------------------------------------------------------------------------ */
+input[type="number"],
+input[type="date"],
+input[type="datetime-local"] {
+	background: #ffffff;
+	border: solid 1px rgba(210, 215, 217, 0.75);
+	border-radius: 0.375em;
+	color: inherit;
+	display: block;
+	height: 2.75em;
+	outline: 0;
+	padding: 0 1em;
+	text-decoration: none;
+	width: 100%;
+}
+
+input[type="number"]:focus,
+input[type="date"]:focus {
+	border-color: #38761d;
+	box-shadow: 0 0 0 1px #38761d;
+}
+
+/* In Tabellen (Striche/Einzahlungen erfassen) bleiben die Zahlenfelder
+   kompakt, sonst sprengen sie die Spaltenbreite. */
+td input[type="number"] {
+	width: 100%;
+	min-width: 5em;
+}
+
+input[type="file"] {
+	display: block;
+	width: 100%;
+}
+
+/* ---------------------------------------------------------------------------
+ * Checkbox-Zeilen
+ *
+ * Checkbox und zugehoeriges Label stehen nebeneinander; ohne Ausgleich sitzt
+ * die Beschriftung nicht auf einer Linie mit den Feldern der Nachbarspalte.
+ * ------------------------------------------------------------------------ */
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+	margin-bottom: 1.5em;
+}
+
+/* ---------------------------------------------------------------------------
+ * Hinweisboxen
+ *
+ * main.css definiert den Grundstil und die Varianten .info/.warning/.success,
+ * aber keine .error-Variante - obwohl sie in der App am haeufigsten verwendet
+ * wird. Ohne sie erscheinen Fehlermeldungen ungefaerbt wie neutrale Hinweise.
+ * Farbgebung analog zu den vorhandenen Varianten.
+ * ------------------------------------------------------------------------ */
+.hint-box.error {
+	background: #fdecea;
+	border-left: 5px solid #d32f2f;
+	color: #7f1d1d;
+}
+
+/* Der Grundstil ist ein Flex-Container; Absaetze darin sollen unten keinen
+   zusaetzlichen Abstand erzeugen. */
+.hint-box > :last-child {
+	margin-bottom: 0;
+}
+
+/* Mehrere Absaetze/Listen in einer Box sollen untereinander stehen statt
+   nebeneinander (Flex-Grundstil). */
+.hint-box {
+	flex-direction: column;
+}