#rsvp-modal-overlay {
    position: fixed;
    z-index: 99999;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Padding für mobile Geräte */
    padding: 1rem;
    /* Smooth scrolling falls Modal höher als Viewport */
    overflow-y: auto;
}

#rsvp-modal {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 2rem 1.5rem;
    width: 100%;
    max-width: 400px;
    /* Maximale Höhe damit Modal nicht über Viewport hinausgeht */
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    /* Responsive Schriftgröße */
    font-size: 1rem;
    line-height: 1.5;
    /* Margin für bessere Zentrierung */
    margin: auto;
}

/* Responsive Überschrift */
#rsvp-modal h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Responsive Paragraph */
#rsvp-modal p {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Namens-Felder nebeneinander */
.name-fields-row {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.name-fields-row input {
    flex: 1;
    min-width: 0; /* Verhindert Overflow */
}

#rsvp-modal input[type="text"],
#rsvp-modal input[type="email"],
#rsvp-modal input[type="tel"] {
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.8rem;
    border-radius: 8px;
    border: 1.5px solid #A88047;
    font-size: 1rem;
    /* Verhindert Zoom auf iOS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

#rsvp-modal button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

#rsvp-modal button {
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    background: #A88047;
    color: #fff;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    box-sizing: border-box;
}

#rsvp-modal button:hover:not([disabled]) {
    background: #7C5C2C;
}

#rsvp-modal label {
    display: block;
    margin: 1rem 0;
    font-size: 0.95rem;
    text-align: left;
    line-height: 1.4;
}

#rsvp-modal label input[type="checkbox"] {
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* ===== LOADING SPINNER ===== */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Button mit Spinner */
#rsvp-modal button.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#rsvp-modal button.loading .loading-spinner {
    margin-right: 0;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablets (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    #rsvp-modal {
        max-width: 500px;
        padding: 2.5rem 2rem;
    }
    
    #rsvp-modal h2 {
        font-size: 1.8rem;
    }
    
    #rsvp-modal p {
        font-size: 1rem;
    }
    
    .name-fields-row {
        gap: 0.8rem;
    }
    
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        font-size: 1.1rem;
        padding: 0.9rem;
    }
    
    #rsvp-modal button {
        font-size: 1.1rem;
        padding: 0.9rem 2rem;
    }
}

/* Desktop (1025px+) */
@media screen and (min-width: 1025px) {
    #rsvp-modal {
        max-width: 450px;
        padding: 2.5rem 2rem;
    }
    
    #rsvp-modal h2 {
        font-size: 2rem;
    }
    
    #rsvp-modal p {
        font-size: 1.1rem;
    }
    
    .name-fields-row {
        gap: 1rem;
    }
    
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        font-size: 1.1rem;
        padding: 0.9rem;
    }
    
    #rsvp-modal button {
        font-size: 1.1rem;
        padding: 0.9rem 2rem;
    }
}

/* Sehr kleine Handys (max-width: 480px) */
@media screen and (max-width: 480px) {
    #rsvp-modal-overlay {
        padding: 0.5rem;
    }
    
    #rsvp-modal {
        padding: 1.5rem 1rem;
        border-radius: 12px;
        max-height: 95vh;
    }
    
    #rsvp-modal h2 {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    #rsvp-modal p {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
    }
    
    .name-fields-row {
        gap: 0.3rem;
    }
    
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        font-size: 1rem;
        padding: 0.7rem;
        margin: 0.3rem 0;
    }
    
    #rsvp-modal button {
        font-size: 1rem;
        padding: 0.8rem 1rem;
        margin-top: 0.8rem;
    }
    
    #rsvp-modal label {
        font-size: 0.9rem;
        margin: 0.8rem 0;
    }
}

