Fuyuzakura/Helfer/helfer.html

<div id="sny-volunteer-frontend">
    <div class="sny-form-card">
        <div class="form-header">
            <h2>Volunteer Anmeldung</h2>
            <p>Fülle deine Daten aus – wir bereiten dein Dokument zur digitalen Unterschrift vor.</p>
        </div>
        
 
        <form id="volunteer-prefill-form" action="/process_form.php" method="POST">
 
            <input type="hidden" name="template_id" value="4">

            <div class="hp-field-wrap" style="display:none !important;" aria-hidden="true">
                <input type="text" name="website_hp" autocomplete="off" tabindex="-1">
            </div>

            <h3 class="section-title"><span>1.</span> Persönliche Daten</h3>
            <div class="form-grid">
                
                <div class="field-wrap full-width">
                    <label>Anrede <span class="required-asterisk">*</span></label>
                    <div style="display: flex; gap: 20px; margin-top: 5px;">
                        <label class="custom-check"><input type="radio" name="anrede" value="Herr" required=""> <span>Herr</span></label>
                        <label class="custom-check"><input type="radio" name="anrede" value="Frau" required=""> <span>Frau</span></label>
                        <label class="custom-check"><input type="radio" name="anrede" value="Divers" required=""> <span>Divers</span></label>
                    </div>
                </div>

                <div class="field-wrap"><label>Vorname <span class="required-asterisk">*</span></label><input type="text" name="vorname" required=""></div>
                <div class="field-wrap"><label>Nachname <span class="required-asterisk">*</span></label><input type="text" name="nachname" required=""></div>
                <div class="field-wrap"><label>Geburtsdatum <span class="required-asterisk">*</span></label><input type="text" name="geburtstag" placeholder="TT.MM.JJJJ" required=""></div>
                <div class="field-wrap"><label>T-Shirt Größe</label><input type="text" name="tshirt" placeholder="z.B. M"></div>
                
                <div class="field-wrap full-width"><label>Straße &amp; Hausnummer <span class="required-asterisk">*</span></label><input type="text" name="strasse" required=""></div>
                <div class="field-wrap full-width"><label>PLZ &amp; Ort <span class="required-asterisk">*</span></label><input type="text" name="plz_ort" required=""></div>
                
                <div class="field-wrap"><label>E-Mail Adresse <span class="required-asterisk">*</span></label><input type="email" name="email" required=""></div>
                <div class="field-wrap"><label>Handy (WhatsApp) <span class="required-asterisk">*</span></label><input type="text" name="handy" placeholder="+49 ..." required=""></div>

                <div class="field-wrap full-width feature-box discord-box">
                    <label>Discord Nutzername <span class="required-asterisk">*</span></label>
                    <input type="text" name="discord_name" id="discord_name" placeholder="z.B. username oder user#1234" required="">
                </div>

                <div class="field-wrap full-width feature-box emergency-box">
                    <label>Notfallkontakt <span class="required-asterisk">*</span></label>
                    <input type="text" name="notfall" placeholder="Name &amp; Telefonnummer" required="">
                </div>
            </div>

            <h3 class="section-title"><span>2.</span> Verfügbarkeit &amp; Bereiche</h3>
            
            <div class="selection-container">
                <p class="selection-title">Wann kannst du?</p>
                <div class="badge-notice">💡 Du musst nicht die volle Zeit helfen!</div>
                <div class="checkbox-group">
                    <label class="custom-check"><input type="checkbox" name="tage[]" value="Fr"> <span>Freitag (09:00 - 17:00 Uhr)</span></label>
                    <label class="custom-check"><input type="checkbox" name="tage[]" value="Sa"> <span>Samstag (08:00 - 23:00 Uhr)</span></label>
                </div>
            </div>

            <div class="selection-container">
                <p class="selection-title">Wo möchtest du helfen?</p>
                <div class="areas-grid-web">
                    <label class="custom-check"><input type="checkbox" name="bereiche[]" value="Kasse"> <span>Einlass / Kasse</span></label>
                    <label class="custom-check"><input type="checkbox" name="bereiche[]" value="Security"> <span>Security / Ordner</span></label>
                    <label class="custom-check"><input type="checkbox" name="bereiche[]" value="Info"> <span>Info-Point</span></label>
                    <label class="custom-check"><input type="checkbox" name="bereiche[]" value="Catering"> <span>Catering</span></label>
                    <label class="custom-check"><input type="checkbox" name="bereiche[]" value="Technik"> <span>Bühnentechnik</span></label>
                    <label class="custom-check"><input type="checkbox" name="bereiche[]" value="Springer"> <span>Springer / Allrounder</span></label>
                </div>
            </div>

            <h3 class="section-title"><span>3.</span> Fähigkeiten &amp; Verpflegung</h3>
            <div class="form-grid">
                <div class="field-wrap full-width">
                    <label>Fähigkeiten / Ersthelfer / Führerschein</label>
                    <input type="text" name="skills" placeholder="z.B. Erste-Hilfe-Schein, handwerklich begabt...">
                </div>
                <div class="field-wrap"><label>Essen (Veggie/Vegan?)</label><input type="text" name="essen" placeholder="Deine Präferenz"></div>
                <div class="field-wrap"><label>Allergien / Unverträglichkeiten</label><input type="text" name="allergien" placeholder="Falls ja, welche?"></div>
            </div>
            
            <h3 class="section-title"><span>4.</span> Rechtliches &amp; Kontakt</h3>
            <div class="legal-container">
                <label class="custom-check legal-check">
                    <input type="checkbox" name="einwilligung" value="1" required=""> 
                    <span>Ich stimme der Datenspeicherung und den Weisungen zu. <span class="required-asterisk">*</span></span>
                </label>
                
                <div class="divider"></div>
                
                <label class="custom-check">
                    <input type="checkbox" name="discord_role" id="discord_role" value="1"> 
                    <span>
                        <strong>Ich bin bereits auf dem Discord-Server.</strong><br>
                        <span class="sub-text">Bitte weist mir automatisch die Helfer-Rolle zu.</span>
                    </span>
                </label>
                
                <label class="custom-check mt-2">
                    <input type="checkbox" name="whatsapp" value="1"> 
                    <span>Ich möchte in die Helfer-WhatsApp-Gruppe aufgenommen werden.</span>
                </label>
            </div>

            <button type="submit" class="btn-submit" id="submit-btn">
                <span>Daten prüfen &amp; Signatur starten</span>
                <span class="arrow">➔</span>
            </button>
        </form>
    </div>
