<script setup>
import AppLayout from '@/layouts/AppLayout.vue'
</script>

<template>
    <AppLayout title="Spendenquittung erstellen">
        <div class="placeholder">
            <div class="placeholder-icon-wrap" style="background: #c0397e;">
                <font-awesome-icon icon="heart" class="placeholder-icon" />
            </div>
            <h1 class="placeholder-title">Spendenquittung erstellen</h1>
            <p class="placeholder-text">Dieses Modul wird in Kürze verfügbar sein.</p>
        </div>
    </AppLayout>
</template>

<style scoped>
.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    text-align: center;
}

.placeholder-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-icon {
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.9);
}

.placeholder-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}

.placeholder-text {
    margin: 0;
    color: #6b7280;
    font-size: 0.95rem;
}
</style>