/* Sehr kleine Handys (max-width: 360px) - iPhone SE, etc. */
@media screen and (max-width: 360px) {
    #rsvp-modal-overlay {
        padding: 0.3rem;
    }
    
    #rsvp-modal {
        padding: 1.2rem 0.8rem;
        max-height: 98vh;
    }
    
    #rsvp-modal h2 {
        font-size: 1.2rem;
        margin-bottom: 0.6rem;
    }
    
    #rsvp-modal p {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .name-fields-row {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        font-size: 0.95rem;
        padding: 0.6rem;
    }
    
    #rsvp-modal button {
        font-size: 0.95rem;
        padding: 0.7rem 0.8rem;
    }
}

/* ===== BROWSER-SPEZIFISCHE OPTIMIERUNGEN ===== */

/* Safari spezifische Fixes */
@supports (-webkit-appearance: none) {
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
    }
    
    #rsvp-modal button {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
    }
}

/* iOS Safari spezifische Fixes */
@supports (-webkit-touch-callout: none) {
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        /* Verhindert Zoom beim Fokus */
        font-size: 16px;
        transform: scale(1);
    }
    
    #rsvp-modal {
        /* Verhindert Bounce-Effekt */
        -webkit-overflow-scrolling: touch;
    }
}

/* Firefox spezifische Fixes */
@-moz-document url-prefix() {
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        -moz-appearance: none;
    }
}

/* Microsoft Edge spezifische Fixes */
@supports (-ms-ime-align: auto) {
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        -ms-border-radius: 8px;
    }
    
    #rsvp-modal button {
        -ms-border-radius: 8px;
    }
}

/* Internet Explorer 11 Fallback */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #rsvp-modal {
        display: block;
    }
    
    .name-fields-row {
        display: block;
    }
    
    .name-fields-row input {
        width: 48%;
        display: inline-block;
        margin-right: 2%;
    }
    
    .name-fields-row input:last-child {
        margin-right: 0;
    }
}

/* Chrome spezifische Fixes */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
    #rsvp-modal input[type="text"]:focus,
    #rsvp-modal input[type="email"]:focus,
    #rsvp-modal input[type="tel"]:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(168, 128, 71, 0.3);
    }
    
    #rsvp-modal button:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(168, 128, 71, 0.3);
    }
}

/* Webkit-basierte Browser (Chrome, Safari, Edge Chromium) */
@supports (-webkit-appearance: none) {
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
        -webkit-box-sizing: border-box;
    }
    
    #rsvp-modal button {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
        -webkit-box-sizing: border-box;
    }
    
    #rsvp-modal {
        -webkit-overflow-scrolling: touch;
    }
}

/* Gecko-basierte Browser (Firefox) */
@supports (-moz-appearance: none) {
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        -moz-appearance: none;
        -moz-border-radius: 8px;
        -moz-box-sizing: border-box;
    }
    
    #rsvp-modal button {
        -moz-appearance: none;
        -moz-border-radius: 8px;
        -moz-box-sizing: border-box;
    }
}

/* Universelle Browser-Kompatibilität */
#rsvp-modal input[type="text"],
#rsvp-modal input[type="email"],
#rsvp-modal input[type="tel"] {
    /* Fallback für ältere Browser */
    background-color: #ffffff;
    color: #333333;
    
    /* Verhindert Browser-spezifische Styles */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    
    /* Border-Radius für alle Browser */
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    
    /* Box-Sizing für konsistente Größen */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

/* Spezielle Fixes für Email-Felder */
#rsvp-modal input[type="email"] {
    /* Zusätzliche Email-spezifische Styles */
    background-image: none;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto;
    
    /* Verhindert Browser-spezifische Email-Icons */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Konsistente Darstellung */
    border: 1.5px solid #A88047;
    outline: none;
    
    /* Verhindert Autocomplete-Styles */
    -webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset;
        -webkit-text-fill-color: #333333;
    }
}

/* Focus-States für alle Input-Felder */
#rsvp-modal input[type="text"]:focus,
#rsvp-modal input[type="email"]:focus,
#rsvp-modal input[type="tel"]:focus {
    outline: none;
    border-color: #7C5C2C;
    box-shadow: 0 0 0 2px rgba(168, 128, 71, 0.2);
}

