body {
background: #f5f5f5;
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
} .depot-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://beta.polarstar-network.com/wp-content/uploads/2025/10/Erstellen-Sie-Ihr-Edelmetall-Online-Depot-bei-Polarstar-und-nutzen-Sie-unschlagbare-Vorteile.jpg)
no-repeat center center;
background-size: cover;
z-index: 0;
opacity: 1;
}
.depot-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
rgba(255, 245, 200, 0.6),
rgba(255, 240, 180, 0.4)
);
mix-blend-mode: soft-light;
} #depot {
max-width: 960px; margin: 150px auto 120px auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 18px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
padding: 60px 80px; color: #0d2240;
position: relative;
box-sizing: border-box;
border: none;
z-index: 1;
backdrop-filter: blur(5px);
} #depot::before,
#depot::after {
content: none !important;
border: none !important;
box-shadow: none !important;
} .form-title {
text-align: center;
font-size: 1.8rem;
margin-bottom: 30px;
color: #0d2240;
font-weight: 700;
letter-spacing: 0.3px;
border: none;
} .progressbar {
position: relative;
margin: 30px 0 50px;
height: 8px;
background: #e8e8e8;
border-radius: 6px;
overflow: visible;
border: none;
}
.progressbar .progress {
height: 8px;
background: linear-gradient(90deg, #d4af37, #b9972e);
width: 25%;
border-radius: 6px;
transition: width 0.4s ease;
position: relative;
z-index: 1;
}
.progressbar .steps {
display: flex;
justify-content: space-between;
position: absolute;
top: -22px;
left: 0;
right: 0;
z-index: 2;
}
.step {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #b7b7b7;
border-radius: 50%;
font-weight: 600;
color: #fff;
font-size: 15px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
border: none;
}
.step.active {
background: linear-gradient(180deg, #d4af37, #b9972e);
transform: scale(1.12);
box-shadow: 0 4px 10px rgba(212, 175, 55, 0.35);
} .form-step {
display: none;
border: none;
}
.form-step.active {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .form-row {
margin-bottom: 1.4rem;
width: 100%;
box-sizing: border-box;
}
.two-cols,
.three-cols {
display: flex;
gap: 16px;
flex-wrap: wrap;
width: 100%;
}
.col {
flex: 1;
min-width: 0;
}
.col.wide {
flex: 2;
}
.col.small {
flex: 0.6;
}
label {
font-weight: 600;
color: #333;
display: block;
margin-bottom: 6px;
} input,
select,
textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
color: #222;
background: #fff;
box-sizing: border-box;
transition: border-color 0.25s, box-shadow 0.25s;
}
input:focus,
select:focus,
textarea:focus {
border-color: #d4af37;
box-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
outline: none;
} label.inline {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
color: #222;
cursor: pointer;
background: #f8f8f8;
border-radius: 8px;
padding: 10px 14px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd;
}
label.inline:hover {
background: #f2f2f2;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: #d4af37;
cursor: pointer;
flex-shrink: 0;
} .buttons {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
button {
background: linear-gradient(90deg, #d4af37, #b9972e);
color: #fff;
border: none;
padding: 14px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
width: 100%;
font-size: 16px;
transition: all 0.25s ease;
}
button:hover {
background: linear-gradient(90deg, #b9972e, #d4af37);
transform: translateY(-2px);
} .form-info-box {
background: #f9f8f3;
border-left: 4px solid #d4af37;
border-radius: 8px;
padding: 18px 22px;
margin-bottom: 20px;
color: #444;
}
.form-info-box h3 {
font-size: 1.1rem;
margin-bottom: 8px;
font-weight: 700;
color: #0d2240;
} .form-success {
text-align: center;
padding: 40px 20px;
width: 100%;
}
.form-success h2 {
color: #0d2240;
margin-bottom: 10px;
}
.form-success p {
font-size: 1.1rem;
color: #444;
}
.hidden {
display: none;
} @media (max-width: 768px) {
#depot {
padding: 30px 24px;
}
.two-cols,
.three-cols {
flex-direction: column;
}
.progressbar .steps {
top: -18px;
}
.step {
width: 32px;
height: 32px;
font-size: 14px;
}
.form-title {
font-size: 1.5rem;
}
label.inline {
padding: 12px;
font-size: 0.95rem;
}
}
.form-error {
color: #e63946;
font-size: 0.9rem;
margin-top: 4px;
font-weight: 500;
display: none;
}
input.invalid + .form-error,
select.invalid + .form-error,
textarea.invalid + .form-error {
display: block;
} #footer-outer,
footer,
#call-to-action {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
} input.invalid,
select.invalid,
textarea.invalid {
border-color: #e63946 !important;
box-shadow: 0 0 5px rgba(230, 57, 70, 0.4);
background-color: #fff5f5;
} .error-message {
color: #e63946;
font-size: 0.9rem;
margin-top: 6px;
font-weight: 500;
animation: fadeIn 0.25s ease;
} @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-3px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
input.invalid,
select.invalid,
textarea.invalid {
animation: shake 0.2s ease;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-3px);
}
75% {
transform: translateX(3px);
}
} .gutschein-info {
background: #f9f8f3; border-left: 4px solid #d4af37; border-radius: 8px;
padding: 16px 20px;
margin-top: 12px;
color: #444;
font-size: 0.95rem;
display: none; }
.gutschein-info label {
font-weight: 600;
color: #0d2240;
margin-bottom: 6px;
display: block;
}
.gutschein-info input {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px 14px;
width: 100%;
font-size: 1rem;
color: #222;
background: #fff;
transition: border-color 0.25s, box-shadow 0.25s;
}
.gutschein-info input:focus {
border-color: #d4af37;
box-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
outline: none;
}
.gutschein-info p {
margin-top: 10px;
color: #555;
font-size: 0.9rem;
line-height: 1.4;
} .partner-info,
.beguenstigte-info {
background: #f9f8f3;
border-left: 4px solid #d4af37;
border-radius: 8px;
padding: 20px 24px;
margin-top: 15px;
color: #444;
display: none;
}
.partner-info h3,
.beguenstigte-info h3 {
font-size: 1.1rem;
font-weight: 700;
color: #0d2240;
margin-bottom: 15px;
}
.info-hint {
background: #fff9e6;
border-left: 4px solid #d4af37;
border-radius: 6px;
padding: 12px 16px;
margin-top: 8px;
color: #333;
font-size: 0.95rem;
line-height: 1.4;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
} .tooltip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(145deg, #d4af37, #b9972e);
color: #fff;
font-size: 0.9rem;
font-weight: 700;
margin-left: 8px;
cursor: pointer;
position: relative;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tooltip-icon:hover {
transform: scale(1.1);
box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
} .tooltip-icon::after {
content: attr(data-tooltip);
position: absolute;
bottom: 135%;
left: 50%;
transform: translateX(-50%);
width: 270px;
background: rgba(13, 34, 64, 0.96);
color: #fff;
font-size: 0.85rem;
padding: 10px 14px;
border-radius: 12px;
line-height: 1.4;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 100;
}
.tooltip-icon:hover::after {
opacity: 1;
} @media (max-width: 600px) {
.tooltip-icon::after {
width: 85vw;
left: 50%;
transform: translateX(-50%);
}
} .form-step h2 {
font-size: 1.6rem;
text-align: center;
margin-bottom: 35px;
font-weight: 700;
background: linear-gradient(90deg, #b9972e, #d4af37);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.4px;
position: relative;
} .form-step h2::after {
content: "";
position: absolute;
left: 50%;
bottom: -14px;
transform: translateX(-50%);
width: 70px;
height: 3px;
background: linear-gradient(90deg, #b9972e, #d4af37);
border-radius: 3px;
opacity: 0.9;
} input,
select,
textarea {
transition: all 0.25s ease;
}
input:focus,
select:focus,
textarea:focus {
border-color: #d4af37;
box-shadow: 0 0 10px rgba(212, 175, 55, 0.25);
outline: none;
} input:focus,
textarea:focus {
background-color: #fffdf6;
} button,
.submit-btn {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #d4af37, #b9972e);
color: #fff;
border: none;
padding: 14px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
width: 100%;
font-size: 16px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
button:hover,
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(212, 175, 55, 0.35);
} button::after,
.submit-btn::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg);
transition: left 0.7s ease;
}
button:hover::after,
.submit-btn:hover::after {
left: 125%;
}  #depot {
background: rgba(255, 255, 255, 0.96);
border-radius: 20px;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
padding: 60px 70px;
} .form-row {
margin-bottom: 1.8rem;
} input,
select,
textarea {
border: 1px solid #ddd;
border-radius: 10px;
} label {
font-weight: 600;
color: #0d2240;
font-size: 0.97rem;
letter-spacing: 0.2px;
} .form-step:not(:last-child) {
border-bottom: 1px solid rgba(212, 175, 55, 0.15);
padding-bottom: 40px;
margin-bottom: 50px;
} .form-info-box {
background: linear-gradient(180deg, #fffdf6, #f9f8f3);
border-left: 5px solid #d4af37;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
} label.inline {
background: #fafafa;
border: 1px solid #eee;
transition: all 0.3s ease;
}
label.inline:hover {
border-color: #d4af37;
background: #fffdf8;
} .partner-info,
.beguenstigte-info {
background: rgba(255, 255, 255, 0.9);
border: 1px solid #eee;
border-radius: 14px;
padding: 25px 30px;
margin-top: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
} .info-hint {
font-size: 0.9rem;
color: #555;
background: rgba(255, 250, 235, 0.8);
border-left: 3px solid #d4af37;
border-radius: 6px;
padding: 10px 14px;
margin-top: 10px;
}  .form-step {
display: none;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.form-step.active {
display: block;
opacity: 1;
transform: translateY(0);
} .partner-info,
.beguenstigte-info {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
} .partner-info.show,
.beguenstigte-info.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: translateY(0);
} .vertriebspartner-info,
.gutschein-info {
display: none !important;
opacity: 0 !important;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.vertriebspartner-info.show,
.gutschein-info.show {
display: block !important;
opacity: 1 !important;
transform: translateY(0);
}
.partner-info.show,
.beguenstigte-info.show,
.vertriebspartner-info.show,
.gutschein-info.show {
display: block;
opacity: 1;
transform: translateY(0);
} button:hover,
.submit-btn:hover {
transform: translateY(-2px) scale(1.02);
transition: all 0.25s ease;
} #depot .submit-btn {
display: block;
width: 100%;
padding: 14px 20px;
line-height: 1.4;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
color: #fff;
text-align: center;
background: linear-gradient(90deg, #d4af37, #b9972e);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.25s ease;
}
#depot .submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.35);
} .firma-info {
background: #f9f8f3;
border-left: 4px solid #d4af37;
border-radius: 10px;
padding: 18px 22px;
margin-top: 12px;
display: none;
transition: all 0.3s ease;
} #abschlusskosten-select {
border: 1px solid #ccc;
border-radius: 8px;
padding: 12px 14px;
font-size: 1rem;
background: #fff;
transition: border-color 0.25s ease;
}
#abschlusskosten-select:focus {
border-color: #d4af37;
box-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
} #gutschein-checkbox,
#vertriebspartner-checkbox {
accent-color: #d4af37;
} .gutschein-info {
margin-top: 10px;
background: #fffdf8;
border-left: 4px solid #d4af37;
padding: 16px 20px;
border-radius: 10px;
display: none;
} #depot {
max-width: 960px;
width: 90%;
padding: 60px 80px;
}
.form-step {
min-height: 620px;
display: none;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.form-step.active {
display: block;
opacity: 1;
transform: translateY(0);
} .progressbar {
margin: 30px 0 60px;
} .vertriebspartner-info,
.gutschein-info {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.vertriebspartner-info.show,
.gutschein-info.show {
display: block !important;
opacity: 1 !important;
transform: translateY(0);
} @media (min-width: 1400px) {
#depot {
max-width: 1000px;
}
}