{% extends 'legal/base_legal.html.twig' %}

{% block title %}Datenschutzerklaerung | JI:O{% endblock %}

{% block legal_extra_styles %}
    <style>
        .legal-editorial h1, .legal-editorial h2 { font-family: 'Plus Jakarta Sans', sans-serif; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0e0e0e; }
        ::-webkit-scrollbar-thumb { background: #262626; border-radius: 4px; }
    </style>
{% endblock %}

{% block legal_body %}
<header class="bg-[#262626]/60 backdrop-blur-xl top-0 sticky z-50 shadow-2xl shadow-black/20 flex items-center justify-between px-6 py-4 w-full min-h-16">
    <div class="flex items-center gap-4">
        <a href="{{ path('app_landing') }}" class="text-stone-400 hover:opacity-80 transition-opacity active:scale-95" aria-label="Zurueck">
            <span class="material-symbols-outlined">arrow_back</span>
        </a>
        <div class="flex items-center gap-3">
            <img alt="JI:O" class="w-8 h-8 object-contain rounded-lg" src="{{ asset('assets/img/top_logo.png') }}" width="32" height="32">
            <span class="text-2xl font-black italic tracking-tighter text-orange-600 font-headline">JI:O</span>
        </div>
    </div>
    <div class="flex items-center gap-2 sm:gap-3">
        <a href="{{ path('app_imprint') }}" class="text-stone-400 hover:text-primary text-xs font-label uppercase tracking-wider no-underline hidden sm:inline">Impressum</a>
        <a href="{{ path('app_terms') }}" class="text-stone-400 hover:text-primary text-xs font-label uppercase tracking-wider no-underline hidden sm:inline">AGB</a>
        <a href="{{ path('app_faq') }}" class="text-stone-400 hover:text-primary text-sm font-label uppercase tracking-wider no-underline">FAQ</a>
    </div>
</header>

<main class="legal-editorial max-w-3xl mx-auto px-6 py-12 space-y-16 pb-32">
    <section class="space-y-4">
        <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white leading-[1.1]">
            Datenschutzerklaerung
        </h1>
        <p class="text-on-surface-variant text-lg max-w-xl font-medium">
            Stand: {{ 'now'|date('d.m.Y') }}. Diese Erklaerung informiert Sie gemaess Art. 13, 14 EU-Datenschutz-Grundverordnung (DSGVO) ueber die Verarbeitung personenbezogener Daten bei Nutzung der Plattform JI:O / Wanted (nachfolgend „Plattform“).
        </p>
    </section>

    <section class="p-8 rounded-xl bg-surface-container-low space-y-4">
        <div class="flex items-center gap-3">
            <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
            <h2 class="text-2xl font-bold text-primary">1. Verantwortliche Stelle</h2>
        </div>
        <div class="space-y-3 text-on-surface-variant leading-relaxed text-sm">
            <p>Verantwortlicher im Sinne der DSGVO ist der Betreiber der Plattform. Pflichtangaben finden Sie im <a href="{{ path('app_imprint') }}" class="text-primary underline font-semibold">Impressum</a>. Erreichen Sie uns zusaetzlich unter:</p>
            <p class="text-on-surface">
                <strong>E-Mail:</strong> <a href="mailto:hello@jio.app" class="text-primary underline">hello@jio.app</a><br>
                <span class="text-on-surface-variant text-xs mt-2 block">vollstaendiger Firmenname, eingetragener Sitz, Registergericht, USt-IdNr. und ggf. Datenschutzbeauftragte:r (Art. 37 DSGVO) — siehe Impressum.</span>
            </p>
        </div>
    </section>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <section class="p-8 rounded-xl bg-surface-container-low space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">2. Erhebung und Kategorien personenbezogener Daten</h2>
            </div>
            <div class="space-y-4 text-on-surface-variant leading-relaxed text-sm">
                <p>Je nach Nutzung verarbeiten wir insbesondere:</p>
                <ul class="grid grid-cols-1 md:grid-cols-2 gap-3 text-on-surface text-sm">
                    <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-sm shrink-0">check_circle</span><span>Stammdaten (z. B. Name, E-Mail-Adresse, Anzeigename)</span></li>
                    <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-sm shrink-0">check_circle</span><span>Profil- und Vertragsdaten (Unternehmensprofil, Kategorie, Adresse, Telefon)</span></li>
                    <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-sm shrink-0">check_circle</span><span>Inhaltsdaten (hochgeladene Videos, Bilder, Texte, Kommentare)</span></li>
                    <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-sm shrink-0">check_circle</span><span>Nutzungs- und Geraetedaten (Logfiles, IP-Adresse, Geraetetyp, Zeitstempel)</span></li>
                    <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-sm shrink-0">check_circle</span><span>Standortdaten, sofern Sie standortbasierte Funktionen aktivieren</span></li>
                    <li class="flex items-start gap-2"><span class="material-symbols-outlined text-primary text-sm shrink-0">check_circle</span><span>Zahlungsdaten, soweit Zahlungen ueber Dienstleister abgewickelt werden (dortige Verarbeitung)</span></li>
                </ul>
            </div>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary-container rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">3. Zwecke und Rechtsgrundlagen</h2>
            </div>
            <p class="text-on-surface-variant leading-relaxed text-sm">
                Die Verarbeitung erfolgt zur Bereitstellung und Sicherung der Plattform, zur Vertragsanbahnung und -durchfuehrung (Art. 6 Abs. 1 lit. b DSGVO), zur Erfuellung rechtlicher Verpflichtungen (Art. 6 Abs. 1 lit. c DSGVO), auf Grundlage Ihrer Einwilligung, soweit erforderlich (Art. 6 Abs. 1 lit. a DSGVO), sowie zur Wahrung berechtigter Interessen wie IT-Sicherheit, Missbrauchsabwehr und Produktverbesserung (Art. 6 Abs. 1 lit. f DSGVO). Bei rein informatorischer Nutzung der Website koennen Server-Logdaten aufgrund berechtigten Interesses an Stabilität und Sicherheit verarbeitet werden.
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4 border-l-2 border-primary/10">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary-container rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">4. Weitergabe und Auftragsverarbeitung</h2>
            </div>
            <p class="text-on-surface-variant leading-relaxed text-sm">
                Eine Weitergabe an Dritte erfolgt nur, wenn dies zur Vertragserfuellung erforderlich ist, Sie eingewilligt haben oder wir gesetzlich dazu verpflichtet sind. Wir setzen Hosting-, E-Mail- und ggf. Analyse- oder Zahlungsdienstleister als <strong>Auftragsverarbeiter</strong> gemaess Art. 28 DSGVO ein und stellen Vertraege zur Auftragsverarbeitung sicher. Ein Verkauf Ihrer Daten findet nicht statt.
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-high space-y-6 md:col-span-2 overflow-hidden relative">
            <div class="relative z-10 space-y-4">
                <div class="flex items-center gap-3">
                    <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                    <h2 class="text-2xl font-bold text-primary">5. Drittlandtransfer</h2>
                </div>
                <p class="text-on-surface-variant leading-relaxed text-sm">
                    Soweit Verarbeitungen in Laendern ausserhalb der EU/des EWR stattfinden, stellen wir — sofern erforderlich — ein angemessenes Datenschutzniveau durch Angemessenheitsbeschluesse, Standardvertragsklauseln der EU-Kommission oder andere geeignete Garantien gemaess Art. 44 ff. DSGVO sicher.
                </p>
            </div>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">6. Cookies und aehnliche Technologien</h2>
            </div>
            <p class="text-on-surface-variant leading-relaxed text-sm">
                Wir verwenden technisch notwendige Cookies bzw. Speicher, soweit fuer Login, Sitzung und Sicherheit erforderlich (Rechtsgrundlage: berechtigtes Interesse / Vertragserfuellung). Optionale Cookies oder Tracking setzen wir nur mit Ihrer Einwilligung ueber ein Consent-Tool ein, sofern vorgesehen. Details zu Anbietern und Laufzeiten koennen Sie in den Cookie-Einstellungen einsehen, sofern implementiert.
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-high space-y-6 md:col-span-2 overflow-hidden relative">
            <div class="relative z-10 space-y-4">
                <div class="flex items-center gap-3">
                    <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                    <h2 class="text-2xl font-bold text-primary">7. Speicherdauer</h2>
                </div>
                <div class="flex flex-col md:flex-row gap-8 items-start">
                    <div class="flex-1 space-y-4 text-on-surface-variant leading-relaxed text-sm">
                        <p>Wir speichern personenbezogene Daten nur so lange, wie dies fuer die genannten Zwecke erforderlich ist oder gesetzliche Aufbewahrungsfristen (z. B. handels- oder steuerrechtlich) bestehen. Danach loeschen oder anonymisieren wir die Daten.</p>
                    </div>
                    <div class="w-full md:w-48 aspect-square bg-surface-container-highest rounded-xl flex items-center justify-center shrink-0">
                        <span class="material-symbols-outlined text-6xl text-primary/20" style="font-variation-settings: 'FILL' 1;">shield_lock</span>
                    </div>
                </div>
            </div>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-low space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">8. Ihre Rechte (Art. 15–22 DSGVO)</h2>
            </div>
            <p class="text-on-surface-variant text-sm leading-relaxed mb-4">Sie haben — unter den gesetzlichen Voraussetzungen — folgende Rechte:</p>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="p-4 rounded-lg bg-surface-container-highest">
                    <span class="material-symbols-outlined text-primary mb-2 block">visibility</span>
                    <h3 class="font-bold text-sm mb-1 text-on-surface">Auskunft (Art. 15)</h3>
                    <p class="text-xs text-on-surface-variant">Ueber die von uns verarbeiteten Daten in Bezug auf Ihre Person.</p>
                </div>
                <div class="p-4 rounded-lg bg-surface-container-highest">
                    <span class="material-symbols-outlined text-primary mb-2 block">edit_note</span>
                    <h3 class="font-bold text-sm mb-1 text-on-surface">Berichtigung (Art. 16)</h3>
                    <p class="text-xs text-on-surface-variant">Unrichtige Daten korrigieren lassen.</p>
                </div>
                <div class="p-4 rounded-lg bg-surface-container-highest">
                    <span class="material-symbols-outlined text-primary mb-2 block">delete_forever</span>
                    <h3 class="font-bold text-sm mb-1 text-on-surface">Loeschung (Art. 17)</h3>
                    <p class="text-xs text-on-surface-variant">„Recht auf Vergessenwerden“, soweit keine Pflicht zur Aufbewahrung besteht.</p>
                </div>
                <div class="p-4 rounded-lg bg-surface-container-highest">
                    <span class="material-symbols-outlined text-primary mb-2 block">block</span>
                    <h3 class="font-bold text-sm mb-1 text-on-surface">Einschraenkung (Art. 18)</h3>
                    <p class="text-xs text-on-surface-variant">Verarbeitung einschraenken lassen.</p>
                </div>
                <div class="p-4 rounded-lg bg-surface-container-highest">
                    <span class="material-symbols-outlined text-primary mb-2 block">download</span>
                    <h3 class="font-bold text-sm mb-1 text-on-surface">Datenportabilitaet (Art. 20)</h3>
                    <p class="text-xs text-on-surface-variant">Strukturierte, maschinenlesbare Daten erhalten.</p>
                </div>
                <div class="p-4 rounded-lg bg-surface-container-highest">
                    <span class="material-symbols-outlined text-primary mb-2 block">gavel</span>
                    <h3 class="font-bold text-sm mb-1 text-on-surface">Widerspruch (Art. 21)</h3>
                    <p class="text-xs text-on-surface-variant">Gegen Verarbeitungen auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO.</p>
                </div>
            </div>
            <p class="text-on-surface-variant text-sm leading-relaxed mt-4">
                <strong>Widerruf der Einwilligung</strong> (Art. 7 Abs. 3 DSGVO): Erteilte Einwilligungen koennen Sie mit Wirkung fuer die Zukunft widerrufen, ohne dass die Rechtmaessigkeit der bis zum Widerruf erfolgten Verarbeitung beruehrt wird.
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">9. Beschwerderecht bei einer Aufsichtsbehoerde</h2>
            </div>
            <p class="text-on-surface-variant leading-relaxed text-sm">
                Sie haben das Recht, sich bei einer Datenschutzaufsichtsbehoerde zu beschweren, insbesondere in dem Mitgliedstaat Ihres gewoehnlichen Aufenthaltsorts, Ihres Arbeitsplatzes oder des Orts des mutmasslichen Verstoßes. Eine Liste der Behoerden finden Sie unter <a href="https://www.bfdi.bund.de" class="text-primary underline" rel="noopener noreferrer" target="_blank">bfdi.bund.de</a>.
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-low space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">10. Pflicht zur Bereitstellung von Daten</h2>
            </div>
            <p class="text-on-surface-variant leading-relaxed text-sm">
                Soweit die Plattform zur Vertragserfuellung bestimmte Angaben benoetigt, sind Sie ggf. verpflichtet, diese mitzuteilen; andernfalls kann die Nutzung eingeschraenkt sein. Pflichtfelder werden in Formularen gekennzeichnet.
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">11. Automatisierte Entscheidungen / Profiling</h2>
            </div>
            <p class="text-on-surface-variant leading-relaxed text-sm">
                Eine ausschliesslich auf automatisierter Verarbeitung beruhende Entscheidung mit Rechtswirkung oder erheblicher Beeintraechtigung (Art. 22 DSGVO) findet nicht statt, es sei denn, wir informieren Sie gesondert und haben eine gesetzliche Grundlage.
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-high space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">12. Aenderung dieser Datenschutzerklaerung</h2>
            </div>
            <p class="text-on-surface-variant leading-relaxed text-sm">
                Wir passen diese Erklaerung an, wenn sich Rechtslage oder unsere Verarbeitung aendern. Bitte pruefen Sie den Stand regelmaessig. Bei wesentlichen Aenderungen informieren wir Sie, soweit gesetzlich erforderlich, gesondert.
            </p>
        </section>
    </div>

    <section class="text-center py-12 space-y-6 border-t border-outline-variant/20">
        <p class="text-on-surface-variant text-sm">Fragen zum Datenschutz?</p>
        <a href="mailto:hello@jio.app?subject=Datenschutz%20JI:O" class="inline-flex bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed px-10 py-4 rounded-full font-bold text-lg shadow-xl shadow-primary/20 active:scale-95 transition-transform no-underline">
            Datenschutz kontaktieren
        </a>
    </section>

    <p class="text-center text-stone-600 text-[10px] font-bold uppercase tracking-[0.2em] font-label pb-8">
        Hinweis: Diese Musterklauseln ersetzen keine anwaltliche Pruefung.
    </p>
</main>
{% endblock %}