{{ block title }}Willkommen{{ endblock }}

{{ block content }}
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
.info-card {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.92em;
    line-height: 1.5;
    margin-bottom: 8px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}
.info-card .card-title {
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}
.info-card .card-body { color: #444; }
</style>

<div style="max-width: 620px; margin: 0 auto; font-size: 0.95em; line-height: 1.6; color: #222;">

    <!-- Kopfzeile -->
    <p style="font-size: 0.82em; color: #888; margin: 0 0 12px 0;">
        Bachelorarbeit · Jonas Lütke Wissing · Institut für Angewandte Betriebswirtschaftslehre und Unternehmensführung (IBU), Karlsruhe Institute of Technology · 2026
    </p>

    <!-- Header -->
    <div style="background: #1a1a2e; color: white; border-radius: 12px; padding: 22px 22px 18px 22px; margin-bottom: 16px;">
        <h2 style="margin: 0 0 8px 0; font-size: 1.4em; line-height: 1.3; text-align: center;">Experiment zu Verhandlungsverhalten und -ergebnissen</h2>
        <p style="margin: 0; opacity: 0.75; font-size: 0.88em; text-align: center;">
            Dauer ca. 20–30 Min.
        </p>
    </div>

    <!-- Info-Karten -->
    <div style="margin-bottom: 16px;">
        <div class="info-card" style="border-color: #ffc107; background: #fffbf0;">
            <span class="card-title">🎁 Verlosung</span>
            <span class="card-body"><strong>3 × 15 € Wunschgutschein</strong> – alle Teilnehmenden, die die Studie abschließen, nehmen an der Verlosung teil. Ihre Gewinnwahrscheinlichkeit hängt von Ihrem Verhandlungsergebnis ab.</span>
        </div>
        <details id="privacy-details" style="border: 1px solid #dee2e6; border-radius: 8px; background: #f8f9fa; margin-bottom: 8px;">
            <summary style="padding: 10px 14px; cursor: pointer; font-size: 0.92em; font-weight: bold; list-style: none; display: block;">
                <span style="display: flex; justify-content: space-between; align-items: center; gap: 8px;">
                    <span>🔒 Datenschutzinformation (Art. 13 DSGVO)</span>
                    <span id="privacy-toggle" style="font-weight: normal; color: #888; font-size: 0.85em; white-space: nowrap; flex-shrink: 0;">einblenden ▾</span>
                </span>
            </summary>
            <div style="padding: 0 14px 12px 14px; font-size: 0.9em; line-height: 1.6; color: #444; border-top: 1px solid #dee2e6; margin-top: 0; overflow-wrap: break-word; word-break: break-word;">

                <p style="margin: 10px 0 6px 0;"><strong>Verantwortliche Stelle</strong><br>
                Jonas Lütke Wissing, IBU, Karlsruhe Institute of Technology (KIT) · <a href="mailto:ubkih@student.kit.edu" style="color:#0056b3;">ubkih@student.kit.edu</a></p>

                <p style="margin: 10px 0 6px 0;"><strong>Zweck &amp; Rechtsgrundlage</strong><br>
                Wissenschaftliche Auswertung im Rahmen einer Bachelorarbeit; Rechtsgrundlage: Art. 6 Abs. 1 lit. a DSGVO (Einwilligung).</p>

                <p style="margin: 10px 0 6px 0;"><strong>Erhobene Daten &amp; Anonymität</strong><br>
                Fragebogenantworten sowie Verhaltens- und Ergebnisdaten aus der Simulation. Es werden keine Namen oder direkt identifizierenden Angaben erhoben. Die Teilnahme erfolgt unter einem zufälligen Pseudonym – eine Zuordnung zu Ihrer Person ist nicht möglich. Die Ergebnisse werden ausschließlich in anonymisierter und aggregierter Form veröffentlicht. IP-Adressen werden durch den Hosting-Anbieter (Heroku) technisch protokolliert, jedoch nicht mit Studiendaten verknüpft. Eine freiwillig angegebene E-Mail-Adresse wird getrennt von den Studiendaten gespeichert, ausschließlich zur Verlosungsabwicklung genutzt und vor Beginn der Auswertung unwiderruflich gelöscht.</p>

                <p style="margin: 10px 0 6px 0;"><strong>Speicherdauer</strong><br>
                Bis zum Abschluss der Bachelorarbeit (voraussichtlich Sommer 2026), danach Löschung oder vollständige Anonymisierung.</p>

                <p style="margin: 10px 0 6px 0;"><strong>Ihre Rechte (Art. 15–21 DSGVO)</strong><br>
                Sie haben das Recht auf Auskunft (Art. 15), Berichtigung (Art. 16), Löschung (Art. 17), Einschränkung der Verarbeitung (Art. 18) sowie Datenübertragbarkeit (Art. 20). Da die Erhebung ausschließlich unter einem zufälligen Pseudonym erfolgt und keine Zuordnung zu Ihrer Person möglich ist, können diese Rechte sowie ein Widerruf der Einwilligung (Art. 7 Abs. 3 DSGVO) nach Abschluss der Teilnahme technisch nicht mehr geltend gemacht werden.</p>

                <p style="margin: 10px 0 6px 0;"><strong>Drittlandtransfer</strong><br>
                Zur Gesprächssimulation werden Chat-Nachrichten an ein KI-Sprachmodell der Anthropic PBC (USA) übermittelt (Standardvertragsklauseln gem. Art. 46 Abs. 2 lit. c DSGVO). Hosting: Heroku/Salesforce (USA), ebenfalls auf Basis von Standardvertragsklauseln.</p>

                <p style="margin: 10px 0 0 0;"><strong>Beschwerderecht</strong><br>
                Landesbeauftragter für den Datenschutz und die Informationsfreiheit Baden-Württemberg · <a href="https://www.baden-wuerttemberg.datenschutz.de" style="color:#0056b3;">www.baden-wuerttemberg.datenschutz.de</a></p>

            </div>
        </details>
    </div>


    <!-- Einwilligung -->
    <div style="border: 2px solid #007bff; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; background: #fff;">
        <label style="display: flex; align-items: flex-start; gap: 12px; cursor: pointer;">
            <input type="checkbox" name="consent_given" value="True"
                style="width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: #007bff; cursor: pointer;">
            <span>Ich habe die Datenschutzinformation gelesen und willige in die pseudonyme Erhebung meiner Studiendaten zu wissenschaftlichen Zwecken ein. Eine freiwillig angegebene E-Mail-Adresse wird getrennt gespeichert, ausschließlich für die Verlosung genutzt und danach gelöscht. Ich bestätige, mindestens 18 Jahre alt zu sein und nur einmal teilzunehmen.</span>
        </label>
    </div>

    <div id="error-msg" style="display:none; background:#f8d7da; color:#842029; padding:10px 14px; border-radius:6px; margin-bottom:10px; border:1px solid #f5c2c7; font-size:0.9em;">
        ⚠️ Bitte bestätigen Sie Ihre Einwilligung, um fortzufahren.
    </div>

    <button type="submit" class="btn btn-primary otree-btn-next" style="width: 100%; padding: 13px; font-size: 1.05em; border-radius: 8px;">
        Jetzt teilnehmen →
    </button>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const details = document.getElementById('privacy-details');
    const toggle = document.getElementById('privacy-toggle');
    if (details && toggle) {
        details.addEventListener('toggle', function() {
            toggle.textContent = details.open ? 'ausblenden ▴' : 'einblenden ▾';
        });
    }

    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            if (!document.querySelector('input[name="consent_given"]:checked')) {
                e.preventDefault();
                e.stopImmediatePropagation();
                document.getElementById('error-msg').style.display = 'block';
                document.getElementById('error-msg').scrollIntoView({behavior: 'smooth'});
                return false;
            }
        });
    }
});
</script>

{{ endblock }}