/* ---------------------------------------------------------------
 * formular.css
 *
 * Erzeugt von sgs FormBuilder am 2026-10-24 16:14:18
 * S.G.Schiffer - https://www.sgs-visual.de/
 *
 * Diese Datei wird bei jedem Aufbau neu geschrieben. Eigene
 * Aenderungen gehen dabei verloren - schreiben Sie sie besser in
 * das Stylesheet Ihrer Seite, das nach dieser Datei geladen wird.
 * --------------------------------------------------------------- */

.fb-form {
    box-sizing: border-box;
    background: transparent;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    line-height: 1.4;
    max-width: 100%;
}

.fb-form *,
.fb-form *::before,
.fb-form *::after { box-sizing: border-box; }

.fb-heading {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 20px 0 10px 0;
}

.fb-info { margin: 0 0 15px 0; }

/* Untereinander: eine Spalte, ein Feld je Zeile. */
.fb-row { display: block; }
.fb-field { display: block; }

.fb-field { margin-bottom: 12px; }

.fb-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.fb-required { color: #DC3623; margin-left: 3px; }

.fb-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.85;
}

.fb-form input[type="text"],
.fb-form input[type="email"],
.fb-form input[type="tel"],
.fb-form input[type="url"],
.fb-form input[type="number"],
.fb-form input[type="date"],
.fb-form input[type="time"],
.fb-form input[type="file"],
.fb-form select,
.fb-form textarea {
    width: 450px;
    max-width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: inherit;
    background: #FFF3DB;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 4px;
}

.fb-form textarea { resize: vertical; }

.fb-form input:focus,
.fb-form select:focus,
.fb-form textarea:focus {
    outline: 2px solid #0080C0;
    outline-offset: 1px;
}

.fb-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.fb-check input[type="checkbox"],
.fb-check input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #0080C0;
    background: #AFAFAF;
    border: 2px solid #000000;
    border-radius: 3px;
}

.fb-check label { margin: 0; font-weight: 400; cursor: pointer; }

/* Bewertungsskala: fuenf Stufen nebeneinander, solange der Platz
   reicht. Auf dem Telefon rutschen sie untereinander - erzwungen
   wird nichts, sonst waeren die Beschriftungen nicht mehr zu lesen. */
.fb-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.fb-scale .fb-check { flex: 1 1 120px; }

.fb-error {
    display: block;
    margin-top: 4px;
    color: #DC3623;
    font-weight: 600;
}
.fb-field-error input,
.fb-field-error select,
.fb-field-error textarea { border-color: #DC3623; }

.fb-message {
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
}
.fb-message-ok   { background: #E8F5E9; color: #1B5E20; border: 1px solid #1B5E20; }
.fb-message-bad  { background: #FDECEA; color: #B71C1C; border: 1px solid #B71C1C; }

.fb-button {
    width: auto;
    padding: 10px 25px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    background: #FF9800;
    color: #FFFFFF;
    border: 2px solid #000000;
    border-radius: 5px;
}
.fb-button:hover { filter: brightness(0.92); }
.fb-button:disabled { opacity: 0.6; cursor: default; }

.fb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* Seiten: Ohne JavaScript bleiben alle sichtbar - das Formular
   ist dann laenger, aber vollstaendig ausfuellbar. Erst
   formular.js blendet die hinteren Seiten aus. */
.fb-page { display: block; }
.fb-steps {
    margin-bottom: 15px;
    font-size: 12px;
    opacity: 0.85;
}

.fb-counter {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.75;
}

/* Der Honigtopf fuer Etappe 6. Nicht display:none - manche
   Spamprogramme pruefen genau darauf und lassen das Feld dann leer. */
.fb-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}