/* Allgemeine Formular-Styles */
.kassensystem-form-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #4A4A4A;
    padding: 20px;
}

/* Fortschrittsbalken */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #EEEEEE;
    border-radius: 4px;
    margin-bottom: 40px;
}

.progress-bar {
    height: 100%;
    background-color: #75B743;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Schritte */
.form-step {
    margin-bottom: 30px;
}

.step-content {
    margin-bottom: 40px;
}

.form-step h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
}

/* Einführungstext */
.intro-text {
    margin-bottom: 30px;
}

.intro-text p {
    font-size: 18px;
    line-height: 1.5;
}

/* Formularelemente */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

.required {
    color: #E03131;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    background-color: #FFFFFF;
}

select.form-control {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path d="M0 0l6 6 6-6z" fill="%234A4A4A"/></svg>');
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 35px;
}

.name-fields {
    display: flex;
    gap: 15px;
}

.name-fields input {
    flex: 1;
}

.field-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 14px;
    color: #777777;
}

.field-labels span {
    padding: 0 15px;
}

/* Telefonnummer mit Ländercode */
.phone-input-container {
    display: flex;
    align-items: center;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    overflow: hidden;
}

.country-code {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background-color: #F5F5F5;
    border-right: 1px solid #CCCCCC;
    cursor: pointer;
}

.flag-icon {
    margin-right: 5px;
}

.dropdown-arrow {
    font-size: 12px;
    color: #777777;
}

.phone-input-container input {
    flex: 1;
    border: none;
    border-radius: 0;
}

/* Checkbox */
.checkbox-group {
    display: flex;
    align-items: flex-start;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: normal;
}

.datenschutz-link {
    color: #75B743;
    text-decoration: underline;
}

/* Hardware/Funktionen und Geschäftstypen Auswahl */
.hardware-options, .business-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
}

@media (max-width: 768px) {
    .hardware-options, .business-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hardware-options, .business-options {
        grid-template-columns: 1fr;
    }
}

.hardware-option, .business-option {
    position: relative;
}

.hardware-option input, .business-option input {
    position: absolute;
    opacity: 0;
}

.hardware-option label, .business-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hardware-option input:checked + label, .business-option input:checked + label {
    border-color: #75B743;
    background-color: rgba(117, 183, 67, 0.1);
}