</div>

<style>
    #sny-volunteer-frontend { font-family: 'Inter', 'Segoe UI', sans-serif; max-width: 800px; margin: 40px auto; color: #2d3748; line-height: 1.6; }
    #sny-volunteer-frontend * { box-sizing: border-box; }
    .sny-form-card { background: #ffffff; padding: 40px 50px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.06); border: 1px solid #edf2f7; }
    .form-header { text-align: center; margin-bottom: 35px; }
    .form-header h2 { color: #e94598; font-size: 2.2em; margin: 0 0 10px 0; font-weight: 800; letter-spacing: -0.5px; }
    .form-header p { color: #718096; font-size: 1.05em; margin: 0; }
    .section-title { color: #3250a0; font-size: 1.25em; font-weight: 700; margin: 35px 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #edf2f7; display: flex; align-items: center; gap: 10px; }
    .section-title span { background: #e2e8f0; color: #4a5568; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8em; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .full-width { grid-column: span 2; }
    .field-wrap label { display: block; font-size: 0.9em; font-weight: 600; margin-bottom: 8px; color: #4a5568; }
    .field-wrap input[type="text"], .field-wrap input[type="email"] { width: 100%; padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 10px; background: #f8fafc; font-size: 1em; transition: all 0.25s ease; color: #2d3748; }
    .field-wrap input:focus { outline: none; border-color: #e94598; background: #fff; box-shadow: 0 0 0 4px rgba(233, 69, 152, 0.1); }
    .required-asterisk { color: #e53e3e; }
    .feature-box { padding: 18px 20px; border-radius: 12px; }
    .discord-box { background: #f0f4ff; border: 1px solid #c3d4ff; }
    .emergency-box { background: #fff5f7; border: 1px solid #fed7e2; }
    .selection-container { background: #f8fafc; padding: 22px; border-radius: 14px; margin-bottom: 20px; border: 1px solid #edf2f7; }
    .selection-title { font-weight: 700; margin: 0 0 12px 0; color: #2d3748; }
    .badge-notice { display: inline-block; background: #eebfdd; color: #701a4e; font-size: 0.85em; font-weight: 600; padding: 4px 10px; border-radius: 6px; margin-bottom: 15px; }
    .checkbox-group { display: flex; flex-direction: column; gap: 12px; }
    .areas-grid-web { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .custom-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; }
    
    /* HIER ANGEPASST: CSS für Checkboxen UND Radio-Buttons */
    .custom-check input[type="checkbox"], .custom-check input[type="radio"] { width: 18px; height: 18px; margin-top: 3px; accent-color: #e94598; cursor: pointer; }
    
    .custom-check span { font-size: 0.95em; font-weight: 500; color: #4a5568; }
    .legal-container { background: #fff; border: 2px solid #edf2f7; padding: 25px; border-radius: 14px; }
    .divider { height: 1px; background: #edf2f7; margin: 15px 0; }
    .mt-2 { margin-top: 12px; }
    .btn-submit { width: 100%; margin-top: 35px; padding: 18px; background: linear-gradient(135deg, #e94598 0%, #ba2b8c 100%); color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 1.15em; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(233, 69, 152, 0.3); }
    .btn-submit:disabled { background: #cbd5e0; cursor: not-allowed; }
    .hp-field-wrap { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }
    @media (max-width: 600px) {
        .sny-form-card { padding: 25px 20px; }
        .form-grid, .areas-grid-web { grid-template-columns: 1fr; }
        .full-width { grid-column: span 1; }
    }
</style>

<script>
    document.getElementById('volunteer-prefill-form').addEventListener('submit', function() {
        const btn = document.getElementById('submit-btn');
        btn.disabled = true;
        btn.innerHTML = "<span>Wird vorbereitet... ⌛</span>";
    });
</script>