.quiz-page{position:relative}.quiz-page .loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:hsla(0,0%,100%,.8);display:flex;justify-content:center;align-items:center;z-index:1000}.quiz-page .loading-overlay .loading-spinner{background-color:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);font-size:1rem;color:#4b5563;display:flex;align-items:center;gap:1rem}.quiz-page .loading-overlay .loading-spinner:before{content:"";width:24px;height:24px;border:3px solid #e2e8f0;border-top-color:#61bfe3;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.quiz-page .quiz-container{max-width:800px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:2rem}.quiz-page .quiz-container .error-message{background-color:#fee2e2;border:1px solid #ef4444;color:#b91c1c;padding:1rem;border-radius:8px;margin-bottom:1.5rem;text-align:center;font-size:.875rem}.quiz-page .quiz-container .quiz-progress{text-align:center;margin-bottom:2rem}.quiz-page .quiz-container .quiz-progress .step-counter{font-size:.875rem;color:#64748b;margin-bottom:1rem}.quiz-page .quiz-container .quiz-progress .progress-steps{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:0 1rem;margin:0 auto;max-width:600px}.quiz-page .quiz-container .quiz-progress .progress-steps .step{width:36px;height:36px;border-radius:50%;background-color:#e2e8f0;color:#64748b;display:flex;align-items:center;justify-content:center;font-weight:600;position:relative;transition:all .3s ease}.quiz-page .quiz-container .quiz-progress .progress-steps .step.active{background-color:#61bfe3;color:#fff;transform:scale(1.1)}.quiz-page .quiz-container .quiz-progress .progress-steps .step.completed{background-color:#61bfe3;color:#fff}.quiz-page .quiz-container .quiz-progress .progress-steps .step:not(:last-child):after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);width:24px;height:2px;background-color:#e2e8f0}.quiz-page .quiz-container .quiz-progress .progress-steps .step.completed:not(:last-child):after{background-color:#61bfe3}.quiz-page .quiz-container .quiz-content .quiz-header{text-align:center;margin-bottom:2rem}.quiz-page .quiz-container .quiz-content .quiz-header h2{font-size:1.5rem;text-transform:none;font-weight:600;color:#333;margin-bottom:1rem}.quiz-page .quiz-container .quiz-content .quiz-header p{color:#666;font-size:1rem}.quiz-page .quiz-container .quiz-content .options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:2rem}.quiz-page .quiz-container .quiz-content .options-grid button{background:#fff;border:2px solid #e2e8f0;border-radius:8px;padding:1rem;transition:all .2s ease;text-align:left;display:flex;align-items:center;width:100%;cursor:pointer}.quiz-page .quiz-container .quiz-content .options-grid button:hover{border-color:rgba(97,191,227,.3);background-color:rgba(97,191,227,.1)}.quiz-page .quiz-container .quiz-content .options-grid button:focus{outline:none;border-color:#61bfe3;box-shadow:0 0 0 3px rgba(227,0,11,.2)}.quiz-page .quiz-container .quiz-content .options-grid button.selected{border-color:#61bfe3;background-color:rgba(97,191,227,.1);box-shadow:0 0 0 3px rgba(97,191,227,.2)}.quiz-page .quiz-container .quiz-content .options-grid button img{width:48px;height:48px;object-fit:cover;border-radius:6px;margin-right:1rem}.quiz-page .quiz-container .quiz-content .options-grid button span{font-size:1rem;color:#4b5563}.quiz-page .quiz-container .quiz-content form{margin-top:2rem}.quiz-page .quiz-container .quiz-content form textarea{width:100%;border:2px solid #e2e8f0;border-radius:8px;padding:1rem;min-height:120px;font-size:1rem;color:#4b5563;transition:all .2s ease;margin-bottom:1rem}.quiz-page .quiz-container .quiz-content form textarea:focus{outline:none;border-color:#61bfe3;box-shadow:0 0 0 3px rgba(227,0,11,.2)}.quiz-page .quiz-container .quiz-content .button-group{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.quiz-page .quiz-container .quiz-content .button-group button{padding:.75rem 2rem;border-radius:8px;font-weight:600;transition:all .2s ease;min-width:120px}.quiz-page .quiz-container .quiz-content .button-group button.back-button{background-color:#f3f4f6;color:#4b5563;border:1px solid #e5e7eb}.quiz-page .quiz-container .quiz-content .button-group button.back-button:hover{background-color:#e5e7eb}.quiz-page .quiz-container .quiz-content .button-group button:not(.back-button){background-color:#61bfe3;border:none;color:#fff}.quiz-page .quiz-container .quiz-content .button-group button:not(.back-button):hover:not(:disabled){transform:scale3d(.95,.95,1.001);cursor:pointer}.quiz-page .quiz-container .quiz-content .button-group button:not(.back-button):disabled{background-color:rgba(97,191,227,.5);cursor:not-allowed}.contact-form{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:500px;margin:0 auto}.contact-form .form-field{display:flex;flex-direction:column;gap:.5rem}.contact-form .form-field label{font-weight:500;color:#333}.contact-form .form-field label .required{color:#e53e3e;margin-left:.25rem}.contact-form .form-field input{padding:.75rem;border:1px solid #e2e8f0;border-radius:.375rem;font-size:1rem;transition:border-color .2s ease}.contact-form .form-field input:focus{outline:none;border-color:#61bfe3;box-shadow:0 0 0 3px rgba(97,191,227,.15)}.contact-form .form-field input:invalid{border-color:#61bfe3;box-shadow:0 0 0 3px rgba(227,0,11,.15)}.slider-container{width:100%;max-width:500px;margin:2rem auto;padding:0 1rem}.slider-container .slider{width:100%;height:6px;-webkit-appearance:none;background:#e2e8f0;border-radius:3px;outline:none;margin:1.5rem 0}.slider-container .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:#61bfe3;border-radius:50%;cursor:pointer;-webkit-transition:background .2s ease;transition:background .2s ease}.slider-container .slider::-webkit-slider-thumb:hover{background:#36addb}.slider-container .slider::-moz-range-thumb{width:24px;height:24px;background:#61bfe3;border:none;border-radius:50%;cursor:pointer;-moz-transition:background .2s ease;transition:background .2s ease}.slider-container .slider::-moz-range-thumb:hover{background:#36addb}.slider-container .slider-value{text-align:center;font-size:1.25rem;font-weight:500;color:#2d3748;margin-top:1rem}.text-input{width:100%;padding:.75rem;border:1px solid #e2e8f0;border-radius:.375rem;font-size:1rem;transition:border-color .2s ease;margin-bottom:1.5rem}.text-input:focus{outline:none;border-color:#4299e1;box-shadow:0 0 0 3px rgba(66,153,225,.15)}.file-upload-container{width:100%;max-width:500px;margin:2rem auto;padding:2rem;border:2px dashed #e2e8f0;border-radius:8px;text-align:center;transition:all .2s ease;cursor:pointer;position:relative;background-color:#f8fafc}.file-upload-container:hover{border-color:#61bfe3;background-color:#fff5f5}.file-upload-container:active{transform:scale(.98)}.file-upload-container .file-input{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;cursor:pointer}.file-upload-container .selected-files{text-align:left;margin-top:1rem}.file-upload-container .selected-files .file-item{display:flex;align-items:center;justify-content:space-between;background-color:#fff;padding:.5rem 1rem;border-radius:4px;margin-bottom:.5rem;border:1px solid #e2e8f0}.file-upload-container .selected-files .file-item .file-name{font-size:.875rem;color:#4b5563;word-break:break-all;margin-right:1rem}.file-upload-container .selected-files .file-item .remove-file{background:none;border:none;color:#ef4444;font-size:1.25rem;cursor:pointer;padding:.25rem;line-height:1;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.file-upload-container .selected-files .file-item .remove-file:hover{background-color:#fee2e2}.file-upload-container .selected-files .upload-message{color:#64748b;font-size:.875rem;margin-top:1rem;text-align:center}.file-upload-container .file-upload-info{color:#64748b;font-size:.875rem;margin-top:1rem;pointer-events:none}.file-upload-container .file-upload-info span{display:block;margin-top:.5rem;font-size:.75rem}.file-upload-container:before{content:"Dateien hierher ziehen oder klicken zum Auswählen";display:block;margin-bottom:1rem;color:#4b5563;font-weight:500;pointer-events:none}.date-picker-container{width:100%;max-width:500px;margin:2rem auto}.date-picker-container .date-input{width:100%;padding:.75rem;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;color:#4b5563;transition:all .2s ease}.date-picker-container .date-input:focus{outline:none;border-color:#61bfe3;box-shadow:0 0 0 3px rgba(227,0,11,.15)}input.invalid{border-color:#e53e3e!important;box-shadow:0 0 0 2px #fee2e2}