/* KaKaGe Faschingszug Anmeldeformular Styles */
/* Version 2.2 - Angepasst an kakage.com Design */

/* Sektionen-Sichtbarkeit für Wagen/Fußgruppe */
#kakage-parade-form-container .kakage-section-hidden {
    display: none !important;
}

#kakage-parade-form-container .kakage-section-visible {
    display: block !important;
}

/* Visibility-Klassen für JavaScript */
#kakage-parade-form-container .kakage-hidden {
    display: none !important;
}

#kakage-parade-form-container .kakage-visible {
    display: block !important;
}

#kakage-parade-form-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    box-sizing: border-box !important;
    color: #333 !important;
    line-height: 1.6 !important;
}

#kakage-parade-form-container *,
#kakage-parade-form-container *::before,
#kakage-parade-form-container *::after {
    box-sizing: border-box !important;
}

/* Loading Spinner */
#kakage-parade-form-container #kakage-parade-loading {
    text-align: center !important;
    padding: 60px 20px !important;
}

#kakage-parade-form-container .kakage-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 4px solid #f3f3f3 !important;
    border-top: 4px solid #1a8fc4 !important;
    border-radius: 50% !important;
    animation: kakage-spin 1s linear infinite !important;
    margin: 0 auto 20px !important;
}

@keyframes kakage-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Header */
#kakage-parade-form-container .kakage-form-header {
    margin-bottom: 15px !important;
}

#kakage-parade-form-container .kakage-form-header h2 {
    color: #1a8fc4 !important;
    margin: 0 0 10px 0 !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

#kakage-parade-form-container .parade-info {
    font-size: 16px !important;
    color: #333 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

/* Info Container mit Akkordeon */
#kakage-parade-form-container .kakage-info-container {
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#kakage-parade-form-container .kakage-info-container * {
    box-shadow: none !important;
}

#kakage-parade-form-container .kakage-info-title {
    color: #1a8fc4 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin: 20px 0 0 0 !important;
    padding: 0 0 15px 0 !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: none !important;
    box-shadow: none !important;
}

/* Akkordeon - Aggressiver Reset */
#kakage-parade-form-container .kakage-accordion,
#kakage-parade-form-container .kakage-accordion *,
#kakage-parade-form-container .kakage-accordion *::before,
#kakage-parade-form-container .kakage-accordion *::after {
    box-shadow: none !important;
    outline: none !important;
}

#kakage-parade-form-container .kakage-accordion {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

#kakage-parade-form-container .kakage-accordion > div,
#kakage-parade-form-container .kakage-accordion-item {
    border: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

#kakage-parade-form-container .kakage-accordion-header,
#kakage-parade-form-container .kakage-accordion-item > button {
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-align: left !important;
    transition: color 0.2s !important;
    font-family: inherit !important;
    letter-spacing: 0.3px !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#kakage-parade-form-container .kakage-accordion-header:focus,
#kakage-parade-form-container .kakage-accordion-header:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#kakage-parade-form-container .accordion-title,
#kakage-parade-form-container .kakage-accordion-header > span:last-child {
    flex: 1 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

#kakage-parade-form-container .kakage-accordion-header:hover,
#kakage-parade-form-container .kakage-accordion-item.active .kakage-accordion-header {
    color: #1a8fc4 !important;
}

#kakage-parade-form-container .accordion-icon,
#kakage-parade-form-container .kakage-accordion-header > span:first-child {
    font-size: 10px !important;
    color: #999 !important;
    transition: transform 0.2s !important;
    display: inline-block !important;
    width: 10px !important;
    flex-shrink: 0 !important;
    border: none !important;
}

#kakage-parade-form-container .kakage-accordion-item.active .accordion-icon {
    transform: rotate(90deg) !important;
}

#kakage-parade-form-container .kakage-accordion-content,
#kakage-parade-form-container .kakage-accordion-item > div:last-child {
    display: none;
    padding: 0 0 12px 22px !important;
    color: #333 !important;
    background: transparent !important;
    margin: 0 !important;
    border: none !important;
}

#kakage-parade-form-container .kakage-accordion-item.active .kakage-accordion-content {
    display: block;
}

#kakage-parade-form-container .kakage-accordion-content p {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    border: none !important;
}

