{"id":1059,"date":"2026-01-28T16:35:11","date_gmt":"2026-01-28T15:35:11","guid":{"rendered":"https:\/\/opera-tent.com\/planning-assistance\/"},"modified":"2026-03-19T15:41:55","modified_gmt":"2026-03-19T14:41:55","slug":"planning-assistance","status":"publish","type":"page","link":"https:\/\/www.opera-tent.com\/en\/planning-assistance\/","title":{"rendered":"Planning Assistance"},"content":{"rendered":"    <style>\n    \/* Opera Planungsrechner Styles *\/\n    .opera-planungsrechner {\n        max-width: 960px;\n        margin: 0 auto;\n        padding: 3rem 1rem;\n        font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n    }\n    \n    .opera-planungsrechner .calculator-header {\n        text-align: center;\n        margin-bottom: 2.5rem;\n    }\n    \n    .opera-planungsrechner .calculator-header h2 {\n        font-size: clamp(1.8rem, 4vw, 2.5rem);\n        font-weight: 700;\n        color: #1a1a2e;\n        margin-bottom: 0.5rem;\n    }\n    \n    .opera-planungsrechner .calculator-header p {\n        color: #666;\n        font-size: 1.1rem;\n    }\n    \n    .opera-planungsrechner .steps-container {\n        display: flex;\n        flex-direction: column;\n        gap: 1.5rem;\n    }\n    \n    .opera-planungsrechner .step-card {\n        background: #fff;\n        border-radius: 12px;\n        box-shadow: 0 4px 24px rgba(0,0,0,0.08);\n        overflow: hidden;\n        transition: all 0.25s ease;\n    }\n    \n    .opera-planungsrechner .step-card.disabled {\n        opacity: 0.5;\n        pointer-events: none;\n    }\n    \n    .opera-planungsrechner .step-header {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n        padding: 1.5rem;\n        cursor: pointer;\n        transition: background 0.2s;\n    }\n    \n    .opera-planungsrechner .step-header:hover {\n        background: #f8f8f8;\n    }\n    \n    .opera-planungsrechner .step-number {\n        width: 40px;\n        height: 40px;\n        background: #e5e5e5;\n        color: #666;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 700;\n        font-size: 1rem;\n        flex-shrink: 0;\n        transition: all 0.25s;\n    }\n    \n    .opera-planungsrechner .step-card.active .step-number,\n    .opera-planungsrechner .step-card.completed .step-number {\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n    }\n    \n    .opera-planungsrechner .step-info {\n        flex: 1;\n    }\n    \n    .opera-planungsrechner .step-title {\n        font-size: 1.1rem;\n        font-weight: 600;\n        color: #1a1a2e;\n        margin: 0 0 0.25rem 0;\n    }\n    \n    .opera-planungsrechner .step-subtitle {\n        font-size: 0.9rem;\n        color: #666;\n        margin: 0;\n    }\n    \n    .opera-planungsrechner .step-value {\n        font-size: 0.9rem;\n        color: var(--color-secondary, #B5152B);\n        font-weight: 600;\n        margin-top: 0.25rem;\n    }\n    \n    .opera-planungsrechner .step-toggle {\n        width: 32px;\n        height: 32px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: #888;\n        transition: transform 0.2s;\n    }\n    \n    .opera-planungsrechner .step-card.active .step-toggle {\n        transform: rotate(180deg);\n    }\n    \n    .opera-planungsrechner .step-content {\n        display: none;\n        padding: 0 1.5rem 1.5rem;\n        animation: pr-slideDown 0.3s ease;\n    }\n    \n    .opera-planungsrechner .step-card.active .step-content {\n        display: block;\n    }\n    \n    @keyframes pr-slideDown {\n        from { opacity: 0; transform: translateY(-10px); }\n        to { opacity: 1; transform: translateY(0); }\n    }\n    \n    \/* Person Input *\/\n    .opera-planungsrechner .person-input-container {\n        display: flex;\n        flex-direction: column;\n        gap: 1.5rem;\n    }\n    \n    .opera-planungsrechner .person-display {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 1rem;\n        padding: 1.25rem;\n        background: #f8f8f8;\n        border-radius: 8px;\n    }\n    \n    .opera-planungsrechner .person-icon {\n        width: 56px;\n        height: 56px;\n    }\n    \n    .opera-planungsrechner .person-number-input {\n        width: 140px;\n        font-size: 2.5rem;\n        font-weight: 700;\n        color: #1a1a2e;\n        text-align: center;\n        border: 2px solid #e5e5e5;\n        border-radius: 8px;\n        padding: 0.5rem;\n        font-family: inherit;\n        transition: border-color 0.2s;\n    }\n    \n    .opera-planungsrechner .person-number-input:focus {\n        outline: none;\n        border-color: var(--color-secondary, #B5152B);\n    }\n    \n    .opera-planungsrechner .person-label {\n        font-size: 1.1rem;\n        color: #666;\n    }\n    \n    .opera-planungsrechner .slider-container {\n        padding: 0 0.5rem;\n    }\n    \n    .opera-planungsrechner .person-slider {\n        width: 100%;\n        height: 8px;\n        -webkit-appearance: none;\n        appearance: none;\n        background: #e5e5e5;\n        border-radius: 4px;\n        outline: none;\n        cursor: pointer;\n    }\n    \n    .opera-planungsrechner .person-slider::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        width: 24px;\n        height: 24px;\n        background: var(--color-secondary, #B5152B);\n        border-radius: 50%;\n        cursor: pointer;\n        box-shadow: 0 2px 8px rgba(200, 16, 46, 0.3);\n    }\n    \n    .opera-planungsrechner .person-slider::-moz-range-thumb {\n        width: 24px;\n        height: 24px;\n        background: var(--color-secondary, #B5152B);\n        border-radius: 50%;\n        cursor: pointer;\n        border: none;\n    }\n    \n    .opera-planungsrechner .slider-labels {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 0.5rem;\n        font-size: 0.75rem;\n        color: #888;\n    }\n    \n    .opera-planungsrechner .quick-buttons {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n        justify-content: center;\n    }\n    \n    .opera-planungsrechner .quick-btn {\n        padding: 0.6rem 1.25rem;\n        border: 2px solid #e5e5e5;\n        border-radius: 8px;\n        background: #fff;\n        font-size: 0.9rem;\n        font-weight: 500;\n        cursor: pointer;\n        transition: all 0.2s;\n        font-family: inherit;\n        color: #1a1a2e;\n    }\n    \n    .opera-planungsrechner .quick-btn:hover {\n        border-color: var(--color-secondary, #B5152B);\n    }\n    \n    .opera-planungsrechner .quick-btn.selected {\n        border-color: var(--color-secondary, #B5152B);\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n    }\n    \n    \/* Seating Grid *\/\n    .opera-planungsrechner .seating-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n        gap: 1rem;\n    }\n    \n    .opera-planungsrechner .seating-option {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        padding: 1.25rem 1rem;\n        border: 2px solid #e5e5e5;\n        border-radius: 12px;\n        cursor: pointer;\n        transition: all 0.2s;\n        background: #fff;\n    }\n    \n    .opera-planungsrechner .seating-option:hover {\n        border-color: var(--color-secondary, #B5152B);\n        background: #fff5f6;\n    }\n    \n    .opera-planungsrechner .seating-option.selected {\n        border-color: var(--color-secondary, #B5152B);\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n    }\n    \n    .opera-planungsrechner .seating-icon {\n        width: 64px;\n        height: 64px;\n        margin-bottom: 0.75rem;\n        opacity: 0.8;\n        transition: opacity 0.2s;\n    }\n    \n    .opera-planungsrechner .seating-option.selected .seating-icon {\n        filter: brightness(0) invert(1);\n    }\n    \n    .opera-planungsrechner .seating-name {\n        font-weight: 600;\n        font-size: 0.95rem;\n        margin-bottom: 0.25rem;\n    }\n    \n    .opera-planungsrechner .seating-factor {\n        font-size: 0.8rem;\n        opacity: 0.7;\n    }\n    \n    \/* Event Grid *\/\n    .opera-planungsrechner .event-section {\n        margin-bottom: 1.5rem;\n    }\n    \n    .opera-planungsrechner .event-section-title {\n        font-size: 0.8rem;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: #888;\n        margin-bottom: 1rem;\n        font-weight: 600;\n    }\n    \n    .opera-planungsrechner .event-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\n        gap: 1rem;\n    }\n    \n    .opera-planungsrechner .event-option {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        padding: 1.25rem 0.75rem;\n        border: 2px solid #e5e5e5;\n        border-radius: 12px;\n        cursor: pointer;\n        transition: all 0.2s;\n        background: #fff;\n        text-align: center;\n    }\n    \n    .opera-planungsrechner .event-option:hover {\n        border-color: var(--color-secondary, #B5152B);\n        background: #fff5f6;\n    }\n    \n    .opera-planungsrechner .event-option.selected {\n        border-color: var(--color-secondary, #B5152B);\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n    }\n    \n    .opera-planungsrechner .event-icon {\n        width: 48px;\n        height: 48px;\n        margin-bottom: 0.5rem;\n    }\n    \n    .opera-planungsrechner .event-icon svg {\n        width: 100%;\n        height: 100%;\n    }\n    \n    .opera-planungsrechner .event-option.selected .event-icon svg {\n        stroke: #fff;\n    }\n    \n    .opera-planungsrechner .event-label {\n        font-weight: 600;\n        font-size: 0.9rem;\n    }\n    \n    .opera-planungsrechner .event-desc {\n        font-size: 0.75rem;\n        opacity: 0.7;\n        margin-top: 0.25rem;\n    }\n    \n    \/* Variant Toggle *\/\n    .opera-planungsrechner .variant-section {\n        padding-top: 1.5rem;\n        border-top: 1px solid #eee;\n    }\n    \n    .opera-planungsrechner .variant-toggle {\n        display: flex;\n        gap: 0.5rem;\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n    \n    .opera-planungsrechner .variant-btn {\n        padding: 0.75rem 1.5rem;\n        border: 2px solid #e5e5e5;\n        border-radius: 8px;\n        background: #fff;\n        font-size: 0.9rem;\n        font-weight: 500;\n        cursor: pointer;\n        transition: all 0.2s;\n        font-family: inherit;\n        color: #1a1a2e;\n    }\n    \n    .opera-planungsrechner .variant-btn:hover {\n        border-color: var(--color-secondary, #B5152B);\n    }\n    \n    .opera-planungsrechner .variant-btn.selected {\n        border-color: var(--color-secondary, #B5152B);\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n    }\n    \n    \/* Calculate Button *\/\n    .opera-planungsrechner .calculate-btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.75rem;\n        width: 100%;\n        padding: 1.25rem 2rem;\n        border: none;\n        border-radius: 12px;\n        background: linear-gradient(135deg, var(--color-secondary, #B5152B) 0%, #5a1018 100%);\n        color: #fff;\n        font-size: 1.1rem;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.25s;\n        font-family: inherit;\n        box-shadow: 0 4px 20px rgba(200, 16, 46, 0.3);\n    }\n    \n    .opera-planungsrechner .calculate-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 8px 30px rgba(200, 16, 46, 0.4);\n    }\n    \n    .opera-planungsrechner .calculate-btn:disabled {\n        background: #ccc;\n        cursor: not-allowed;\n        transform: none;\n        box-shadow: none;\n    }\n    \n    \/* Results *\/\n    .opera-planungsrechner .results-section {\n        margin-top: 3rem;\n        display: none;\n    }\n    \n    .opera-planungsrechner .results-section.visible {\n        display: block;\n        animation: pr-slideDown 0.4s ease;\n    }\n    \n    .opera-planungsrechner .results-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: 1.5rem;\n        flex-wrap: wrap;\n        gap: 1rem;\n    }\n    \n    .opera-planungsrechner .results-title {\n        font-size: 1.5rem;\n        font-weight: 700;\n        color: #1a1a2e;\n        margin: 0;\n    }\n    \n    .opera-planungsrechner .results-count {\n        background: #f0f0f0;\n        padding: 0.5rem 1rem;\n        border-radius: 20px;\n        font-size: 0.85rem;\n        color: #666;\n    }\n    \n    .opera-planungsrechner .results-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n        gap: 1.5rem;\n    }\n    \n    .opera-planungsrechner .result-card {\n        background: #fff;\n        border-radius: 16px;\n        box-shadow: 0 4px 24px rgba(0,0,0,0.08);\n        overflow: hidden;\n        transition: all 0.25s;\n    }\n    \n    .opera-planungsrechner .result-card:hover {\n        transform: translateY(-4px);\n        box-shadow: 0 12px 40px rgba(0,0,0,0.12);\n    }\n    \n    .opera-planungsrechner .result-card.recommended {\n        border: 2px solid var(--color-secondary, #B5152B);\n    }\n    \n    .opera-planungsrechner .result-badge {\n        background: linear-gradient(135deg, var(--color-secondary, #B5152B) 0%, #5a1018 100%);\n        color: #fff;\n        text-align: center;\n        padding: 0.5rem;\n        font-size: 0.75rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n    }\n    \n    .opera-planungsrechner .result-badge.combi-badge {\n        background: linear-gradient(135deg, #2d5f8a 0%, #1a3d5c 100%);\n    }\n    \n    .opera-planungsrechner .result-content {\n        padding: 1.5rem;\n    }\n    \n    .opera-planungsrechner .result-system {\n        display: flex;\n        align-items: center;\n        gap: 0.75rem;\n        margin-bottom: 1rem;\n    }\n    \n    .opera-planungsrechner .system-icon {\n        width: 48px;\n        height: 48px;\n        background: #F0EFE8;\n        border-radius: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 1.5rem;\n    }\n    \n    .opera-planungsrechner .system-info h4 {\n        font-size: 1.1rem;\n        font-weight: 600;\n        color: #1a1a2e;\n        margin: 0 0 0.25rem 0;\n    }\n    \n    .opera-planungsrechner .system-info p {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 0;\n    }\n    \n    .opera-planungsrechner .result-specs {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 1rem;\n        padding-top: 1rem;\n        border-top: 1px solid #f0f0f0;\n    }\n    \n    .opera-planungsrechner .spec-box {\n        text-align: center;\n        padding: 0.75rem;\n        background: #f8f8f8;\n        border-radius: 8px;\n    }\n    \n    .opera-planungsrechner .spec-box .value {\n        font-size: 1.25rem;\n        font-weight: 700;\n        color: #1a1a2e;\n    }\n    \n    .opera-planungsrechner .spec-box .label {\n        font-size: 0.7rem;\n        color: #888;\n        text-transform: uppercase;\n        letter-spacing: 0.03em;\n    }\n    \n    .opera-planungsrechner .result-capacity {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-top: 1rem;\n        padding: 0.75rem;\n        background: #f0fdf4;\n        border-radius: 8px;\n    }\n    \n    .opera-planungsrechner .capacity-label {\n        font-size: 0.85rem;\n        color: #166534;\n    }\n    \n    .opera-planungsrechner .capacity-value {\n        font-weight: 700;\n        color: #166534;\n    }\n    \n    \/* Result Actions \/ Links *\/\n    .opera-planungsrechner .result-actions {\n        margin-top: 0.75rem;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n    }\n    \n    .opera-planungsrechner .result-link {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.35rem;\n        padding: 0.5rem 0.9rem;\n        font-size: 0.8rem;\n        font-weight: 600;\n        border-radius: 6px;\n        text-decoration: none;\n        transition: background 0.2s, transform 0.15s;\n        cursor: pointer;\n        border: none;\n        font-family: inherit;\n    }\n    \n    .opera-planungsrechner .result-link-inquiry {\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n    }\n    \n    .opera-planungsrechner .result-link-inquiry:hover {\n        background: var(--color-secondary-hover, #9A1225);\n        transform: translateY(-1px);\n    }\n    \n    .opera-planungsrechner .result-link-view {\n        background: #f0f0f0;\n        color: #1a1a2e;\n    }\n    \n    .opera-planungsrechner .result-link-view:hover {\n        background: #D5D3C8;\n        transform: translateY(-1px);\n    }\n    \n    .opera-planungsrechner .result-card.recommended .result-link-inquiry {\n        background: #1a1a2e;\n    }\n    \n    .opera-planungsrechner .result-card.recommended .result-link-inquiry:hover {\n        background: #2d2d44;\n    }\n    \n    \/* Info Box *\/\n    .opera-planungsrechner .info-box {\n        margin-top: 2rem;\n        padding: 1rem 1.25rem;\n        background: #f8f8f8;\n        border-radius: 8px;\n        font-size: 0.85rem;\n        color: #666;\n        line-height: 1.6;\n    }\n    \n    .opera-planungsrechner .info-box strong {\n        color: #1a1a2e;\n    }\n    \n    \/* No Results *\/\n    .opera-planungsrechner .no-results {\n        text-align: center;\n        padding: 3rem 2rem;\n        background: #fff5f6;\n        border-radius: 16px;\n    }\n    \n    .opera-planungsrechner .no-results-icon {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n    }\n    \n    .opera-planungsrechner .no-results h4 {\n        font-size: 1.25rem;\n        color: #1a1a2e;\n        margin: 0 0 0.5rem 0;\n    }\n    \n    .opera-planungsrechner .no-results p {\n        color: #666;\n        margin: 0;\n    }\n    \n    \/* Variant Grid (simplified Step 3) *\/\n    .opera-planungsrechner .variant-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 1rem;\n    }\n    \n    .opera-planungsrechner .variant-card {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        padding: 1.5rem 1rem;\n        border: 2px solid #e5e5e5;\n        border-radius: 12px;\n        cursor: pointer;\n        transition: all 0.2s;\n        background: #fff;\n        text-align: center;\n    }\n    \n    .opera-planungsrechner .variant-card:hover {\n        border-color: var(--color-secondary, #B5152B);\n        background: #fff5f6;\n    }\n    \n    .opera-planungsrechner .variant-card.selected {\n        border-color: var(--color-secondary, #B5152B);\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n    }\n    \n    .opera-planungsrechner .variant-card .variant-icon {\n        width: 56px;\n        height: 56px;\n        margin-bottom: 0.75rem;\n    }\n    \n    .opera-planungsrechner .variant-card .variant-icon svg {\n        width: 100%;\n        height: 100%;\n    }\n    \n    .opera-planungsrechner .variant-card.selected .variant-icon svg {\n        stroke: #fff;\n    }\n    \n    .opera-planungsrechner .variant-card .variant-name {\n        font-weight: 600;\n        font-size: 0.95rem;\n    }\n    \n    .opera-planungsrechner .variant-card .variant-desc {\n        font-size: 0.75rem;\n        opacity: 0.7;\n        margin-top: 0.25rem;\n    }\n    \n    \/* Inquiry Modal *\/\n    .pr-inquiry-overlay {\n        display: none;\n        position: fixed;\n        inset: 0;\n        background: rgba(0,0,0,0.6);\n        z-index: 9999;\n        align-items: center;\n        justify-content: center;\n        padding: 1rem;\n    }\n    \n    .pr-inquiry-overlay.visible {\n        display: flex;\n    }\n    \n    .pr-inquiry-modal {\n        background: #fff;\n        border-radius: 16px;\n        padding: 2.5rem;\n        max-width: 640px;\n        width: 100%;\n        position: relative;\n        max-height: 90vh;\n        overflow-y: auto;\n    }\n    \n    .pr-inquiry-close {\n        position: absolute;\n        top: 1rem;\n        right: 1.25rem;\n        border: none;\n        background: none;\n        font-size: 1.5rem;\n        cursor: pointer;\n        color: #888;\n        line-height: 1;\n    }\n    \n    .pr-inquiry-modal h3 {\n        font-size: 1.5rem;\n        margin-bottom: 0.25rem;\n    }\n    \n    .pr-inquiry-subtitle {\n        color: #888;\n        font-size: 0.9rem;\n        margin-bottom: 1.5rem;\n    }\n    \n    .pr-inquiry-summary {\n        background: #f8f7f5;\n        border-radius: 10px;\n        padding: 1rem 1.25rem;\n        margin-bottom: 1.5rem;\n        font-size: 0.9rem;\n        line-height: 1.7;\n    }\n    \n    .pr-inquiry-summary strong {\n        color: var(--color-secondary, #B5152B);\n    }\n    \n    .pr-inquiry-accessories {\n        margin-bottom: 1.5rem;\n    }\n    \n    .pr-accessories-title {\n        font-size: 0.8rem;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        font-weight: 600;\n        color: #888;\n        margin-bottom: 0.75rem;\n    }\n    \n    .pr-accessories-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 0.5rem;\n    }\n    \n    .pr-accessory-check {\n        display: flex;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 0.55rem 0.75rem;\n        border: 2px solid #e5e5e5;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.15s;\n        font-size: 0.9rem;\n    }\n    \n    .pr-accessory-check:hover {\n        border-color: var(--color-secondary, #B5152B);\n        background: #fff5f6;\n    }\n    \n    .pr-accessory-check:has(input:checked) {\n        border-color: var(--color-secondary, #B5152B);\n        background: #fff0f2;\n    }\n    \n    .pr-accessory-check input[type=\"checkbox\"] {\n        accent-color: var(--color-secondary, #B5152B);\n        width: 16px;\n        height: 16px;\n        flex-shrink: 0;\n    }\n    \n    .pr-accessory-check span {\n        line-height: 1.2;\n    }\n    \n    .pr-form-row {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 1rem;\n        margin-bottom: 1rem;\n    }\n    \n    .pr-form-group label {\n        display: block;\n        font-size: 0.8rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        color: #888;\n        margin-bottom: 0.4rem;\n    }\n    \n    .pr-form-group input,\n    .pr-form-group textarea {\n        width: 100%;\n        padding: 0.65rem 0.9rem;\n        border: 2px solid #e5e5e5;\n        border-radius: 8px;\n        font-family: inherit;\n        font-size: 0.95rem;\n        transition: border-color 0.2s;\n        box-sizing: border-box;\n    }\n    \n    .pr-form-group input:focus,\n    .pr-form-group textarea:focus {\n        outline: none;\n        border-color: var(--color-secondary, #B5152B);\n    }\n    \n    .pr-form-full {\n        margin-bottom: 1.5rem;\n    }\n    \n    .pr-inquiry-submit {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n        width: 100%;\n        padding: 0.9rem;\n        background: var(--color-secondary, #B5152B);\n        color: #fff;\n        border: none;\n        border-radius: 10px;\n        font-size: 1rem;\n        font-weight: 600;\n        font-family: inherit;\n        cursor: pointer;\n        transition: background 0.2s;\n    }\n    \n    .pr-inquiry-submit:hover {\n        background: #5a1018;\n    }\n    \n    .pr-inquiry-success {\n        text-align: center;\n        padding: 2rem 0;\n    }\n    \n    .pr-success-icon {\n        width: 60px;\n        height: 60px;\n        margin: 0 auto 1rem;\n        background: #28a745;\n        color: #fff;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 1.5rem;\n    }\n    \n    .pr-inquiry-success h4 {\n        font-size: 1.25rem;\n        margin-bottom: 0.5rem;\n    }\n    \n    .pr-inquiry-success p {\n        color: #666;\n    }\n\n    \/* Responsive *\/\n    @media (max-width: 600px) {\n        .opera-planungsrechner {\n            padding: 2rem 1rem;\n        }\n        \n        .opera-planungsrechner .step-header {\n            padding: 1.25rem;\n        }\n        \n        .opera-planungsrechner .step-content {\n            padding: 0 1.25rem 1.25rem;\n        }\n        \n        .opera-planungsrechner .person-number-input {\n            font-size: 2rem;\n            width: 120px;\n        }\n        \n        .opera-planungsrechner .seating-grid {\n            grid-template-columns: repeat(2, 1fr);\n        }\n        \n        .opera-planungsrechner .variant-grid {\n            grid-template-columns: 1fr;\n        }\n        \n        .opera-planungsrechner .results-grid {\n            grid-template-columns: 1fr;\n        }\n        \n        .pr-form-row {\n            grid-template-columns: 1fr;\n        }\n        \n        .pr-accessories-grid {\n            grid-template-columns: 1fr;\n        }\n        \n        .pr-inquiry-modal {\n            padding: 1.5rem;\n        }\n    }\n    <\/style>\n\n    <section class=\"opera-planungsrechner\" id=\"opera-planungsrechner\">\n                <header class=\"calculator-header\">\n            <h2>Planning Calculator<\/h2>\n            <p>Find the right tent for your number of guests<\/p>\n        <\/header>\n        \n        <div class=\"steps-container\">\n            <!-- Step 1: Personenzahl -->\n            <div class=\"step-card active\" id=\"pr-step1\">\n                <div class=\"step-header\" data-step=\"1\">\n                    <span class=\"step-number\">1<\/span>\n                    <div class=\"step-info\">\n                        <h3 class=\"step-title\">How many guests do you expect?<\/h3>\n                        <p class=\"step-subtitle\" id=\"pr-step1-subtitle\">Enter number of persons<\/p>\n                        <p class=\"step-value\" id=\"pr-step1-value\" style=\"display: none;\"><\/p>\n                    <\/div>\n                    <div class=\"step-toggle\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"step-content\">\n                    <div class=\"person-input-container\">\n                        <div class=\"person-display\">\n                            <svg class=\"person-icon\" viewBox=\"0 0 48 48\" fill=\"none\" stroke=\"#1a1a2e\" stroke-width=\"2\">\n                                <circle cx=\"16\" cy=\"12\" r=\"6\"\/>\n                                <path d=\"M6 36c0-5.5 4.5-10 10-10s10 4.5 10 10\"\/>\n                                <circle cx=\"32\" cy=\"12\" r=\"6\"\/>\n                                <path d=\"M26 36c0-5.5 4.5-10 10-10s6 4.5 6 10\"\/>\n                            <\/svg>\n                            <input type=\"number\" class=\"person-number-input\" id=\"pr-personCount\" value=\"100\" min=\"10\" max=\"2000\">\n                            <span class=\"person-label\">Persons<\/span>\n                        <\/div>\n                        \n                        <div class=\"slider-container\">\n                            <input type=\"range\" class=\"person-slider\" id=\"pr-personSlider\" min=\"10\" max=\"2000\" value=\"100\" step=\"10\">\n                            <div class=\"slider-labels\">\n                                <span>10<\/span>\n                                <span>500<\/span>\n                                <span>1000<\/span>\n                                <span>1500<\/span>\n                                <span>2000<\/span>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"quick-buttons\">\n                            <button class=\"quick-btn\" data-value=\"50\">50<\/button>\n                            <button class=\"quick-btn selected\" data-value=\"100\">100<\/button>\n                            <button class=\"quick-btn\" data-value=\"150\">150<\/button>\n                            <button class=\"quick-btn\" data-value=\"200\">200<\/button>\n                            <button class=\"quick-btn\" data-value=\"300\">300<\/button>\n                            <button class=\"quick-btn\" data-value=\"500\">500<\/button>\n                            <button class=\"quick-btn\" data-value=\"1000\">1000<\/button>\n                            <button class=\"quick-btn\" data-value=\"1500\">1500<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Step 2: Bestuhlung -->\n            <div class=\"step-card\" id=\"pr-step2\">\n                <div class=\"step-header\" data-step=\"2\">\n                    <span class=\"step-number\">2<\/span>\n                    <div class=\"step-info\">\n                        <h3 class=\"step-title\">What seating?<\/h3>\n                        <p class=\"step-subtitle\" id=\"pr-step2-subtitle\">Select table and chair configuration<\/p>\n                        <p class=\"step-value\" id=\"pr-step2-value\" style=\"display: none;\"><\/p>\n                    <\/div>\n                    <div class=\"step-toggle\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"step-content\">\n                    <div class=\"seating-grid\" id=\"pr-seatingGrid\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Step 3: Zeltvariante -->\n            <div class=\"step-card\" id=\"pr-step3\">\n                <div class=\"step-header\" data-step=\"3\">\n                    <span class=\"step-number\">3<\/span>\n                    <div class=\"step-info\">\n                        <h3 class=\"step-title\">Which tent variant?<\/h3>\n                        <p class=\"step-subtitle\" id=\"pr-step3-subtitle\">Open, partially or fully closed<\/p>\n                        <p class=\"step-value\" id=\"pr-step3-value\" style=\"display: none;\"><\/p>\n                    <\/div>\n                    <div class=\"step-toggle\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 9l6 6 6-6\"\/><\/svg>\n                    <\/div>\n                <\/div>\n                <div class=\"step-content\">\n                    <div class=\"variant-grid\" id=\"pr-variantGrid\"><\/div>\n                <\/div>\n            <\/div>\n\n            <button class=\"calculate-btn\" id=\"pr-calculateBtn\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\/><\/svg>\n                Find Matching Tents            <\/button>\n        <\/div>\n\n        <div class=\"results-section\" id=\"pr-resultsSection\">\n            <div class=\"results-header\">\n                <h3 class=\"results-title\" id=\"pr-resultsTitle\">Matching tent configurations<\/h3>\n                <span class=\"results-count\" id=\"pr-resultsCount\"><\/span>\n            <\/div>\n            <div class=\"results-grid\" id=\"pr-resultsGrid\"><\/div>\n        <\/div>\n\n        <!-- Anfrage Modal -->\n        <div class=\"pr-inquiry-overlay\" id=\"pr-inquiryOverlay\">\n            <div class=\"pr-inquiry-modal\">\n                <button class=\"pr-inquiry-close\" id=\"pr-inquiryClose\">&times;<\/button>\n                <h3>Start Inquiry<\/h3>\n                <p class=\"pr-inquiry-subtitle\">Your configuration will be transmitted automatically.<\/p>\n                \n                <div class=\"pr-inquiry-summary\" id=\"pr-inquirySummary\"><\/div>\n                \n                <div class=\"pr-inquiry-accessories\">\n                    <div class=\"pr-accessories-title\">Gew\u00fcnschtes Zubeh\u00f6r<\/div>\n                    <div class=\"pr-accessories-grid\">\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"Bodenplattform\"><span>Bodenplattform<\/span><\/label>\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"Beleuchtung\"><span>Beleuchtung<\/span><\/label>\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"Klimatisierung \/ Heizung\"><span>Klimatisierung \/ Heizung<\/span><\/label>\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"Branding \/ Folienplot\"><span>Branding \/ Folienplot<\/span><\/label>\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"M\u00f6blierung\"><span>M\u00f6blierung<\/span><\/label>\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"B\u00fchnentechnik \/ OnStage\"><span>B\u00fchnentechnik \/ OnStage<\/span><\/label>\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"Treppenanlage\"><span>Treppenanlage<\/span><\/label>\n                        <label class=\"pr-accessory-check\"><input type=\"checkbox\" value=\"Sonstiges\"><span>Sonstiges<\/span><\/label>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"pr-inquiry-form\" id=\"pr-inquiryForm\">\n                    <div class=\"pr-form-row\">\n                        <div class=\"pr-form-group\">\n                            <label>Company *<\/label>\n                            <input type=\"text\" id=\"pr-inqCompany\" required placeholder=\"Company \/ Organization\">\n                        <\/div>\n                        <div class=\"pr-form-group\">\n                            <label>Contact Person *<\/label>\n                            <input type=\"text\" id=\"pr-inqName\" required placeholder=\"Vor- und Nachname\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"pr-form-row\">\n                        <div class=\"pr-form-group\">\n                            <label>Email *<\/label>\n                            <input type=\"email\" id=\"pr-inqEmail\" required placeholder=\"ihre@email.de\">\n                        <\/div>\n                        <div class=\"pr-form-group\">\n                            <label>Phone<\/label>\n                            <input type=\"tel\" id=\"pr-inqPhone\" placeholder=\"+49 ...\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"pr-form-group pr-form-full\">\n                        <label>Message \/ Notes<\/label>\n                        <textarea id=\"pr-inqMessage\" rows=\"3\" placeholder=\"Geplantes Datum, besondere W\u00fcnsche, Fragen...\"><\/textarea>\n                    <\/div>\n                    <button class=\"pr-inquiry-submit\" id=\"pr-inquirySubmit\">\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 2L11 13\"\/><path d=\"M22 2l-7 20-4-9-9-4 20-7z\"\/><\/svg>\n                        Submit Inquiry                    <\/button>\n                <\/div>\n                \n                <div class=\"pr-inquiry-success\" id=\"pr-inquirySuccess\" style=\"display:none;\">\n                    <div class=\"pr-success-icon\">&#10003;<\/div>\n                    <h4>Thank you for your inquiry!<\/h4>\n                    <p>We will get back to you as soon as possible.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"info-box\">\n            <strong>Calculation Factors:<\/strong> \n            Beer Bench Set = 0,7 m\u00b2\/pers. \u00b7 \n            Round Table (10 seats) = 2,2 m\u00b2\/pers. \u00b7 \n            Row seating = 0,9 m\u00b2\/pers. \u00b7 \n            Standing Table (6 pers.) = 1,2 m\u00b2\/pers. \u00b7 \n            Standing = 0,5 m\u00b2\/pers.        <\/div>\n    <\/section>\n\n    <script>\n    (function() {\n        const container = document.getElementById('opera-planungsrechner');\n        if (!container) return;\n\n        \/\/ Data\n        \/\/ Translations (injected from PHP)\n        const i18n = {\"biertisch\":\"Beer Bench Set\",\"rundtisch\":\"Round Table\",\"stuhlreihe\":\"Row seating\",\"stehtisch\":\"Standing Table\",\"stehend\":\"Standing\",\"offen\":\"Open\",\"teilgeschlossen\":\"Partially closed\",\"geschlossen\":\"Closed\",\"ohne_seitenwaende\":\"Without side walls\",\"teilweise_seitenwaende\":\"Partial side walls\",\"vollstaendig_geschlossen\":\"Fully closed\",\"empfehlung\":\"Recommendation\",\"max_kapazitaet\":\"Max. Capacity\",\"anfrage_starten\":\"Start Inquiry\",\"keine_passend\":\"No matching tents found\",\"fuer_personen\":\"For %d persons with %s you need approx. %d m\u00b2.\",\"kontaktieren\":\"Please contact us for customized solutions.\",\"konfiguration\":\"Configuration:\",\"flaeche\":\"Area:\",\"gaeste\":\"Guests:\",\"bestuhlung_label\":\"Seating:\",\"zeltvariante\":\"Tent Variant:\",\"personen\":\"Persons\",\"passt_gut\":\"Good Fit\",\"knapp\":\"Knapp (\u00b110%)\",\"zu_klein\":\"Too Small\",\"passende_zeltkonfigurationen\":\"Matching tent configurations\",\"konfigurationen_gefunden\":\"Configurations found\",\"konfiguration_gefunden\":\"Configuration found\",\"m2_gesamt\":\"m\u00b2 Total\",\"auslastung\":\"Utilization\",\"variante_ansehen\":\"View Variant\",\"ansehen\":\"view\",\"kombination\":\"Combination\",\"mehrere_zelte\":\"Multiple tents combined\",\"ihre_konfiguration\":\"Your configuration will be transmitted automatically.\",\"m2_pers\":\"m\u00b2\\\/pers.\"};\n\n        const seatingTypes = [\n            { id: 'biertisch', name: i18n.biertisch, factor: 0.7, icon: 'biertisch' },\n            { id: 'rundtisch', name: i18n.rundtisch, factor: 2.2, icon: 'rundtisch' },\n            { id: 'stuhlreihe', name: i18n.stuhlreihe, factor: 0.9, icon: 'stuhlreihe' },\n            { id: 'stehtisch', name: i18n.stehtisch, factor: 1.2, icon: 'stehtisch' },\n            { id: 'stehend', name: i18n.stehend, factor: 0.5, icon: 'stehend' }\n        ];\n\n        const variantTypes = [\n            { id: 'open', name: i18n.offen, desc: i18n.ohne_seitenwaende, icon: 'open' },\n            { id: 'partial', name: i18n.teilgeschlossen, desc: i18n.teilweise_seitenwaende, icon: 'partial' },\n            { id: 'closed', name: i18n.geschlossen, desc: i18n.vollstaendig_geschlossen, icon: 'closed' }\n        ];\n\n        \/\/ Tent configurations - usable areas in m\u00b2 (from central Planungsdaten)\n        const tentConfigs = [{\"system\":\"Single\",\"size\":\"6\\u00d77\",\"area\":32,\"multiplier\":1},{\"system\":\"Single\",\"size\":\"10\\u00d712\",\"area\":90,\"multiplier\":1},{\"system\":\"Single\",\"size\":\"15\\u00d717\",\"area\":190,\"multiplier\":1},{\"system\":\"Single\",\"size\":\"18\\u00d721\",\"area\":286,\"multiplier\":1},{\"system\":\"Duo\",\"size\":\"10\\u00d712\",\"area\":243,\"multiplier\":2},{\"system\":\"Duo\",\"size\":\"15\\u00d717\",\"area\":492,\"multiplier\":2},{\"system\":\"Duo\",\"size\":\"18\\u00d721\",\"area\":740,\"multiplier\":2},{\"system\":\"Triple\",\"size\":\"10\\u00d712\",\"area\":405,\"multiplier\":3},{\"system\":\"Triple\",\"size\":\"15\\u00d717\",\"area\":801,\"multiplier\":3},{\"system\":\"Triple\",\"size\":\"18\\u00d721\",\"area\":1155,\"multiplier\":3},{\"system\":\"Quadro\",\"size\":\"10\\u00d712\",\"area\":569,\"multiplier\":4},{\"system\":\"Quadro\",\"size\":\"15\\u00d717\",\"area\":1102,\"multiplier\":4},{\"system\":\"Quadro\",\"size\":\"18\\u00d721\",\"area\":1460,\"multiplier\":4}];\n\n        \/\/ State\n        let state = {\n            persons: 100,\n            seating: null,\n            variant: null,\n            selectedResult: null\n        };\n\n        \/\/ Icons as simple SVGs\n        const icons = {\n            biertisch: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"12\" y=\"20\" width=\"40\" height=\"6\" rx=\"1\"\/><rect x=\"12\" y=\"38\" width=\"40\" height=\"6\" rx=\"1\"\/><rect x=\"20\" y=\"28\" width=\"24\" height=\"8\" rx=\"1\"\/><\/svg>',\n            rundtisch: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"32\" cy=\"32\" r=\"16\"\/><circle cx=\"32\" cy=\"12\" r=\"4\"\/><circle cx=\"32\" cy=\"52\" r=\"4\"\/><circle cx=\"12\" cy=\"32\" r=\"4\"\/><circle cx=\"52\" cy=\"32\" r=\"4\"\/><circle cx=\"18\" cy=\"18\" r=\"4\"\/><circle cx=\"46\" cy=\"46\" r=\"4\"\/><circle cx=\"46\" cy=\"18\" r=\"4\"\/><circle cx=\"18\" cy=\"46\" r=\"4\"\/><\/svg>',\n            stuhlreihe: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"8\" y=\"24\" width=\"10\" height=\"16\" rx=\"2\"\/><rect x=\"27\" y=\"24\" width=\"10\" height=\"16\" rx=\"2\"\/><rect x=\"46\" y=\"24\" width=\"10\" height=\"16\" rx=\"2\"\/><\/svg>',\n            stehtisch: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"32\" cy=\"32\" r=\"12\"\/><line x1=\"32\" y1=\"44\" x2=\"32\" y2=\"56\"\/><line x1=\"24\" y1=\"56\" x2=\"40\" y2=\"56\"\/><\/svg>',\n            stehend: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"32\" cy=\"16\" r=\"6\"\/><line x1=\"32\" y1=\"22\" x2=\"32\" y2=\"42\"\/><line x1=\"32\" y1=\"28\" x2=\"22\" y2=\"36\"\/><line x1=\"32\" y1=\"28\" x2=\"42\" y2=\"36\"\/><line x1=\"32\" y1=\"42\" x2=\"24\" y2=\"56\"\/><line x1=\"32\" y1=\"42\" x2=\"40\" y2=\"56\"\/><\/svg>',\n            open: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M8 52V20l24-8 24 8v32\"\/><path d=\"M8 20l24 6 24-6\"\/><\/svg>',\n            partial: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M8 52V20l24-8 24 8v32\"\/><path d=\"M8 20l24 6 24-6\"\/><line x1=\"8\" y1=\"20\" x2=\"8\" y2=\"52\"\/><line x1=\"8\" y1=\"52\" x2=\"32\" y2=\"52\"\/><\/svg>',\n            closed: '<svg viewBox=\"0 0 64 64\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M8 52V20l24-8 24 8v32H8z\"\/><path d=\"M8 20l24 6 24-6\"\/><\/svg>'\n        };\n\n        const systemIcons = {\n            'Single': '\ud83d\udd37',\n            'Duo': '\ud83d\udd36',\n            'Triple': '\ud83d\udd3a',\n            'Quadro': '\u2b1b'\n        };\n\n        const systemUrls = {\n            'Single': 'https:\/\/www.opera-tent.com\/en\/zeltsysteme\/single\/',\n            'Duo': 'https:\/\/www.opera-tent.com\/en\/zeltsysteme\/duo\/',\n            'Triple': 'https:\/\/www.opera-tent.com\/en\/zeltsysteme\/triple\/',\n            'Quadro': 'https:\/\/www.opera-tent.com\/en\/zeltsysteme\/quadro\/',\n            'Multi': 'https:\/\/www.opera-tent.com\/en\/zeltsysteme\/multi\/'\n        };\n\n        \/\/ Initialize UI\n        function init() {\n            renderSeatingGrid();\n            renderVariantGrid();\n            setupEventListeners();\n        }\n\n        function renderSeatingGrid() {\n            const grid = container.querySelector('#pr-seatingGrid');\n            grid.innerHTML = seatingTypes.map(s => `\n                <div class=\"seating-option\" data-seating=\"${s.id}\">\n                    <div class=\"seating-icon\">${icons[s.icon]}<\/div>\n                    <div class=\"seating-name\">${s.name}<\/div>\n                    <div class=\"seating-factor\">${s.factor} ${i18n.m2_pers}<\/div>\n                <\/div>\n            `).join('');\n        }\n\n        function renderVariantGrid() {\n            const grid = container.querySelector('#pr-variantGrid');\n            grid.innerHTML = variantTypes.map(v => `\n                <div class=\"variant-card\" data-variant=\"${v.id}\">\n                    <div class=\"variant-icon\">${icons[v.icon]}<\/div>\n                    <div class=\"variant-name\">${v.name}<\/div>\n                    <div class=\"variant-desc\">${v.desc}<\/div>\n                <\/div>\n            `).join('');\n        }\n\n        function setupEventListeners() {\n            \/\/ Person count\n            const personInput = container.querySelector('#pr-personCount');\n            const personSlider = container.querySelector('#pr-personSlider');\n            \n            personInput.addEventListener('input', (e) => {\n                state.persons = parseInt(e.target.value) || 10;\n                personSlider.value = state.persons;\n                updateQuickButtons();\n            });\n            \n            personSlider.addEventListener('input', (e) => {\n                state.persons = parseInt(e.target.value);\n                personInput.value = state.persons;\n                updateQuickButtons();\n            });\n\n            \/\/ Quick buttons\n            container.querySelectorAll('.quick-btn').forEach(btn => {\n                btn.addEventListener('click', () => {\n                    state.persons = parseInt(btn.dataset.value);\n                    personInput.value = state.persons;\n                    personSlider.value = state.persons;\n                    updateQuickButtons();\n                });\n            });\n\n            \/\/ Seating selection\n            container.querySelector('#pr-seatingGrid').addEventListener('click', (e) => {\n                const option = e.target.closest('.seating-option');\n                if (option) {\n                    container.querySelectorAll('.seating-option').forEach(o => o.classList.remove('selected'));\n                    option.classList.add('selected');\n                    state.seating = option.dataset.seating;\n                    updateStepValue(2);\n                }\n            });\n\n            \/\/ Variant selection (simplified Step 3)\n            container.querySelector('#pr-variantGrid').addEventListener('click', (e) => {\n                const card = e.target.closest('.variant-card');\n                if (card) {\n                    container.querySelectorAll('.variant-card').forEach(c => c.classList.remove('selected'));\n                    card.classList.add('selected');\n                    state.variant = card.dataset.variant;\n                    updateStepValue(3);\n                }\n            });\n\n            \/\/ Step headers\n            container.querySelectorAll('.step-header').forEach(header => {\n                header.addEventListener('click', () => {\n                    const step = parseInt(header.dataset.step);\n                    toggleStep(step);\n                });\n            });\n\n            \/\/ Calculate button\n            container.querySelector('#pr-calculateBtn').addEventListener('click', calculateResults);\n            \n            \/\/ Inquiry modal\n            const overlay = document.querySelector('#pr-inquiryOverlay');\n            document.querySelector('#pr-inquiryClose').addEventListener('click', () => {\n                overlay.classList.remove('visible');\n            });\n            overlay.addEventListener('click', (e) => {\n                if (e.target === overlay) overlay.classList.remove('visible');\n            });\n            \n            \/\/ Submit inquiry\n            document.querySelector('#pr-inquirySubmit').addEventListener('click', submitInquiry);\n        }\n\n        function updateQuickButtons() {\n            container.querySelectorAll('.quick-btn').forEach(btn => {\n                btn.classList.toggle('selected', parseInt(btn.dataset.value) === state.persons);\n            });\n        }\n\n        function updateStepValue(step) {\n            if (step === 2 && state.seating) {\n                const seating = seatingTypes.find(s => s.id === state.seating);\n                container.querySelector('#pr-step2-value').textContent = seating.name;\n                container.querySelector('#pr-step2-value').style.display = 'block';\n                container.querySelector('#pr-step2-subtitle').style.display = 'none';\n            }\n            \n            if (step === 3 && state.variant) {\n                const variant = variantTypes.find(v => v.id === state.variant);\n                container.querySelector('#pr-step3-value').textContent = variant.name;\n                container.querySelector('#pr-step3-value').style.display = 'block';\n                container.querySelector('#pr-step3-subtitle').style.display = 'none';\n            }\n        }\n\n        function toggleStep(step) {\n            const stepCard = container.querySelector(`#pr-step${step}`);\n            const isActive = stepCard.classList.contains('active');\n            \n            container.querySelectorAll('.step-card').forEach(card => {\n                card.classList.remove('active');\n            });\n            \n            if (!isActive) {\n                stepCard.classList.add('active');\n            }\n        }\n\n        function calculateResults() {\n            if (!state.seating) {\n                alert('Bitte w\u00e4hlen Sie eine Bestuhlung aus.');\n                return;\n            }\n            \n            const seating = seatingTypes.find(s => s.id === state.seating);\n            const requiredArea = state.persons * seating.factor;\n            \n            \/\/ Find single-tent configurations that fit\n            const singleResults = tentConfigs\n                .filter(config => config.area >= requiredArea * 0.8)\n                .map(config => ({\n                    ...config,\n                    capacity: Math.floor(config.area \/ seating.factor),\n                    utilization: (requiredArea \/ config.area) * 100,\n                    isCombi: false,\n                    combiDetails: null\n                }))\n                .sort((a, b) => {\n                    const aFit = Math.abs(a.utilization - 85);\n                    const bFit = Math.abs(b.utilization - 85);\n                    return aFit - bFit;\n                })\n                .slice(0, 4);\n            \n            \/\/ If no single-tent fits or few results, generate multi-tent combinations\n            let combiResults = [];\n            if (singleResults.length < 3) {\n                const largestSingle = tentConfigs[tentConfigs.length - 1]; \/\/ Quadro 18x21\n                \n                if (requiredArea > largestSingle.area * 0.8) {\n                    \/\/ Try combinations of same-type tents\n                    tentConfigs.forEach(config => {\n                        for (let count = 2; count <= 6; count++) {\n                            const totalArea = config.area * count;\n                            if (totalArea >= requiredArea * 0.85 && totalArea <= requiredArea * 1.4) {\n                                combiResults.push({\n                                    system: config.system,\n                                    size: config.size,\n                                    area: totalArea,\n                                    multiplier: config.multiplier,\n                                    capacity: Math.floor(totalArea \/ seating.factor),\n                                    utilization: (requiredArea \/ totalArea) * 100,\n                                    isCombi: true,\n                                    combiCount: count,\n                                    combiDetails: count + '\u00d7 ' + config.system + ' ' + config.size\n                                });\n                            }\n                        }\n                    });\n                    \n                    \/\/ Also try mixed combinations (e.g. 1x Quadro 18x21 + 1x Duo 15x17)\n                    for (let i = 0; i < tentConfigs.length; i++) {\n                        for (let j = i; j < tentConfigs.length; j++) {\n                            const totalArea = tentConfigs[i].area + tentConfigs[j].area;\n                            if (totalArea >= requiredArea * 0.85 && totalArea <= requiredArea * 1.3) {\n                                const nameA = tentConfigs[i].system + ' ' + tentConfigs[i].size;\n                                const nameB = tentConfigs[j].system + ' ' + tentConfigs[j].size;\n                                \/\/ Skip if both are the same (already covered above)\n                                if (i === j) continue;\n                                combiResults.push({\n                                    system: 'Kombination',\n                                    size: tentConfigs[i].size + ' + ' + tentConfigs[j].size,\n                                    area: totalArea,\n                                    multiplier: 0,\n                                    capacity: Math.floor(totalArea \/ seating.factor),\n                                    utilization: (requiredArea \/ totalArea) * 100,\n                                    isCombi: true,\n                                    combiCount: 2,\n                                    combiDetails: nameA + ' + ' + nameB\n                                });\n                            }\n                        }\n                    }\n                    \n                    \/\/ Sort combis by best fit and deduplicate\n                    combiResults.sort((a, b) => {\n                        const aFit = Math.abs(a.utilization - 85);\n                        const bFit = Math.abs(b.utilization - 85);\n                        return aFit - bFit;\n                    });\n                    combiResults = combiResults.slice(0, 4);\n                }\n            }\n            \n            const allResults = [...singleResults, ...combiResults]\n                .sort((a, b) => {\n                    const aFit = Math.abs(a.utilization - 85);\n                    const bFit = Math.abs(b.utilization - 85);\n                    return aFit - bFit;\n                })\n                .slice(0, 6);\n            \n            renderResults(allResults, seating);\n        }\n\n        function renderResults(results, seating) {\n            const grid = container.querySelector('#pr-resultsGrid');\n            const section = container.querySelector('#pr-resultsSection');\n            const variantObj = variantTypes.find(v => v.id === state.variant);\n            const variantLabel = variantObj ? variantObj.name : '';\n            \n            if (results.length === 0) {\n                grid.innerHTML = `\n                    <div class=\"no-results\">\n                        <div class=\"no-results-icon\">\ud83d\udd0d<\/div>\n                        <h4>${i18n.keine_passend}<\/h4>\n                        <p>${i18n.personen}: ${state.persons}, ${seating.name} \u2014 ca. ${Math.ceil(state.persons * seating.factor)} m\u00b2.<br>${i18n.kontaktieren}<\/p>\n                    <\/div>\n                `;\n            } else {\n                grid.innerHTML = results.map((r, i) => {\n                    \/\/ System link(s)\n                    let viewLink = '';\n                    if (r.isCombi && r.combiDetails) {\n                        const systemNames = ['Single','Duo','Triple','Quadro','Multi'];\n                        const foundSystems = new Set();\n                        systemNames.forEach(name => {\n                            if (r.combiDetails.includes(name)) foundSystems.add(name);\n                        });\n                        viewLink = [...foundSystems].map(name => \n                            `<a href=\"${systemUrls[name]}\" class=\"result-link result-link-view\">${name} ${i18n.ansehen} \u2192<\/a>`\n                        ).join('');\n                    } else if (systemUrls[r.system]) {\n                        viewLink = `<a href=\"${systemUrls[r.system]}\" class=\"result-link result-link-view\">${i18n.variante_ansehen} \u2192<\/a>`;\n                    }\n                    \n                    \/\/ Inquiry button with config data\n                    const configData = JSON.stringify({\n                        system: r.isCombi ? r.combiDetails : r.system,\n                        size: r.size,\n                        area: r.area,\n                        capacity: r.capacity,\n                        isCombi: r.isCombi\n                    }).replace(\/\"\/g, '&quot;');\n                    \n                    return `\n                    <div class=\"result-card ${i === 0 ? 'recommended' : ''} ${r.isCombi ? 'is-combi' : ''}\">\n                        ${i === 0 ? '<div class=\"result-badge\">' + i18n.empfehlung + '<\/div>' : ''}\n                        ${r.isCombi ? '<div class=\"result-badge combi-badge\">' + i18n.kombination + '<\/div>' : ''}\n                        <div class=\"result-content\">\n                            <div class=\"result-system\">\n                                <div class=\"system-icon\">${r.isCombi ? '\ud83d\udd17' : systemIcons[r.system]}<\/div>\n                                <div class=\"system-info\">\n                                    <h4>${r.isCombi ? r.combiDetails : r.system}<\/h4>\n                                    <p>${r.isCombi ? i18n.mehrere_zelte : r.size + ' m'}<\/p>\n                                <\/div>\n                            <\/div>\n                            <div class=\"result-specs\">\n                                <div class=\"spec-box\">\n                                    <div class=\"value\">${r.area}<\/div>\n                                    <div class=\"label\">${i18n.m2_gesamt}<\/div>\n                                <\/div>\n                                <div class=\"spec-box\">\n                                    <div class=\"value\">${Math.round(r.utilization)}%<\/div>\n                                    <div class=\"label\">${i18n.auslastung}<\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"result-capacity\">\n                                <span class=\"capacity-label\">${i18n.max_kapazitaet} (${seating.name})<\/span>\n                                <span class=\"capacity-value\">${r.capacity} ${i18n.personen}<\/span>\n                            <\/div>\n                            <div class=\"result-actions\">\n                                <button class=\"result-link result-link-inquiry\" data-config=\"${configData}\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M22 2L11 13\"\/><path d=\"M22 2l-7 20-4-9-9-4 20-7z\"\/><\/svg>\n                                    ${i18n.anfrage_starten}\n                                <\/button>\n                                ${viewLink}\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `}).join('');\n                \n                container.querySelector('#pr-resultsCount').textContent = `${results.length} ${results.length === 1 ? i18n.konfiguration_gefunden : i18n.konfigurationen_gefunden}`;\n                \n                \/\/ Attach inquiry button listeners\n                container.querySelectorAll('.result-link-inquiry').forEach(btn => {\n                    btn.addEventListener('click', () => openInquiry(JSON.parse(btn.dataset.config)));\n                });\n            }\n            \n            section.classList.add('visible');\n            section.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        }\n        \n        function openInquiry(config) {\n            state.selectedResult = config;\n            const seating = seatingTypes.find(s => s.id === state.seating);\n            const variantObj = variantTypes.find(v => v.id === state.variant);\n            \n            \/\/ Build summary\n            const summary = document.querySelector('#pr-inquirySummary');\n            summary.innerHTML = `\n                <strong>${i18n.konfiguration}<\/strong> ${config.system}${config.size ? ' \u00b7 ' + config.size + ' m' : ''}<br>\n                <strong>${i18n.flaeche}<\/strong> ${config.area} m\u00b2<br>\n                <strong>${i18n.gaeste}<\/strong> ${state.persons} ${i18n.personen}<br>\n                <strong>${i18n.bestuhlung_label}<\/strong> ${seating ? seating.name : '\u2013'}<br>\n                <strong>${i18n.zeltvariante}<\/strong> ${variantObj ? variantObj.name : '\u2013'}\n            `;\n            \n            \/\/ Reset form\n            document.querySelector('#pr-inquiryForm').style.display = 'block';\n            document.querySelector('#pr-inquirySuccess').style.display = 'none';\n            \n            document.querySelector('#pr-inquiryOverlay').classList.add('visible');\n        }\n        \n        function submitInquiry() {\n            const company = document.querySelector('#pr-inqCompany').value.trim();\n            const name = document.querySelector('#pr-inqName').value.trim();\n            const email = document.querySelector('#pr-inqEmail').value.trim();\n            const phone = document.querySelector('#pr-inqPhone').value.trim();\n            const message = document.querySelector('#pr-inqMessage').value.trim();\n            \n            if (!company || !name || !email) {\n                alert('Bitte f\u00fcllen Sie die Pflichtfelder aus (Firma, Ansprechpartner, E-Mail).');\n                return;\n            }\n            \n            const seating = seatingTypes.find(s => s.id === state.seating);\n            const variantObj = variantTypes.find(v => v.id === state.variant);\n            const config = state.selectedResult;\n            \n            \/\/ Collect accessories\n            const accessories = [];\n            document.querySelectorAll('.pr-accessory-check input:checked').forEach(cb => {\n                accessories.push(cb.value);\n            });\n            \n            \/\/ Build mailto body\n            const subject = encodeURIComponent('Planungsrechner Anfrage \u2013 ' + config.system);\n            const body = encodeURIComponent(\n                'ANFRAGE AUS DEM PLANUNGSRECHNER\\n' +\n                '================================\\n\\n' +\n                'KONFIGURATION\\n' +\n                '- System: ' + config.system + '\\n' +\n                (config.size ? '- Gr\u00f6\u00dfe: ' + config.size + ' m\\n' : '') +\n                '- Fl\u00e4che: ' + config.area + ' m\u00b2\\n' +\n                '- Kapazit\u00e4t: ' + config.capacity + ' Personen\\n' +\n                '- G\u00e4stezahl: ' + state.persons + '\\n' +\n                '- Bestuhlung: ' + (seating ? seating.name : '\u2013') + '\\n' +\n                '- Zeltvariante: ' + (variantObj ? variantObj.name : '\u2013') + '\\n\\n' +\n                (accessories.length > 0 ? 'GEW\u00dcNSCHTES ZUBEH\u00d6R\\n- ' + accessories.join('\\n- ') + '\\n\\n' : '') +\n                'KONTAKTDATEN\\n' +\n                '- Firma: ' + company + '\\n' +\n                '- Ansprechpartner: ' + name + '\\n' +\n                '- E-Mail: ' + email + '\\n' +\n                (phone ? '- Telefon: ' + phone + '\\n' : '') +\n                (message ? '\\nNACHRICHT\\n' + message + '\\n' : '')\n            );\n            \n            \/\/ Open mailto (fallback; can be replaced with WP AJAX\/CF7 later)\n            const mailtoLink = 'mailto:info&#64;&#111;&#112;er&#97;-&#116;&#101;n&#116;&#46;&#99;o&#109;?subject=' + subject + '&body=' + body;\n            window.location.href = mailtoLink;\n            \n            \/\/ Show success\n            document.querySelector('#pr-inquiryForm').style.display = 'none';\n            document.querySelector('#pr-inquirySuccess').style.display = 'block';\n        }\n\n        \/\/ Start\n        init();\n    })();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1059","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/pages\/1059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/comments?post=1059"}],"version-history":[{"count":1,"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/pages\/1059\/revisions"}],"predecessor-version":[{"id":1060,"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/pages\/1059\/revisions\/1060"}],"wp:attachment":[{"href":"https:\/\/www.opera-tent.com\/en\/wp-json\/wp\/v2\/media?parent=1059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}