:root { --primary-color:#01456D; --secondary-color:#047481; --bg-light:#f8fafc; --border-color:#e2e8f0; }
.rechner-container { max-width:850px; margin:-60px auto 60px; background:white; padding:30px; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.1); position:relative; z-index:10; }
.form-row { display:flex; flex-direction:column; margin-bottom:15px; }
.form-row label { font-weight:600; color:#4a5568; margin-bottom:5px; }
input[type="text"], input[type="email"], select { width:100%; padding:12px; border:1.5px solid var(--border-color); border-radius:8px; font-size:16px; box-sizing:border-box; }
.person-section { background:var(--bg-light); padding:20px; border-radius:12px; margin-bottom:20px; border:1px solid var(--border-color); overflow:hidden; max-height:500px; opacity:1; transform:translateY(0); transition:max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, margin 0.3s ease, padding 0.3s ease; }
.section-title { color:var(--primary-color); display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.remove-btn { background:#fee2e2; color:#b91c1c; border:none; padding:8px 15px; border-radius:6px; cursor:pointer; font-weight:bold; }
.btn-primary { background:var(--primary-color); color:white; padding:16px 40px; border:none; border-radius:30px; font-size:18px; font-weight:bold; cursor:pointer; }
.input-wrapper { position:relative; }
.person-section.opening { max-height:0; opacity:0; transform:translateY(-10px); }
.person-section.closing { max-height:0; opacity:0; transform:translateY(-10px); margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; }
button.add { background-color:#F8FCF8; color:var(--primary-color); border:2px dashed var(--border-color); padding:15px 20px; border-radius:12px; font-size:16px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; transition:all 0.3s ease; margin-bottom:20px; }
button.add i { font-size:18px; color:var(--secondary-color); }
button.add:hover { background-color:#f8fafc; border-color:var(--primary-color); color:var(--primary-color); box-shadow:0 4px 12px rgba(0,0,0,0.05); }
button.add:hover i { transform:scale(1.2); transition:transform 0.2s ease; }
button.add:active { transform:scale(0.98); }
.custom-plus { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:2px solid currentColor; border-radius:50%; position:relative; transition:transform 0.3s ease; }
.custom-plus::before { content:""; position:absolute; width:10px; height:2px; background-color:currentColor; }
.custom-plus::after { content:""; position:absolute; width:2px; height:10px; background-color:currentColor; }
button.add:hover .custom-plus { transform:rotate(90deg) scale(1.1); }
.custom-marker { display:inline-block; width:16px; height:16px; background-color:var(--primary-color); border-radius:50% 50% 50% 0; transform:rotate(-45deg); position:relative; margin-right:8px; vertical-align:middle; }
.custom-marker::after { content:""; position:absolute; width:6px; height:6px; background-color:#fff; border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%); }
@media (min-width:768px) { .form-row { flex-direction:row; align-items:center; } .form-row label { width:30%; } .form-row .input-wrapper { width:70%; } }