#kakage-parade-form-container .kakage-accordion-content a {
    color: #1a8fc4 !important;
    text-decoration: none !important;
    border: none !important;
}

#kakage-parade-form-container .kakage-accordion-content a:hover {
    text-decoration: underline !important;
}

/* Gebühren-Tabelle */
#kakage-parade-form-container .kakage-fees-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

#kakage-parade-form-container .kakage-fees-table th,
#kakage-parade-form-container .kakage-fees-table td {
    padding: 10px !important;
    text-align: left !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

#kakage-parade-form-container .kakage-fees-table th {
    font-weight: 600 !important;
    background: #f0f0f0 !important;
}

#kakage-parade-form-container .bank-info {
    background: #f0f0f0 !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin-top: 15px !important;
}

/* Dokumente */
#kakage-parade-form-container .kakage-documents {
    margin-bottom: 30px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

#kakage-parade-form-container .kakage-documents h3 {
    color: #1a8fc4 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

#kakage-parade-form-container .kakage-documents ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#kakage-parade-form-container .kakage-documents li {
    padding: 8px 0 !important;
    margin: 0 !important;
    border: none !important;
}

#kakage-parade-form-container .kakage-documents a {
    color: #1a8fc4 !important;
    text-decoration: none !important;
    font-weight: normal !important;
}

#kakage-parade-form-container .kakage-documents a:hover {
    text-decoration: underline !important;
}

#kakage-parade-form-container .doc-desc {
    color: #666 !important;
}

/* Bestätigungstext */
#kakage-parade-form-container .kakage-confirmation-text {
    background: #f8f8f8 !important;
    border-left: 4px solid #1a8fc4 !important;
    border-radius: 0 !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* E-Mail Hinweistext */
#kakage-parade-form-container .kakage-email-notice {
    margin-bottom: 20px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

#kakage-parade-form-container .kakage-email-notice a {
    color: #1a8fc4 !important;
    text-decoration: none !important;
}

#kakage-parade-form-container .kakage-email-notice a:hover {
    text-decoration: underline !important;
}

/* Legal Notice Text */
#kakage-parade-form-container .kakage-legal-notice {
    margin-bottom: 20px !important;
    line-height: 1.6 !important;
}

#kakage-parade-form-container .kakage-legal-notice p {
    margin: 0 !important;
    color: #333 !important;
}

#kakage-parade-form-container .kakage-link {
    color: #1a8fc4 !important;
    text-decoration: none !important;
}

#kakage-parade-form-container .kakage-link:hover {
    text-decoration: underline !important;
}

/* Formularsektionen */
#kakage-parade-form-container .kakage-form-section {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 25px !important;
    margin-bottom: 20px !important;
}

#kakage-parade-form-container .kakage-form-section h3 {
    margin: 0 0 20px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #1a8fc4 !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    background: none !important;
}

/* Formularfelder */
#kakage-parade-form-container .kakage-field {
    margin-bottom: 20px !important;
}

#kakage-parade-form-container .kakage-field label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

#kakage-parade-form-container .kakage-field .required {
    color: #c41e3a !important;
    margin-left: 3px !important;
}

#kakage-parade-form-container .kakage-field input[type="text"],
#kakage-parade-form-container .kakage-field input[type="email"],
#kakage-parade-form-container .kakage-field input[type="tel"],
#kakage-parade-form-container .kakage-field input[type="number"],
#kakage-parade-form-container .kakage-field textarea,
#kakage-parade-form-container .kakage-field select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #333 !important;
    height: auto !important;
    line-height: 1.5 !important;
}

#kakage-parade-form-container .kakage-field input:focus,
#kakage-parade-form-container .kakage-field textarea:focus,
#kakage-parade-form-container .kakage-field select:focus {
    outline: none !important;
    border-color: #1a8fc4 !important;
    box-shadow: 0 0 0 3px rgba(26, 143, 196, 0.15) !important;
}

#kakage-parade-form-container .field-help {
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}

/* Checkbox und Radio */
#kakage-parade-form-container .kakage-checkbox {
    margin-bottom: 15px !important;
}

#kakage-parade-form-container .checkbox-label,
#kakage-parade-form-container .radio-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    padding: 8px 0 !important;
}

#kakage-parade-form-container .checkbox-label input,
#kakage-parade-form-container .radio-label input {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-top: 2px !important;
    cursor: pointer !important;
    accent-color: #1a8fc4 !important;
}

