/*
 * Ergaenzungen zur unveraenderten Bestands-CSS. Jede Regel hier hat einen
 * Grund, der im Kommentar steht - ohne Grund gehoert nichts hierher.
 */

/*
 * Die rechte Spalte der zweispaltigen Seiten hiess im Bestand ebenfalls
 * id="content" - zwei gleiche IDs auf einer Seite. Sie traegt jetzt die
 * Klasse "spalte"; diese Regeln sind die #content-Regeln aus style.css
 * (Zeilen 155-176), wortgleich auf die Klasse uebertragen.
 */
.spalte h1 { margin-top: 0px; color: #821146; }
.spalte { margin: 0 0 20px 0; }
.spalte ul, .spalte ol { margin: 1em 0; padding: 0 0 0 0px; }
.spalte dd { margin: 0 0 0 40px; }

/*
 * Kontaktformular: Die Regeln fuer #formhandler_contact_form aus style.css
 * (Zeilen 185-219) auf das Formular von EXT:form uebertragen - gleiche
 * Masse, gleiche Rahmen. Der Knopf traegt im Bestand diese Werte als
 * style-Attribut. Neu: Ankreuzfeld fuer die Einwilligung, Fehlermeldungen.
 */
#spalte_rechts form .row { margin-bottom: 3px; }
#spalte_rechts form .row::after { content: ""; display: block; clear: both; }
#spalte_rechts form .row > label { width: 150px; display: block; float: left; }
#spalte_rechts form input[type=text],
#spalte_rechts form input[type=email],
#spalte_rechts form input[type=tel] { border: 1px solid #9c9c9c; padding: 5px; width: 95%; font-size: 12px; }
#spalte_rechts form .row-text > label { float: none; }
#spalte_rechts form textarea { width: 95%; height: 100px; border: 1px solid #9c9c9c; margin-bottom: 5px; margin-top: 4px; padding: 5px; font-size: 12px; }
#spalte_rechts form .row-einwilligung > div { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4em; }
#spalte_rechts form .row-einwilligung input { margin-top: 3px; flex: none; }
#spalte_rechts form .form-text { display: block; font-size: 12px; }
#spalte_rechts form .invalid-feedback { display: block; color: #ca005f; font-size: 12px; }
#spalte_rechts form .is-invalid { border-color: #ca005f; }
#spalte_rechts form [type=submit] { line-height: 20px; color: #1f1f1f; width: 200px; background-color: #f1f1f1; border: 1px solid #dedede; font-size: 12px; padding: 1px 6px; cursor: pointer; }
#spalte_rechts form .actions { margin: 15px 0; }
/*
 * normalize.css (h5bp) faerbt jedes :invalid-Feld rosa - auch leere
 * Pflichtfelder, bevor jemand etwas eingegeben hat. Im Bestand fiel das
 * nicht auf, weil formhandler kein required-Attribut setzte; EXT:form tut
 * es (gut fuer Vorlesesoftware). Rosa also erst nach einer Eingabe.
 */
#spalte_rechts form :invalid { background-color: transparent; }
#spalte_rechts form :user-invalid { background-color: #f0dddd; }
#spalte_rechts form .row-hinweis, #spalte_rechts form .row-hinweis p { font-size: 12px; }