.dachrechner{--dr-primary:#0ea5a4;--dr-text:#0f172a;--dr-muted:#475569;--dr-border:#e5e7eb;--dr-bg:#ffffff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial;color:var(--dr-text);background:var(--dr-bg);border:1px solid var(--dr-border);border-radius:16px;padding:20px}
.dachrechner__heading{font-weight:800;font-size:20px;line-height:1.2;margin:0 0 16px}
.dr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dr-card{display:flex;flex-direction:column;border:2px solid var(--dr-border);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .2s, box-shadow .2s;background:#fff;position:relative}
.dr-card__radio{position:absolute;opacity:0;pointer-events:none}
.dr-card__img{width:100%;height:140px;object-fit:cover;display:block}
.dr-card__body{padding:10px 12px}
.dr-card__title{font-weight:700}
.dr-card--active{border-color:var(--dr-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--dr-primary) 20%, transparent)}
.dr-options{margin-top:10px;padding:10px 12px;border:1px dashed var(--dr-border);border-radius:12px;background:#fafafa}
.dr-options__title{font-weight:700;margin-bottom:6px}
.dr-options__list{display:flex;flex-wrap:wrap;gap:10px}
.dr-opt{display:inline-flex;gap:6px;align-items:center;margin-right:10px}
.dr-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.dr-input{min-width:180px;flex:1 1 180px}
.dachrechner__label{display:block;font-size:12px;margin-bottom:4px;color:var(--dr-muted)}
.dachrechner__input{width:100%;border:1px solid var(--dr-border);border-radius:10px;padding:10px 12px;font-size:14px}
.dr-actions-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dachrechner__btn{border:0;border-radius:999px;padding:10px 14px;background:var(--dr-primary);color:#fff;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.dachrechner__btn.dr-secondary{background:#0f172a0d;color:var(--dr-text)}
.dr-vat-inline{display:inline-flex;gap:8px;align-items:center;margin-left:6px}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#e5e7eb;border-radius:999px;transition:.2s}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:999px;transition:.2s}
.switch input:checked + .slider{background:var(--dr-primary)}
.switch input:checked + .slider:before{transform:translateX(20px)}
.dachrechner__result{margin-top:14px;border-top:1px solid var(--dr-border);padding-top:12px}
.dr-total{font-size:28px;font-weight:900}
.dr-sub{color:var(--dr-muted);margin-top:2px}
.dachrechner__hint{font-size:12px;color:var(--dr-muted);margin-top:10px}
@media (max-width:900px){ .dr-cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){ .dr-cards{grid-template-columns:1fr;} .dr-inline{flex-direction:column;align-items:stretch} .dr-actions-inline{justify-content:space-between} }