@media (max-width: 700px) {

    main {
        padding: 8px;
    }

    .box {
        padding: 10px;
        margin-bottom: 10px;
    }

    .topbar {
        min-height: 32px;
        padding: 4px 8px;
        font-size: 13px;
    }

    .topbar-title b {
        font-size: 14px;
    }

    .tabs {
        top: 32px;
    }

    .tabs a {
        padding: 11px 12px;
        font-size: 14px;
    }

    .knoppen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .persoonknop {
        min-height: 64px;
        font-size: 16px;
    }

    .artikelvlak {
        min-height: 82px;
    }

    .artikelvlak b {
        font-size: 16px;
    }

    .totaalregel {
        font-size: 22px;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        margin-bottom: 10px;
        border: 1px solid #ccc;
        background: white;
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
    }

    td:last-child {
        border-bottom: none;
    }

    td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: bold;
        color: #555;
        margin-bottom: 4px;
    }
}