{% extends "base.html" %}

{% block title %}400 - Ungültige Anfrage{% endblock %}

{% block content %}
<div class="min-h-[75vh] flex flex-col items-center justify-center px-4 py-12 bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <div class="glass-effect max-w-2xl w-full p-6 md:p-10 rounded-xl border border-gray-300/20 dark:border-gray-700/30 shadow-xl transform transition-all duration-300 hover:shadow-2xl">
        <div class="text-center">
            <div class="flex justify-center mb-6">
                <div class="relative">
                    <h1 class="text-7xl md:text-8xl font-extrabold text-primary-600 dark:text-primary-400 opacity-90">400</h1>
                    <div class="absolute -top-4 -right-4 w-12 h-12 bg-red-500 rounded-full flex items-center justify-center animate-pulse">
                        <i class="fa-solid fa-exclamation text-white text-xl"></i>
                    </div>
                </div>
            </div>
            <h2 class="text-2xl md:text-3xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Ungültige Anfrage</h2>
            <p class="text-gray-600 dark:text-gray-300 mb-8 max-w-lg mx-auto text-base md:text-lg">Die Anfrage konnte nicht verarbeitet werden. Bitte überprüfen Sie Ihre Eingaben und versuchen Sie es erneut.</p>
            {% if error %}
            <div class="mb-6 p-4 bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 rounded-lg text-sm">
                {{ error }}
            </div>
            {% endif %}
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ url_for('index') }}" class="btn-primary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                    <i class="fa-solid fa-home mr-2"></i>Zur Startseite
                </a>
                <a href="javascript:history.back()" class="btn-secondary transform transition-transform duration-300 hover:scale-105 px-6 py-3 rounded-lg">
                    <i class="fa-solid fa-arrow-left mr-2"></i>Zurück
                </a>
            </div>
        </div>
    </div>
    <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
        <p>Benötigen Sie Hilfe? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Kontaktieren Sie uns</a></p>
    </div>
</div>
{% endblock %}