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

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

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

<main class="flex-1 max-w-3xl mx-auto px-6 py-12 md:py-16 w-full pb-32">
    <section class="mb-12">
        <h1 class="font-headline text-4xl sm:text-6xl font-extrabold tracking-tighter mb-6 leading-[1.1]">
            Rechtliches <span class="text-primary italic">Rahmenwerk.</span>
        </h1>
        <p class="font-body text-on-surface-variant text-lg leading-relaxed max-w-xl">
            Stand: {{ 'now'|date('d.m.Y') }}. Diese Allgemeinen Nutzungsbedingungen (AGB) regeln die Nutzung der Plattform JI:O / Wanted als Website und Anwendung. Mit Registrierung oder Nutzung erkennen Sie sie an, soweit gesetzlich zulaessig.
        </p>
    </section>

    <div class="grid grid-cols-1 gap-8">
        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">01</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Geltungsbereich und Vertragspartner</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Anbieter und Vertragspartner ist der Betreiber der Plattform (nachfolgend „wir“ / „Betreiber“). Die Plattform vermittelt und praesentiert Informationen, Profile und Medieninhalte von Dritten (Anbieterinnen und Anbietern, Nutzerinnen und Nutzern). Zwischen Endnutzerinnen und Dienstleistenden kommen Leistungsvertraege — sofern vorhanden — im Zweifel direkt zustande; wir sind nicht automatisch Partei solcher Vertraege, es sei denn, dies ist ausdruecklich anders gekennzeichnet.</p>
                        <p>Abweichende Bedingungen von Nutzerinnen werden nicht anerkannt, es sei denn, wir stimmen ihrer Geltung schriftlich zu.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">02</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Leistungsgegenstand</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Wir stellen eine technische Plattform zur Verfuegung, auf der Inhalte (insbesondere Videos) eingestellt, entdeckt und mit Profilen verknuepft werden koennen. Umfang und Verfuegbarkeit koennen je nach Produktphase variieren. Ein Anspruch auf ununterbrochene Verfuegbarkeit oder bestimmte Funktionen besteht nicht, soweit nicht ausdruecklich zugesagt.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">03</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Registrierung und Konto</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed text-sm">
                        <ul class="space-y-3">
                            <li class="flex gap-3"><span class="material-symbols-outlined text-primary-dim text-sm mt-0.5 shrink-0">check_circle</span><span>Die Nutzung bestimmter Funktionen setzt eine Registrierung voraus. Angaben muessen wahrheitsgemaess sein und bei Aenderungen aktualisiert werden.</span></li>
                            <li class="flex gap-3"><span class="material-symbols-outlined text-primary-dim text-sm mt-0.5 shrink-0">check_circle</span><span>Zugangsdaten sind vertraulich zu behandeln; fuer Missbrauch nach Anzeichen grober Fahrlaessigkeit koennen Sie haften.</span></li>
                            <li class="flex gap-3"><span class="material-symbols-outlined text-primary-dim text-sm mt-0.5 shrink-0">check_circle</span><span>Ein Anspruch auf Freischaltung oder Verifizierung besteht nicht, soweit nicht gesondert vereinbart.</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">04</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Pflichten der Nutzerinnen und Nutzer</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Es ist untersagt, rechtswidrige, beleidigende, diskriminierende, jugendgefaehrdende oder urheberrechtsverletzende Inhalte einzustellen, die Plattform zu ueberlasten, Sicherheitsmechanismen zu umgehen oder fremde Kennungen zu missbrauchen. Es gilt das geltende Recht der Bundesrepublik Deutschland und — bei Nutzung aus dem Ausland — zusaetzlich das jeweils anwendbare oertliche Recht, soweit zwingend.</p>
                        <p>Die Volljaehrigkeit (18 Jahre) ist fuer die volle geschaeftsfaehige Nutzung als Vertragspartnerin vorausgesetzt, soweit nicht gesondert geregelt.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container-high rounded-xl p-8 transition-all relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mt-16 blur-3xl" aria-hidden="true"></div>
            <div class="flex items-start gap-6 relative z-10">
                <span class="font-headline text-primary font-bold text-xl opacity-50 shrink-0">05</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Inhalte, Urheberrecht und Nutzungslizenz</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Sie bleiben Inhaber:in der von Ihnen eingestellten Inhalte. Mit dem Hochladen raeumen Sie dem Betreiber ein zeitlich und oertlich unbeschraenktes, unwiderrufliches, unterlizenzierbares, nicht-exklusives Recht ein, diese Inhalte zum Betrieb, zur Veroeffentlichung, technischen Bereitstellung (Hosting, Streaming), Werbung fuer die Plattform und zur Durchsetzung von Rechten zu nutzen, soweit dies fuer die Plattformfunktion erforderlich ist.</p>
                        <p>Sie versichern, ueber die erforderlichen Rechte an den eingestellten Inhalten zu verfuegen und keine Rechte Dritter zu verletzen. Profilvideos und andere Inhalte koennen einer redaktionellen oder automatisierten Pruefung unterliegen; eine Veroeffentlichungspflicht besteht nicht.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">06</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Moderation, Sperrung und Loeschung</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Wir sind berechtigt, Inhalte zu sperren, zu kuerzen oder zu loeschen und Konten zeitlich oder dauerhaft zu sperren, wenn ein wichtiger Grund vorliegt — insbesondere bei Verstoessen gegen diese AGB, gegen geltendes Recht oder bei Missbrauch. Eine vorherige Anhoerung erfolgt nach billigem Ermessen, soweit moeglich.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">07</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Haftung</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Wir haften unbeschraenkt bei Vorsatz und grober Fahrlaessigkeit sowie bei Verletzung von Leben, Koerper oder Gesundheit. Bei leichter Fahrlaessigkeit haften wir nur bei Verletzung wesentlicher Vertragspflichten (Kardinalpflichten); in diesem Fall ist die Haftung auf den typischerweise vorhersehbaren Schaden begrenzt. Die Haftung fuer leichte Fahrlaessigkeit bei sonstigen Pflichtverletzungen ist ausgeschlossen.</p>
                        <p>Fuer Inhalte und Handlungen Dritter (Nutzerinnen, Anbieter) uebernehmen wir keine Gewaehr; dies gilt auch fuer Links externer Seiten. Gesetzliche Haftung fuer digitale Dienste (z. B. nach DDG/DSA) bleibt unberuehrt, soweit anwendbar.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">08</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Laufzeit und Kuendigung</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Der Nutzungsvertrag laeuft auf unbestimmte Zeit. Sie koennen die Nutzung jederzeit einstellen und die Loeschung Ihres Kontos verlangen, vorbehaltlich gesetzlicher Aufbewahrungspflichten auf unserer Seite. Wir koennen den Vertrag mit angemessener Frist kuendigen oder aus wichtigem Grund ausserordentlich kuendigen.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">09</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Aenderungen der AGB</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Wir behalten uns vor, diese AGB zu aendern. Ueber wesentliche Aenderungen informieren wir Sie in geeigneter Form (z. B. per E-Mail oder Hinweis in der App). Widersprechen Sie nicht innerhalb einer mitgeteilten Frist, gelten die Aenderungen als angenommen; wir weisen Sie auf diese Rechtsfolge hin. Widersprechen Sie, endet das Nutzungsverhaeltnis zum Zeitpunkt des Inkrafttretens der Aenderung.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container rounded-xl p-8 transition-all hover:bg-surface-container-high group">
            <div class="flex items-start gap-6">
                <span class="font-headline text-primary font-bold text-xl opacity-50 group-hover:opacity-100 transition-opacity shrink-0">10</span>
                <div>
                    <h2 class="font-headline text-2xl font-bold mb-4 text-primary tracking-tight">Anwendbares Recht, Verbraucherstreitbeilegung</h2>
                    <div class="font-body text-on-surface-variant leading-relaxed space-y-4 text-sm">
                        <p>Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des Kollisionsrechts. Zwingende Verbraucherschutzvorschriften des Staates, in dem Sie Ihren gewoehnlichen Aufenthalt haben, bleiben unberuehrt, sofern Sie Verbraucherin sind.</p>
                        <p>Wir sind nicht verpflichtet und nicht bereit, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen, es sei denn, wir sind hierzu gesetzlich verpflichtet. Die Europaeische Plattform zur Online-Streitbeilegung: <a href="https://ec.europa.eu/consumers/odr" class="text-primary underline" rel="noopener noreferrer" target="_blank">ec.europa.eu/consumers/odr</a>.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="bg-surface-container-low rounded-xl p-8 space-y-4 border border-outline-variant/20">
            <h2 class="font-headline text-xl font-bold text-primary">Datenschutz</h2>
            <p class="font-body text-on-surface-variant text-sm leading-relaxed">
                Informationen zur Verarbeitung personenbezogener Daten finden Sie in unserer <a href="{{ path('app_privacy') }}" class="text-primary underline font-semibold">Datenschutzerklaerung</a> gemaess DSGVO.
            </p>
        </section>
    </div>

    <section class="mt-16 mb-16 text-center">
        <div class="inline-block p-1 rounded-full bg-surface-container-high mb-8">
            <div class="flex items-center px-6 py-2 gap-2">
                <span class="material-symbols-outlined text-primary text-sm">verified_user</span>
                <span class="text-xs font-label uppercase tracking-widest text-on-surface-variant">Rechtliche Transparenz</span>
            </div>
        </div>
        <p class="font-body text-on-surface-variant mb-8 max-w-md mx-auto text-sm">
            Mit Nutzung der Plattform nach Registrierung bestaetigen Sie, diese Nutzungsbedingungen zur Kenntnis genommen zu haben. Eine gesonderte Klick-Zustimmung kann bei der Registrierung erfolgen.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="{{ path('app_feed') }}" class="bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-headline font-extrabold px-10 py-4 rounded-full text-base shadow-[0_20px_40px_rgba(255,144,100,0.2)] hover:shadow-[0_25px_50px_rgba(255,144,100,0.3)] transition-all active:scale-95 inline-flex items-center gap-3 no-underline">
                Zur App (Feed)
                <span class="material-symbols-outlined">arrow_forward</span>
            </a>
            <a href="{{ path('app_register') }}" class="text-on-surface-variant font-label font-bold text-sm underline hover:text-primary">Zur Registrierung</a>
        </div>
    </section>

    <p class="text-center text-stone-600 text-[10px] font-bold uppercase tracking-[0.2em] font-label">
        Muster-AGB — vor Produktivstart juristisch pruefen und an Idashr Geschaeftsmodell anpassen.
    </p>
</main>
{% endblock %}