#rsvp-modal button {
    /* Verhindert Browser-spezifische Styles */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    
    /* Border-Radius für alle Browser */
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    
    /* Box-Sizing für konsistente Größen */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

/* Flexbox-Fallback für ältere Browser */
.name-fields-row {
    /* Flexbox */
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    
    /* Flexbox-Eigenschaften */
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

/* Fallback für Browser ohne Flexbox-Unterstützung */
.no-flexbox .name-fields-row {
    display: block;
    *zoom: 1;
}

.no-flexbox .name-fields-row:before,
.no-flexbox .name-fields-row:after {
    content: "";
    display: table;
}

.no-flexbox .name-fields-row:after {
    clear: both;
}

.name-fields-row input {
    /* Flexbox */
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* Fallback für Browser ohne Flexbox-Unterstützung */
.no-flexbox .name-fields-row input {
    width: 48%;
    float: left;
    margin-right: 2%;
}

.no-flexbox .name-fields-row input:last-child {
    margin-right: 0;
}

/* Prefixed Transforms für bessere Browser-Unterstützung */
@media screen and (max-width: 360px) {
    #rsvp-modal input[type="checkbox"] {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
    }
}

/* Prefixed Transitions für bessere Browser-Unterstützung */
#rsvp-modal button {
    transition: background 0.2s, background-color 0.2s;
    -webkit-transition: background 0.2s, background-color 0.2s;
    -moz-transition: background 0.2s, background-color 0.2s;
    -ms-transition: background 0.2s, background-color 0.2s;
    -o-transition: background 0.2s, background-color 0.2s;
}

#rsvp-modal input[type="text"],
#rsvp-modal input[type="email"],
#rsvp-modal input[type="tel"] {
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
    -moz-transition: border-color 0.2s, box-shadow 0.2s;
    -ms-transition: border-color 0.2s, box-shadow 0.2s;
    -o-transition: border-color 0.2s, box-shadow 0.2s;
}

/* Opera spezifische Fixes */
@supports (-o-appearance: none) {
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        -o-appearance: none;
    }
}

/* Samsung Internet Browser spezifische Fixes */
@supports (-webkit-appearance: none) and (-webkit-overflow-scrolling: touch) {
    #rsvp-modal-overlay {
        -webkit-overflow-scrolling: touch;
    }
}

/* UC Browser spezifische Fixes */
@supports (-webkit-appearance: none) and (-webkit-transform: translateZ(0)) {
    #rsvp-modal {
        -webkit-transform: translateZ(0);
    }
}

/* ===== ORIENTIERUNGS-SPEZIFISCHE ANPASSUNGEN ===== */

/* Landscape-Modus auf Handys */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #rsvp-modal {
        max-height: 95vh;
        padding: 1rem;
    }
    
    #rsvp-modal h2 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    #rsvp-modal p {
        font-size: 0.9rem;
        margin-bottom: 0.8rem;
    }
    
    #rsvp-modal input[type="text"],
    #rsvp-modal input[type="email"],
    #rsvp-modal input[type="tel"] {
        margin: 0.2rem 0;
        padding: 0.6rem;
    }
    
    #rsvp-modal button {
        margin-top: 0.5rem;
        padding: 0.6rem 1rem;
    }
    
    #rsvp-modal label {
        margin: 0.5rem 0;
    }
}

/* ===== ACCESSIBILITY & TOUCH OPTIMIERUNG ===== */

/* Größere Touch-Targets für mobile Geräte */
@media (hover: none) and (pointer: coarse) {
    #rsvp-modal button {
        min-height: 44px;
        min-width: 44px;
    }
    
    #rsvp-modal input[type="checkbox"] {
        transform: scale(1.2);
        margin-right: 0.8rem;
    }
}

/* High-DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #rsvp-modal {
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
}