.dachrinnen-visual-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:15px 0}.visual-card{position:relative;cursor:pointer}.visual-card input[type="radio"]{display:none}.visual-card-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;border:2px solid #ddd;border-radius:8px;background-color:#f9f9f9;transition:all 0.3s ease;text-align:center;min-height:120px}.visual-card:hover .visual-card-content{border-color:#28a745;background-color:#f0f8f5;transform:translateY(-2px);box-shadow:0 4px 12px rgba(40,167,69,.15)}.visual-card input[type="radio"]:checked+.visual-card-content{border-color:#28a745;background-color:#e8f5e9;box-shadow:0 0 0 3px rgba(40,167,69,.2);font-weight:600}.color-circle{display:block;width:50px;height:50px;border-radius:50%;margin-bottom:10px;border:2px solid #ddd;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(0,0,0,.1)}.visual-card input[type="radio"]:checked+.visual-card-content .color-circle{border-color:#28a745;box-shadow:0 0 0 3px rgba(40,167,69,.3);transform:scale(1.1)}.visual-title{font-size:14px;font-weight:600;color:#333;margin-bottom:4px;display:block}.visual-desc{font-size:12px;color:#666;display:block}.visual-card input[type="radio"]:checked+.visual-card-content .visual-title{color:#28a745}.visual-icon{width:50px;height:50px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;font-size:32px}.visual-icon-img{width:60px;height:60px;margin-bottom:10px;object-fit:contain;display:block}@media (max-width:768px){.dachrinnen-visual-group{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.visual-card-content{padding:12px;min-height:100px}.color-circle{width:40px;height:40px}.visual-title{font-size:13px}.visual-desc{font-size:11px}}@media (max-width:480px){.dachrinnen-visual-group{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}.visual-card-content{padding:10px;min-height:90px}.color-circle{width:35px;height:35px}.visual-title{font-size:12px}.visual-desc{font-size:10px}}.visual-card input[type="radio"]:focus+.visual-card-content{outline:2px solid #28a745;outline-offset:2px}.visual-card input[type="radio"]:disabled+.visual-card-content{opacity:.5;cursor:not-allowed;background-color:#f5f5f5}.visual-card input[type="radio"]:disabled+.visual-card-content:hover{border-color:#ddd;background-color:#f5f5f5;transform:none;box-shadow:none}