:root { --primary-color:#2b6cb0; --secondary-color:#45a049; --bg-card:#ffffff; --border-color:#e2e8f0; --text-main:#2d3748; }
details { background:white; margin-bottom:15px; padding:15px 20px; border-radius:8px; border:1px solid #eee; transition:0.3s; }
details[open] { border-color:#0a51a8; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
summary { font-weight:bold; cursor:pointer; list-style:none; position:relative; padding-right:30px; }
summary::after { content:' +'; position:absolute; right:0; color:#0a51a8; font-size:1.2rem; }
details[open] summary::after { content:' −'; }
#myForm { max-width:800px; margin:20px auto; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; color:var(--text-main); }

.person-group { background:var(--bg-card); border:1px solid var(--border-color); border-radius:12px; padding:20px; margin-bottom:20px; box-shadow:0 4px 6px rgba(0,0,0,0.05); }
.person-group label b { display:block; margin-bottom:10px; font-size:17px; color:#000; }
.suggestion-wrapper { position:relative; }
input[type="text"], select { width:100%; padding:12px; border:1px solid #cbd5e0; border-radius:8px; font-size:16px; box-sizing:border-box; }
.radio-group { display:flex; gap:15px; align-items:center; margin-top:15px; padding:10px; background:#f8fafc; border-radius:8px; }
.model-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.model-item { background:#f1f5f9; padding:12px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; border:1px solid transparent; transition:0.3s; }
.model-item:has(input:checked) { border-color:var(--primary-color); background:#ebf8ff; }
.model-item label { display:flex; align-items:center; gap:10px; cursor:pointer; width:100%; font-weight:500; }
.info-icon { width:20px; height:20px; line-height:20px; border-radius:50%; background:#0077C8; color:white; font-weight:bold; text-align:center; cursor:pointer; font-size:12px; }
.info-icon:hover { background:#0082D9; }
#model-error { background:#fff5f5; color:red; padding:12px; font-weight:500; border-radius:8px; border:1px solid #feb2b2; margin-top:10px; display:none; }
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%); }
.person-group label b { display: flex; align-items: center; font-size: 17px; color: var(--text-main); margin-bottom: 12px; }
button[type="submit"] { background:var(--primary-color); color:white; width:100%; padding:18px; border:none; border-radius:12px; font-size:20px; font-weight:bold; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:10px; }
.suggestion-item { padding:10px; cursor:pointer; border-bottom:1px solid #edf2f7; }
.suggestion-item:hover { background:#ebf8ff; }
.fade-in { opacity:0; transform:translateY(10px); transition:0.4s ease; }
.is-visible { opacity:1; transform:translateY(0); }


.rechner-container{max-width:1200px;margin:-60px auto 60px;background:white;padding:30px;border-radius:15px;box-shadow:0 15px 35px rgba(0,0,0,0.1);position:relative;z-index:10}
.error{color:red}
.close-btn{position:absolute;top:5px;right:5px;background:none;border:none;color:#000;font-size:14px;font-weight:bold;cursor:pointer}
.blue-button{background-color:blue;color:#fff;padding:7px 10px;border:none;font-size:14px;cursor:pointer;border-radius:5px}
#modelPopup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:30px;border-radius:15px;z-index:2000;max-width:500px;width:90%;box-shadow:0 20px 50px rgba(0,0,0,0.3);box-sizing:border-box}
.responsive-box{background:white;min-width:280px;border:1px solid #cbd5e0;padding:12px 18px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.02)}
.insurance-container { max-width: 950px; margin: 20px auto; font-family: 'Inter', sans-serif; padding: 0 10px; }
.insurance-card { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

.card-main { display: flex; align-items: center; padding: 20px; gap: 20px; }
.brand-row { display: flex; align-items: center; flex: 2; gap: 15px; }
.c-logo img { width: 65px; height: auto; border-radius: 6px; }
.kasse-title { font-size: 18px; color: #1a202c; }
.model-badge { font-size: 13px; cursor: pointer; margin-top: 4px; }

.c-price { border-left: 1px solid #edf2f7; padding-left: 20px; }
.price-label { font-size: 10px; color: #718096; text-transform: uppercase; display: block; }
.price-value { font-size: 20px; color: #0051AA; font-weight: 800; }

.action-row { display: flex; align-items: center; flex: 1.5; justify-content: space-between; gap: 15px; }
.button-link {  opacity: 0;  visibility: hidden;  transform: scale(0.8); background: linear-gradient(135deg, #0051AA 0%, #00D2FF 100%); color: #fff!important;  padding: 12px 24px;  font-weight: 700;  border-radius: 50px; text-decoration: none;  font-size: 14px;  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 8px 20px rgba(0,81,170,0.25); white-space: nowrap; text-align: center; display: block; }
.button-link.is-visible {  opacity: 1;  visibility: visible;  transform: scale(1); }

.details-bar { text-align: center; padding: 8px; font-size: 12px; color: #718096; cursor: pointer; background: #f8fafc; border-top: 1px solid #f1f5f9; }
.slide-wrapper { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s ease-in-out, opacity 0.4s ease; }
.slide-wrapper.is-open { max-height: 1000px; opacity: 1; }
.detail-item { padding: 8px 25px; display: flex; justify-content: space-between; font-size: 13px; border-bottom: 1px solid #e5e5e5; }

.sort-btn { display: inline-block; text-align: center; padding: 6px 5px; min-width: 160px; margin: 8px; border-radius: 6px; background: #f0f0f0; text-decoration: none; color: #333; font-weight: 500; transition: all 0.2s; border: none; cursor: pointer; }
.sort-btn:hover { background:#dbeafe; }
.sort-btn.active { background:#0051AA; color:#fff; }
@media (max-width:768px){
    .rechner-container { margin:-60px 10px 40px; padding:10px; }
    .insurance-container { max-width: 100%; margin: 0px; }
    .card-main { flex-direction: column; padding: 15px; gap: 10px; }
    .brand-row { width: 100%; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; }
    .action-row { flex-direction: column; align-items: stretch; text-align: center; width: 100%; gap: 10px; }
    .c-price { border-left: none; padding-left: 0; }
    .price-value { font-size: 22px; }
    .c-logo img { width: 50px; }
    .kasse-title { font-size: 16px; }
    .action-row { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
    .c-price { border-bottom: 1px solid #eee; padding-bottom: 10px; }
    .button-link { width: 100%; padding: 14px; font-size: 16px; }
}