#kakage-parade-form-container .checkbox-label span,
#kakage-parade-form-container .radio-label span {
    flex: 1 !important;
    line-height: 1.4 !important;
}

#kakage-parade-form-container .radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

/* Gebührenberechnung */
#kakage-parade-form-container .kakage-fee-calculation {
    background: #f8f8f8 !important;
    border: 2px solid #1a8fc4 !important;
    border-radius: 4px !important;
    padding: 25px !important;
    margin: 30px 0 !important;
}

#kakage-parade-form-container .kakage-fee-calculation h3 {
    margin: 0 0 15px 0 !important;
    color: #1a8fc4 !important;
    font-size: 20px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

#kakage-parade-form-container #fee-breakdown {
    margin-bottom: 15px !important;
}

#kakage-parade-form-container .fee-item {
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #ddd !important;
}

#kakage-parade-form-container .fee-item:last-child {
    border-bottom: none !important;
}

#kakage-parade-form-container .fee-total {
    font-size: 20px !important;
    padding-top: 15px !important;
    border-top: 2px solid #1a8fc4 !important;
    text-align: right !important;
}

#kakage-parade-form-container #total-fee {
    color: #1a8fc4 !important;
}

/* AGB */
#kakage-parade-form-container .kakage-terms {
    background: #f8f8f8 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

/* Hinweistext */
#kakage-parade-form-container .kakage-hint-text {
    background: #e3f2fd !important;
    border: 1px solid #1a8fc4 !important;
    border-radius: 4px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    color: #0f6d9a !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* Absenden-Button */
#kakage-parade-form-container .kakage-submit {
    text-align: center !important;
    padding-top: 20px !important;
}

#kakage-parade-form-container .kakage-submit-btn {
    background: #1a8fc4 !important;
    color: white !important;
    border: none !important;
    padding: 15px 50px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
    display: inline-block !important;
    text-decoration: none !important;
}

#kakage-parade-form-container .kakage-submit-btn:hover {
    background: #0f6d9a !important;
}

#kakage-parade-form-container .kakage-submit-btn:active {
    transform: scale(0.98) !important;
}

#kakage-parade-form-container .kakage-submit-btn:disabled {
    background: #999 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Erfolgsmeldung */
#kakage-parade-form-container #kakage-parade-success {
    text-align: center !important;
}

#kakage-parade-form-container .success-message {
    background: #e8f5e9 !important;
    border: 2px solid #4caf50 !important;
    border-radius: 4px !important;
    padding: 40px !important;
}

#kakage-parade-form-container .success-message h3 {
    color: #2e7d32 !important;
    font-size: 28px !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

#kakage-parade-form-container .registration-details {
    background: white !important;
    border-radius: 4px !important;
    padding: 20px !important;
    margin-top: 25px !important;
    text-align: left !important;
}

#kakage-parade-form-container .registration-details p {
    margin: 8px 0 !important;
}

#kakage-parade-form-container .registration-details .note {
    color: #666 !important;
    font-style: italic !important;
    margin-top: 15px !important;
}

/* Fehlermeldungen */
#kakage-parade-form-container .registration-closed-notice,
#kakage-parade-form-container #kakage-parade-error {
    background: #fff8e1 !important;
    border: 1px solid #ffc107 !important;
    border-radius: 4px !important;
    padding: 30px !important;
    text-align: center !important;
}

#kakage-parade-form-container .registration-closed-notice h3 {
    color: #856404 !important;
    margin: 0 0 10px 0 !important;
    font-size: 24px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

#kakage-parade-form-container .registration-closed-notice p {
    margin: 5px 0 !important;
    color: #333 !important;
}

#kakage-parade-form-container .error-message {
    color: #c62828 !important;
    font-size: 16px !important;
}

/* Responsive */
@media (max-width: 600px) {
    #kakage-parade-form-container {
        padding: 10px !important;
    }

    #kakage-parade-form-container .kakage-form-header h2 {
        font-size: 24px !important;
    }

    #kakage-parade-form-container .kakage-form-section {
        padding: 15px !important;
    }

    #kakage-parade-form-container .kakage-submit-btn {
        width: 100% !important;
        padding: 15px !important;
    }

    #kakage-parade-form-container .fee-item {
        font-size: 14px !important;
    }
}