/* Css für modales Erklärungs-Popup */

    table { border-collapse: collapse; width: 100%; margin-top: 20px; }
    th, td { 
        padding: 8px; 
        border: 1px solid #ccc; 
        text-align: left;
        font-size: 1.1rem; }

    th { background-color: #eee; }

    .popupModal {
        display: none; 
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%);
        width: 80%; 
        max-width: 800px; 
        max-height: 85vh;
        background-color: rgb(210, 211, 211);
        border: 1px solid #888; 
        padding: 20px; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
        z-index: 1000;
        overflow-y: auto;
    }
    .active {
        display: block;
    }

    .popupModal h2{
        padding: 5px 10px;
        color:rgb(40, 40, 40);
        background-color: #c1c0c0;
        font-size: 1.4rem;
    }

    .popupOverlay {
        display: none;
        position: fixed;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .popup-content {
        padding: 10px;
        max-height: 100%;
        overflow-y: auto;
      }
    

    @media (max-width: 768px) {

        table {
            font-size: 1.1rem;
        }

        th, td {
            padding: 6px;
        }
        .popupModal {
            position: fixed;
            left: 5%;
            top: 5%;
            transform: none; 
            width: 85%;
            padding: 10px;
            max-width: 90vw;   
            max-height: 90vh;  
            overflow: auto;   
            padding: 1rem;
            border-radius: 8px;
          }
    
          
        .popupModal h2 {
            font-size: 1.1rem;
            line-height: 1.3;
        }

        .popupModal p {
            font-size: 1.05rem;
            line-height: 1.2;
        }


    }