:root{

    --msa-primary:#2563eb;
    --msa-secondary:#64748b;

    --msa-success:#15803d;
    --msa-success-bg:#f0fdf4;

    --msa-warning:#b45309;
    --msa-warning-bg:#fffbeb;

    --msa-danger:#b91c1c;
    --msa-danger-bg:#fef2f2;

    --msa-border:#cbd5e1;
    --msa-text:#1e293b;
    --msa-card:#ffffff;

    --msa-btn-bg:#f8fafc;
    --msa-btn-border:#dbe3ed;
}

*{
    box-sizing:border-box;
}

.msa-container{

    max-width:1000px;
    margin:20px auto;

    padding:12px;

    color:var(--msa-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

.msa-disclaimer{

    padding:12px;

    margin-bottom:15px;

    border-left:5px solid var(--msa-primary);

    background:#f8fafc;

    border-radius:6px;
}

.msa-progress{

    background:#ffffff;

    border:1px solid var(--msa-border);

    border-radius:8px;

    padding:12px;

    margin-bottom:15px;

    font-weight:600;

    text-align:center;
}

.msa-section-title{

    margin:15px 0 0 0;

    padding:10px 14px;

    color:#ffffff;

    background:var(--msa-primary);

    border-radius:8px 8px 0 0;

    font-size:1.1rem;

    font-weight:700;
}

.msa-card{

    border:1px solid var(--msa-border);

    border-top:none;

    background:var(--msa-card);

    border-radius:0 0 8px 8px;

    padding:15px;

    margin-bottom:16px;
}

.msa-grid{

    display:flex;

    flex-direction:column;

    gap:10px;
}

.msa-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:8px 0;

    border-bottom:1px dashed #e5e7eb;
}

.msa-row:last-child{

    border-bottom:none;
}

.msa-row label{

    flex:1;

    font-weight:600;
}

.msa-row-header{

    background:#f1f5f9;

    font-weight:700;

    padding:10px 12px;

    border-radius:6px;

    margin-top:10px;
}

.msa-button-group{

    display:flex;

    gap:6px;
}

.msa-btn-note{

    width:38px;
    height:38px;

    border-radius:6px;

    border:1px solid var(--msa-btn-border);

    background:var(--msa-btn-bg);

    cursor:pointer;

    font-weight:700;

    transition:
        background .2s,
        color .2s,
        border-color .2s;
}

.msa-btn-note:hover{

    background:#e2e8f0;
}

.msa-btn-note.active{

    background:var(--msa-primary);

    border-color:var(--msa-primary);

    color:#ffffff;
}

.msa-btn-note.active-danger{

    background:var(--msa-danger);

    border-color:var(--msa-danger);

    color:#ffffff;
}

.msa-actions{

    display:flex;

    justify-content:space-between;

    gap:12px;

    margin:20px 0;
}

.msa-btn-primary,
.msa-btn-secondary{

    border:none;

    border-radius:6px;

    padding:10px 18px;

    color:#ffffff;

    cursor:pointer;

    font-weight:700;
}

.msa-btn-primary{

    background:var(--msa-primary);
}

.msa-btn-secondary{

    background:var(--msa-secondary);
}

.msa-results{

    margin-top:20px;
}

.msa-status-alert{

    padding:16px;

    border-left:6px solid transparent;

    border-radius:8px;

    font-size:1rem;

    margin-bottom:15px;
}

.alert-success{

    background:var(--msa-success-bg);

    color:var(--msa-success);

    border-color:var(--msa-success);
}

.alert-warning{

    background:var(--msa-warning-bg);

    color:var(--msa-warning);

    border-color:var(--msa-warning);
}

.alert-danger{

    background:var(--msa-danger-bg);

    color:var(--msa-danger);

    border-color:var(--msa-danger);
}

.msa-flex-results{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.msa-card-result{

    background:#ffffff;

    border:1px solid var(--msa-border);

    border-radius:8px;

    padding:15px;
}

.msa-result-title{

    margin:0 0 14px 0;

    padding-bottom:8px;

    border-bottom:2px solid #eef2f7;
}

.msa-table{

    width:100%;

    border-collapse:collapse;
}

.msa-table th{

    text-align:left;

    background:#f8fafc;

    padding:10px;

    border-bottom:2px solid #e2e8f0;
}

.msa-table td{

    padding:10px;

    border-bottom:1px solid #edf2f7;
}

.note-good{

    color:#15803d;

    font-weight:700;
}

.note-critical{

    color:#b91c1c;

    font-weight:700;
}

.msa-fos-box{

    text-align:center;

    padding:15px;

    border:1px solid #e2e8f0;

    border-radius:8px;

    margin-bottom:12px;

    background:#f8fafc;
}

.fos-label{

    display:block;

    font-size:.9rem;

    color:#64748b;

    margin-bottom:8px;
}

.fos-value{

    font-size:2rem;

    font-weight:800;

    color:var(--msa-primary);
}

.fos-success{

    background:#dcfce7;

    color:#166534;

    text-align:center;

    padding:12px;

    border-radius:8px;

    font-weight:700;

    margin-bottom:10px;
}

.fos-fail{

    background:#fee2e2;

    color:#991b1b;

    text-align:center;

    padding:12px;

    border-radius:8px;

    font-weight:700;

    margin-bottom:10px;
}

#msa-fos-text{

    text-align:center;

    margin-bottom:15px;
}

.msa-hints-wrapper{

    margin-top:15px;
}

.msa-hints-wrapper h4{

    margin-bottom:8px;
}

.msa-hints-wrapper ul{

    margin:0;

    padding-left:20px;
}

.msa-hints-wrapper li{

    margin-bottom:6px;
}

.print-only{

    display:none;
}

/* =========================
   MOBILE
   ========================= */

@media (max-width:768px){

    .msa-flex-results{

        grid-template-columns:1fr;
    }

    .msa-row{

        flex-direction:column;

        align-items:flex-start;
    }

    .msa-button-group{

        flex-wrap:wrap;
    }

    .msa-btn-note{

        width:44px;
        height:44px;
    }

    .msa-actions{

        flex-direction:column;
    }

    .msa-btn-primary,
    .msa-btn-secondary{

        width:100%;
    }

    .fos-value{

        font-size:1.6rem;
    }
    .msa-table{
        width:100%;
        table-layout:fixed;
        font-size:.8rem;
    }

    .msa-table th,
    .msa-table td{
        padding:5px 3px;
        word-break:break-word;
    }

    .msa-table th:nth-child(1),
    .msa-table td:nth-child(1){
        width:40%;
    }

    .msa-table th:nth-child(2),
    .msa-table td:nth-child(2),
    .msa-table th:nth-child(3),
    .msa-table td:nth-child(3),
    .msa-table th:nth-child(4),
    .msa-table td:nth-child(4){
        width:20%;
        text-align:center;
    }
}

/* =========================
   DRUCKANSICHT
   ========================= */

@media print{

    @page{
        margin:1cm;
    }

    body *{

        visibility:hidden;
    }

    #msa-rechner-wrapper,
    #msa-rechner-wrapper *{

        visibility:visible;
    }

    #msa-rechner-wrapper{

        position:absolute;

        top:0;
        left:0;

        width:100%;
    }

    .no-print{

        display:none !important;
    }

    .print-only{

        display:block !important;
    }

    .msa-print-header{

        border-bottom:2px solid #000;

        margin-bottom:15px;

        padding-bottom:10px;
    }

    .msa-print-header h2{

        margin:0;
    }

    .print-input-grid{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:20px;

        margin-bottom:15px;
    }

    .print-input-grid ul{

        list-style:none;

        margin:0;

        padding:0;
    }

    .print-input-grid li{

        padding:2px 0;
    }

    .msa-status-alert{

        border:2px solid #000 !important;
    }

    .msa-flex-results{

        grid-template-columns:1fr 1fr;
    }

    .msa-card-result{

        border:1px solid #000;
    }

    .msa-print-footer{

        margin-top:20px;

        padding-top:8px;

        border-top:1px solid #000;

        text-align:center;

        font-size:.8rem;
    }
.msa-table-wrapper{
    width:100%;
    overflow-x:auto;
}

.msa-table-legend{
    margin-top:8px;
    font-size:.8rem;
    color:#64748b;
}
}