body {
font-family: 'Raleway', sans-serif;
background-color: #f9f7f5;
color: #333;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
.form-container {
background-color: #fff;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
border-radius: 12px;
border: 1px solid #f0e9e9;
}
.progress-bar {
height: 6px;
transition: width 0.5s ease;
}
.step {
display: none;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.step.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.btn-primary {
background-color: #d4a977;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #c69c6d;
}
.btn-secondary {
background-color: #6c757d;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background-color: #5a6268;
}
.option-card {
border: 2px solid #e9ecef;
transition: all 0.2s ease;
cursor: pointer;
}
.option-card:hover {
border-color: #d4a977;
}
.option-card.selected {
border-color: #d4a977;
background-color: #faf6f0;
}
input[type="text"], input[type="date"], input[type="number"], input[type="email"], input[type="tel"], select {
border: 1px solid #ced4da;
border-radius: 6px;
padding: 10px 15px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus {
border-color: #d4a977;
outline: none;
box-shadow: 0 0 0 3px rgba(212, 169, 119, 0.25);
}
.summary-item {
border-bottom: 1px solid #f0e9e9;
}
.summary-item:last-child {
border-bottom: none;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #d4a977;
opacity: 0;
}
Schritt 1 von 6
16%