.icon-wrapper {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hardware-icon, .business-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icon-Styles für Hardware */
.payment-terminal {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><rect x="7" y="8" width="10" height="2" rx="0.5" fill="%23000"/><circle cx="12" cy="13" r="1" fill="%23000"/><path d="M8 13h2M14 13h2" stroke="%23000" stroke-width="1.5"/><path d="M7 20h10M12 16v4" stroke="%23000" stroke-width="1.5"/></svg>');
}

.touchscreen {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="2" width="18" height="16" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><line x1="8" y1="22" x2="16" y2="22" stroke="%23000" stroke-width="1.5"/><line x1="12" y1="18" x2="12" y2="22" stroke="%23000" stroke-width="1.5"/></svg>');
}

.cash-drawer {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="10" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><rect x="4" y="9" width="4" height="2" rx="0.5" fill="%23000"/><rect x="10" y="9" width="4" height="2" rx="0.5" fill="%23000"/><rect x="16" y="9" width="4" height="2" rx="0.5" fill="%23000"/><line x1="2" y1="13" x2="22" y2="13" stroke="%23000" stroke-width="1"/></svg>');
}

.order-station {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="6" y="2" width="12" height="16" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="12" cy="7" r="1.5" fill="%23000"/><path d="M8 11h8M8 14h8" stroke="%23000" stroke-width="1.5"/><rect x="8" y="18" width="8" height="4" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/></svg>');
}

.scale {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 18h20a0 0 0 01 0 0v3a1 1 0 01-1 1H3a1 1 0 01-1-1v-3a0 0 0 01 0 0z" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="12" cy="10" r="6" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="12" cy="10" r="1" fill="%23000"/><path d="M12 4v3M6 10h3M15 10h3M12 13v3" stroke="%23000" stroke-width="1.5"/></svg>');
}

.barcode-scanner {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 6v12M8 6v12M11 6v12M14 6v12M17 6v12M20 6v12" stroke="%23000" stroke-width="1.5"/><path d="M4 8L4 6 6 6M18 6L20 6 20 8M4 16L4 18 6 18M18 18L20 18 20 16" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.receipt-printer {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="5" y="8" width="14" height="8" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M7 8V4h10v4M7 16v4h10v-4" stroke="%23000" stroke-width="1.5"/><circle cx="16" cy="12" r="1" fill="%23000"/><path d="M7 12h5" stroke="%23000" stroke-width="1.5"/></svg>');
}

.webshop {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M2 8h20" stroke="%23000" stroke-width="1.5"/><circle cx="5" cy="6" r="1" fill="%23000"/><circle cx="9" cy="6" r="1" fill="%23000"/><rect x="5" y="11" width="6" height="6" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M15 11h4M15 14h4M15 17h4" stroke="%23000" stroke-width="1.5"/></svg>');
}

.question-mark {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M12 16v.5M12 14c0-2 3-2 3-4 0-1.5-1.5-2.5-3-2.5S9 8.5 9 10" stroke="%23000" stroke-width="1.5"/></svg>');
}

/* Icon-Styles für Geschäftstypen */
.restaurant {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4a8 8 0 108 8h-8V4z" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M12 4v8h-8a8 8 0 108-8z" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M12 4a8 8 0 10-8 8h8V4z" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M4 12h16v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2z" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M10 16v4M14 16v4" stroke="%23000" stroke-width="1.5"/></svg>');
}

.bar-cafe {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h18v4a1 1 0 01-1 1H4a1 1 0 01-1-1V4z" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M5 9v5a1 1 0 001 1h12a1 1 0 001-1V9" stroke="%23000" stroke-width="1.5"/><path d="M8 15v3a1 1 0 001 1h6a1 1 0 001-1v-3" stroke="%23000" stroke-width="1.5"/><path d="M7 4v4M17 4v4" stroke="%23000" stroke-width="1.5"/></svg>');
}

.sport {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M5 5l14 14M5 19l14-14" stroke="%23000" stroke-width="1.5"/><rect x="3" y="11" width="18" height="2" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/><rect x="11" y="3" width="2" height="18" rx="1" fill="none" stroke="%23000" stroke-width="1.5"/></svg>');
}

.delivery {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 12h2l2 5h10l2-5h2" stroke="%23000" stroke-width="1.5" fill="none"/><circle cx="8" cy="17" r="2" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="16" cy="17" r="2" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M12 12V6a1 1 0 011-1h4a1 1 0 011 1v6M3 12a1 1 0 01-1-1V9a1 1 0 011-1h6a1 1 0 011 1v2a1 1 0 01-1 1H3z" fill="none" stroke="%23000" stroke-width="1.5"/></svg>');
}

.retail {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 8h16a0 0 0 01 0 0v12a1 1 0 01-1 1H5a1 1 0 01-1-1V8a0 0 0 01 0 0z" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M4 8l2-4h12l2 4" stroke="%23000" stroke-width="1.5" fill="none"/><path d="M9 13h6M10 16h4" stroke="%23000" stroke-width="1.5"/><path d="M10 8v2M14 8v2" stroke="%23000" stroke-width="1.5"/></svg>');
}

.supermarket {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h1l3 13h13" stroke="%23000" stroke-width="1.5" fill="none"/><path d="M7 17h11l2-7H5" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="9" cy="20" r="1" fill="%23000"/><circle cx="17" cy="20" r="1" fill="%23000"/><path d="M10 10h2M14 10h2" stroke="%23000" stroke-width="1.5"/></svg>');
}

.service {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 6a1 1 0 011 1v3h2a1 1 0 011 1v6a1 1 0 01-1 1H7a1 1 0 01-1-1v-6a1 1 0 011-1h2V7a1 1 0 011-1h4z" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M10 9h4" stroke="%23000" stroke-width="1.5"/><path d="M12 14v2" stroke="%23000" stroke-width="1.5"/><path d="M4 9a8 8 0A16 16 0 0020 9" stroke="%23000" stroke-width="1.5" fill="none"/></svg>');
}

.beauty {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4l12 12M18 4L6 16" stroke="%23000" stroke-width="1.5"/><path d="M9 17l8 4M15 7l-4-4" stroke="%23000" stroke-width="1.5"/><circle cx="18" cy="4" r="2" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="6" cy="4" r="2" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="6" cy="16" r="2" fill="none" stroke="%23000" stroke-width="1.5"/><circle cx="18" cy="16" r="2" fill="none" stroke="%23000" stroke-width="1.5"/></svg>');
}

.other {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="%23000" stroke-width="1.5"/><path d="M12 16v.5M12 14c0-2 3-2 3-4 0-1.5-1.5-2.5-3-2.5S9 8.5 9 10" stroke="%23000" stroke-width="1.5"/></svg>');
}

/* Navigationselemente (Buttons) */
.form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.btn {
    font-size: 16px;
    font-weight: 500;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
}

.btn-back {
    background-color: #FFFFFF;
    color: #4A4A4A;
    border: 1px solid #DDDDDD;
}

.btn-back::before {
    content: "←";
    margin-right: 8px;
}

.btn-back:hover {
    background-color: #F5F5F5;
}

.btn-back:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-next, .btn-submit, .btn-weiter {
    background-color: #6852f4;
    color: #FFFFFF;
}

.btn-next::after, .btn-weiter::after {
    content: "→";
    margin-left: 8px;
}

.btn-next:hover, .btn-submit:hover, .btn-weiter:hover {
    background-color: #5a43ef;
}

/* Responsives Design */
@media (max-width: 576px) {
    .name-fields {
        flex-direction: column;
        gap: 10px;
    }
    
    .field-labels {
        justify-content: flex-start;
    }
    
    .field-labels span:last-child {
        margin-left: auto;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* Danke-Seite */
#thank-you {
    text-align: center;
    padding: 40px 0;
}

#thank-you h2 {
    font-size: 28px;
    color: #75B743;
    margin-bottom: 20px;
}

#thank-you p {
    font-size: 18px;
    line-height: 1.6;
}

/* Animation für Formularschritte */
.form-step {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.form-step.fade-out {
    opacity: 0;
}

.form-step.fade-in {
    opacity: 1;
}

/* Validierungsstile */
.form-control.is-invalid {
    border-color: #E03131;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23E03131" d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 14.5A6.5 6.5 0 1114.5 8 6.51 6.51 0 018 14.5z"/><path fill="%23E03131" d="M7.25 3.75h1.5v5h-1.5zM7.25 10h1.5v1.5h-1.5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 5px;
    font-size: 14px;
    color: #E03131;
    text-align: left;
}