/* Grundlayout */
body {
    margin:0;
    padding:20px;
    background:#121212;
    color:#fff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Formulare & Container */
form, .dashboard, .wunschbox-closed {
    background:#1e1e1e;
    padding:20px;
    border-radius:10px;
    max-width:400px;
    margin:20px auto;
    box-shadow:0 4px 20px rgba(0,0,0,0.5);
    animation: fadeIn 0.8s ease-in-out;
}

/* Inputs & Textareas */
input, textarea, select, button {
    width:100%;
    padding:10px;
    margin:5px 0;
    border-radius:5px;
    border:none;
    font-size:1rem;
}

/* Textarea größer */
textarea { resize:vertical; min-height:80px; }

/* Buttons */
button {
    background:#6200ee;
    color:#fff;
    cursor:pointer;
    transition:0.3s;
}
button:hover { background:#3700b3; transform:scale(1.03); }

/* Links */
a { color:#bb86fc; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Überschriften */
h2 { margin-top:0; text-align:center; }

/* Wunschbox geschlossen */
.wunschbox-closed img {
    max-width:300px;
    width:100%;
    margin-bottom:20px;
    animation: pulse 2s infinite;
}
.wunschbox-closed h2, .wunschbox-closed p {
    text-align:center;
    opacity:0;
    animation: fadeText 1s forwards;
}
.wunschbox-closed h2 { animation-delay:0.5s; font-size:1.8rem; }
.wunschbox-closed p { animation-delay:1s; color:#bbb; font-size:1.2rem; }

/* Fade-In Animation */
@keyframes fadeIn {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}

/* Fade Text */
@keyframes fadeText {
    from { opacity:0; transform:translateY(10px);}
    to { opacity:1; transform:translateY(0);}
}

/* Puls Animation für Bilder */
@keyframes pulse {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.05); }
}

/* Responsive */
@media(max-width:480px){
    form, .dashboard, .wunschbox-closed { width:90%; padding:15px; }
}