/* Der Rand (Overlay) */
.modal-overlay {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; top: 0; 
    width: 100%; height: 100%;
    /* 0.5 oder 0.6 macht es deutlich dunkler (schwarzer), 
       aber man sieht den Hintergrund immer noch durch */
    background: rgba(0, 0, 0, 0.35) !important; 
    /* 2. UNSCHÄRFE: Reduziert auf 2px, damit man den Hintergrund scharf sieht */
    xxbackdrop-filter: blur(1px) !important; 
    -webkit-backdrop-filter: blur(1px) !important;
    overflow-y: auto;
}

/* Die weiße Inhaltsbox */
.modal-box {
    /* 3. BOX: Auch hier die Transparenz erhöhen (0.7 statt 0.85) */
    background: rgba(255, 255, 255, 0.9) !important;
    xxbackdrop-filter: blur(10px) !important; /* Nur die Box selbst bleibt "milchig" für Lesbarkeit */
    margin: 5vh auto; 
    padding: 50px 40px 40px 40px; /* Oben mehr Platz für das X */
    width: 90%; 
    max-width: 1050px; 
    min-height: 80vh; 
    border-radius: 5px; 
    position: relative; /* Wichtig, damit das X sich hierauf bezieht */
 /* 1. SICHTBARE BORDER: Ein feines Grau statt Weiß */
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    
    /* 2. SCHATTEN: Etwas mehr Kontrast nach außen (0.15 statt 0.05) */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
    will-change: transform;
    transform: translateZ(0);
}

/* Das X zum Schließen */
.modal-close {
    position: absolute !important; 
    display: block !important;
    right: 20px !important; /* Ganz nach rechts */
    top: 10px !important;  /* Nach oben */
    font-size: 50px !important; 
    font-family: Arial, sans-serif !important;
    cursor: pointer !important; /* ZEIGER-HAND */
    color: #888 !important; 
    line-height: 1 !important;
    z-index: 10001 !important;
}

.modal-close:hover {
    color: #000 !important;
}