* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
    font-size: 11pt;
    color: #000;
    line-height: 1.3;
}

/* ── Inloggen ── */
.login-pagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6e6e6;
    padding: 1rem;
}

.login-kaart {
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    text-align: center;
}

.login-logo {
    height: 56px;
    width: auto;
    margin-bottom: 1rem;
}

.login-kaart h1 {
    margin: 0 0 0.5rem;
    color: var(--b-accent, #1d4e9e);
    font-size: 18pt;
}

.login-intro {
    color: #555;
    margin: 0 0 0.5rem;
    font-size: 10pt;
}

.login-gebruiker-tip {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: 9pt;
    color: #666;
}

.login-form {
    text-align: left;
}

.login-label {
    display: block;
    font-weight: 700;
    font-size: 10pt;
    margin-bottom: 0.25rem;
    color: #333;
}

.login-input {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid #b4b4b4;
    font-family: inherit;
    font-size: 11pt;
}

.login-input:focus {
    outline: 2px solid #1d4e9e;
    outline-offset: -1px;
}

.login-fout {
    margin: 0 0 1rem;
    padding: 0.5rem 0.6rem;
    background: #fde8e8;
    border: 1px solid #e8a0a0;
    color: #a00;
    font-size: 10pt;
}

.login-succes {
    margin: 0 0 1rem;
    padding: 0.5rem 0.6rem;
    background: #e8f7f0;
    border: 1px solid #9fd4b8;
    color: #0d6b42;
    font-size: 10pt;
}

.gebruikers-kaart {
    max-width: 620px;
    text-align: left;
}

.gebruiker-blok {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.gebruiker-blok-titel {
    margin: 0 0 0.75rem;
    font-size: 11pt;
    color: #1d4e9e;
}

.gebruikers-lijst {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.gebruiker-kaart,
.gebruiker-rij {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    background: #f8fafc;
}

.gebruiker-kaart.is-actief,
.gebruiker-rij.is-actief {
    border-color: #b8dcc8;
    background: #f4fbf7;
}

.gebruiker-kaart.is-inactief,
.gebruiker-rij.is-inactief {
    border-color: #e8c4c4;
    background: #fdf6f6;
    opacity: 0.95;
}

.gebruiker-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gebruiker-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.gebruiker-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.gebruiker-naam {
    font-size: 11pt;
}

.gebruiker-meta {
    font-size: 9pt;
    color: #667;
}

.gebruiker-toggle,
.gebruiker-acties .login-knop-secundair {
    flex-shrink: 0;
    width: auto;
    margin: 0;
    padding: 0.45rem 0.75rem;
    white-space: nowrap;
}

.gebruiker-rechten-panel,
.gebruiker-panel {
    padding-top: 0.5rem;
    border-top: 1px solid #dde4ee;
}

.rechten-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.rechten-regel {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 10pt;
    color: #333;
}

.rechten-regel-getal {
    justify-content: space-between;
}

.rechten-getal {
    width: 4.5rem;
    margin: 0;
    padding: 0.35rem 0.45rem;
}

.rechten-regel-getal .login-input,
.rechten-regel-getal select {
    width: min(100%, 16rem);
    margin: 0;
}

.huisstijl-kleur {
    width: 3.5rem;
    height: 2rem;
    padding: 0.1rem;
    border: 1px solid #b4b4b4;
    background: #fff;
}

.rechten-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.rechten-knoppen .login-knop-secundair {
    width: auto;
    margin: 0;
}

.gebruiker-beheer-notitie {
    margin: 0;
    font-size: 9pt;
    color: #667;
}

.login-knop {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 0.6rem 1rem;
    background: var(--b-accent, #1d4e9e);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 11pt;
    font-weight: 700;
    cursor: pointer;
    border-radius: 2px;
}

.login-knop:hover:not(:disabled) {
    background: var(--b-accent-dark, #163d7d);
}

.login-knop:disabled {
    opacity: 0.7;
    cursor: wait;
}

.login-code {
    text-align: center;
    font-size: 18pt;
    letter-spacing: 0.35em;
    font-family: Consolas, "Courier New", monospace;
}

.login-hint {
    margin: -0.5rem 0 1rem;
    font-size: 9pt;
    color: #666;
}

.login-scheiding-ruimte {
    padding: 1.5rem 0 1rem;
}

#loginForm .login-scheiding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 9pt;
    color: #666;
    text-align: center;
}

.login-scheiding::before,
.login-scheiding::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d0d0d0;
}

.login-stap2 {
    text-align: left;
}

.auth-melding {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: #eef4fc;
    border: 1px solid #b8cce8;
    border-radius: 6px;
    font-size: 10pt;
    color: #1a3f7a;
}

.auth-melding strong {
    display: block;
    margin-bottom: 0.2rem;
}

.auth-melding p {
    margin: 0;
    color: #445;
    line-height: 1.45;
}

.auth-pulse {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 0.25rem;
    background: #1d4e9e;
    border-radius: 50%;
    animation: auth-pulse 1.4s ease-in-out infinite;
}

@keyframes auth-pulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(29, 78, 158, 0.5); }
    50% { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 8px rgba(29, 78, 158, 0); }
}

.auth-gebruiker {
    margin: 0 0 0.75rem;
    font-size: 10pt;
    color: #555;
}

.auth-timer {
    position: relative;
    margin-bottom: 1rem;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}

.auth-timer-balk {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #1d4e9e, #3d7ad6);
    border-radius: 3px;
    transition: width 1s linear;
}

.auth-timer-tekst {
    display: block;
    margin-top: 0.4rem;
    font-size: 9pt;
    color: #667;
    text-align: center;
}

.login-knop-secundair {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.55rem 1rem;
    background: #fff;
    color: #1d4e9e;
    border: 1px solid #b4b4b4;
    font-family: inherit;
    font-size: 10pt;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
}

.login-knop-secundair:hover {
    border-color: var(--b-accent, #1d4e9e);
    background: var(--b-accent-pale, #f5f8fc);
}

.duo-wacht {
    text-align: center;
}

.duo-wacht .auth-melding {
    text-align: left;
}

.duo-spinner {
    width: 36px;
    height: 36px;
    margin: 1rem auto;
    border: 3px solid #d8e0ea;
    border-top-color: #1d4e9e;
    border-radius: 50%;
    animation: duo-spin 0.9s linear infinite;
}

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

.duo-wacht-tekst {
    text-align: center;
    margin-bottom: 1rem;
}

.login-setup-link {
    margin-top: 1.25rem;
    text-align: center;
}

.login-setup-link a {
    color: #1d4e9e;
}

.login-duo-sectie {
    margin-top: 1.25rem;
    border: 1px solid #d8e0ea;
    border-radius: 6px;
    background: #fafbfd;
}

.login-duo-sectie > summary {
    padding: 0.75rem 1rem;
    font-size: 10pt;
    font-weight: 600;
    color: #1d4e9e;
    cursor: pointer;
    list-style: none;
}

.login-duo-sectie > summary::-webkit-details-marker {
    display: none;
}

.login-duo-sectie > summary::after {
    content: ' ▾';
    float: right;
    color: #667;
}

.login-duo-sectie[open] > summary::after {
    content: ' ▴';
}

.login-duo-inhoud {
    padding: 0 1rem 1rem;
    border-top: 1px solid #e2e8f0;
}

.login-duo-inhoud .login-hint {
    margin-top: 0.75rem;
}

.setup-terug {
    display: inline-block;
    margin-top: 1rem;
}

.setup-stappen code {
    font-size: 9pt;
    background: #f0f4f8;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

.setup-kaart {
    max-width: 420px;
}

.setup-qr {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.setup-qr img {
    border: 1px solid #b4b4b4;
    padding: 0.5rem;
    background: #fff;
}

.setup-gegevens {
    margin: 0 0 1rem;
    font-size: 10pt;
}

.setup-gegevens dt {
    font-weight: 700;
    margin-top: 0.5rem;
}

.setup-gegevens dd {
    margin: 0.15rem 0 0;
    word-break: break-all;
}

.setup-secret {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.08em;
}

.setup-stappen {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    font-size: 10pt;
    color: #444;
    text-align: left;
}

.setup-stappen a {
    color: #1d4e9e;
}

.setup-test {
    text-align: center;
}

/* ── Bovenbalk (uitloggen) ── */
.pagina-bovenbalk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    max-width: 640px;
    margin: 1rem auto 0;
    padding: 0 2rem;
}

.excel-bovenbalk {
    max-width: none;
    justify-content: space-between;
    margin: 0 0 0.5rem;
    padding: 0;
}

.bovenbalk-rechts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ingelogd-als {
    font-size: 10pt;
    color: #555;
}

.uitlog-knop {
    padding: 0.25rem 0.6rem;
    background: #fff;
    border: 1px solid #b4b4b4;
    color: #1d4e9e;
    font-family: inherit;
    font-size: 10pt;
    cursor: pointer;
    border-radius: 2px;
}

.uitlog-knop:hover {
    border-color: #1d4e9e;
    background: #f5f8fc;
}

/* ── Home ── */
:root {
    --b-accent: #1d4e9e;
    --b-accent-dark: #163d7d;
    --b-accent-light: #2a6cb8;
    --b-accent-pale: #eef3fa;
    --b-accent-border: #b8c9e0;
}

.home-pagina {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #f4f6f8;
    color: #1a202c;
}

.home-header {
    background: var(--b-accent-pale, #fff);
    border-bottom: 1px solid var(--b-accent-border, #e4e8ed);
    box-shadow: none;
}

.home-header-inhoud {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.home-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.home-logo {
    height: 52px;
    width: auto;
    display: block;
}

.home-header-rechts {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.home-abo-link {
    padding: 0.4rem 0.85rem;
    color: var(--b-accent, #1d4e9e);
    text-decoration: none;
    font-size: 10pt;
    font-weight: 700;
    border: 1px solid var(--b-accent-border, #b8c9e0);
    border-radius: 6px;
    transition: background 0.15s, border-color 0.15s;
}

.home-abo-link:hover {
    background: var(--b-accent-pale, #eef3fa);
    border-color: var(--b-accent, #1d4e9e);
}

[data-beheer-link][hidden],
[data-beheer-only][hidden] {
    display: none !important;
}

.home-pagina .module-kaart[data-beheer-only][hidden] {
    display: none !important;
}

.home {
    flex: 1;
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 2rem 3rem;
}

.home-held {
    position: relative;
    margin-bottom: 2.25rem;
    padding: 1.75rem 2rem 1.75rem 2.125rem;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(12, 35, 64, 0.04), 0 8px 24px rgba(12, 35, 64, 0.04);
    overflow: hidden;
}

.home-held::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #0c2340 0%, #164a85 50%, #2d6cb5 100%);
}

.home-held-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

.home-held h1 {
    margin: 0 0 0.625rem;
    font-size: clamp(2.125rem, 4.5vw, 2.875rem);
    font-weight: 700;
    color: #0c2340;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.home-held .intro {
    margin: 0;
    max-width: 34rem;
    color: #64748b;
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
}

.intro {
    margin: 0;
    max-width: 42rem;
    color: #5f6b7a;
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 400;
}

.home-held-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.15rem;
}

.home-held-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    border: 1px solid #d8dee6;
    background: #fff;
    color: #1d4e9e;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-held-knop--primair {
    background: #1d4e9e;
    border-color: #1d4e9e;
    color: #fff;
    font-weight: 600;
}

.home-held-knop--primair:hover {
    background: #163d7d;
    border-color: #163d7d;
    color: #fff;
}

.home-held-knop:hover {
    border-color: #b8c4d4;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.home-bliksem-promo {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #1d4e9e 0%, #2a6cb8 100%);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(29, 78, 158, 0.22);
}

.home-bliksem-promo-inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.home-bliksem-promo-tekst {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: min(100%, 420px);
}

.home-bliksem-promo-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.78);
}

.home-bliksem-promo-titel {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.home-bliksem-promo-oms {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.45;
}

.home-bliksem-promo-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12rem;
    padding: 0.7rem 1.25rem;
    border-radius: 8px;
    background: #fff;
    color: #1d4e9e;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-bliksem-promo-knop:hover {
    color: #163d7d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.home-abo-link--bliksem {
    font-weight: 600;
    color: #1d4e9e !important;
}

.home-modules {
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 14px;
    padding: 1.75rem 1.75rem 2rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.home-sectie-titel {
    margin: 0 0 1.35rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #111827;
}

.home-module-nav-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.home-module-teller {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7280;
}

.home-module-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.125rem 0.5rem;
    width: 100%;
    padding: 0.25rem;
    background: #f4f6f8;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    box-shadow: none;
}

.home-module-nav-btn {
    padding: 0.45rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5f6b7a;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    margin-bottom: 0;
}

.home-module-nav-btn:hover {
    color: #374151;
    background: rgba(255, 255, 255, 0.7);
}

.home-module-nav-btn.is-actief {
    background: #fff;
    border-color: #d8dee6;
    border-bottom-color: #d8dee6;
    color: #111827;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.home-pagina .module-kaart--uitgelicht {
    border-color: #b8cce8;
    box-shadow: 0 0 0 1px rgba(29, 78, 158, 0.08), 0 4px 14px rgba(29, 78, 158, 0.08);
}

#module-bliksem {
    scroll-margin-top: 6rem;
}

.module-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (min-width: 720px) {
    .module-lijst {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.35rem;
    }
}

.module-lijst > .module-kaart {
    height: 100%;
}

.home-pagina .module-kaart[hidden],
.module-kaart[hidden] {
    display: none !important;
}

.home-pagina .module-kaart,
.module-blok {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e8ed;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-pagina .module-kaart:hover {
    transform: none;
    border-color: #cdd5df;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.home-pagina .module-beeld {
    background: #f8f9fb;
    border-bottom: 1px solid #eef1f4;
    padding: 0;
    height: 132px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-pagina .module-beeld img {
    display: block;
    width: 88%;
    height: auto;
    max-height: 118px;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    opacity: 0.72;
    filter: saturate(0.45) contrast(0.92);
}

.home-pagina .module-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    padding: 1.15rem 1.25rem 1.25rem;
}

.home-pagina .module-cat {
    display: block;
    align-self: flex-start;
    padding: 0;
    border-radius: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: none;
    color: #8b95a5;
}

.home-pagina .module-kaart[data-module-cat="financieel"] .module-cat,
.home-pagina .module-kaart[data-module-cat="advies"] .module-cat,
.home-pagina .module-kaart[data-module-cat="normen"] .module-cat,
.home-pagina .module-kaart[data-module-cat="techniek"] .module-cat {
    background: none;
    color: #8b95a5;
}

.module-icoon {
    width: 44px;
    height: 44px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3fa;
    border-radius: 10px;
    color: #1d4e9e;
}

.module-icoon svg {
    width: 24px;
    height: 24px;
}

.home-pagina .module-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    min-height: 0;
    letter-spacing: -0.01em;
}

.home-pagina .module-oms {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.8125rem;
    color: #5f6b7a;
    line-height: 1.55;
}

.home-pagina .module-knop {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    margin-top: auto;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.5625rem 1rem;
    background: #1d4e9e;
    color: #fff;
    border: 1px solid #1d4e9e;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-pagina .module-knop::after {
    content: "→";
    margin-left: 0.45em;
    font-size: 0.9em;
    opacity: 0.85;
}

.home-pagina .module-knop:hover {
    background: #163d7d;
    color: #fff;
    border-color: #163d7d;
    box-shadow: 0 2px 6px rgba(29, 78, 158, 0.2);
}

.home-pagina .module-knop--primair {
    background: #1d4e9e;
    border-color: #1d4e9e;
    font-weight: 600;
}

.home-pagina .ingelogd-als {
    font-size: 0.8125rem;
    color: #6b7280;
}

.home-pagina .uitlog-knop {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--b-accent-border, #d8dee6);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--b-accent-dark, #374151);
    background: #fff;
}

.home-pagina .uitlog-knop:hover {
    border-color: var(--b-accent, #b8c2ce);
    background: var(--b-accent-pale, #f9fafb);
    color: var(--b-accent-dark, #111827);
}

.home-footer {
    padding: 1.25rem 1.5rem 1.75rem;
    text-align: center;
}

.home-footer p {
    margin: 0;
    font-size: 9pt;
    color: #8a94a6;
}

@media (max-width: 600px) {
    .home-header-inhoud {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .home-header-rechts {
        width: 100%;
        justify-content: center;
    }

    .home-held {
        padding: 1.5rem 1.25rem 1.5rem 1.375rem;
        border-radius: 12px;
    }

    .home-held h1 {
        font-size: 1.875rem;
    }

    .home-held .intro {
        font-size: 0.9375rem;
    }

    .module-knop {
        width: 100%;
        text-align: center;
    }
}

/* ── Excel-pagina ── */
.excel-pagina {
    background: #d8dce3;
    min-height: 100vh;
    padding: 1rem 1.25rem 1.5rem;
    font-family: "Segoe UI", Calibri, Arial, sans-serif;
}

.pagina-wrap {
    max-width: 1320px;
    margin: 0 auto;
}

.terug-link {
    font-size: 10pt;
    color: #1d4e9e;
    text-decoration: none;
}

.terug-link:hover {
    text-decoration: underline;
}

.excel-blad {
    background: #fafafa;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    padding: 1.25rem 1.5rem 1.5rem;
    max-width: 100%;
}

/* Kop */
.blad-kop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #c8cdd6;
}

.blad-titel {
    margin: 0;
    font-size: 15pt;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.01em;
}

.blad-logo {
    height: 54px;
    width: auto;
    flex-shrink: 0;
    opacity: 0.95;
}

/* Velden – losse cellen, geen tabel */
.veld-geel,
.veld-grijs,
.veld-wit {
    font-family: inherit;
    font-size: 11pt;
    padding: 0.35rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.veld-geel {
    background: #fff566;
    width: 100%;
}

.veld-grijs {
    background: #e2e2e2;
    width: 5.5ch;
    text-align: right;
}

.veld-wit {
    background: #fff;
    border: 1px solid #d8d8d8;
    color: #222;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.veld-geel:focus,
.veld-grijs:focus {
    outline: none;
    border-color: #1d4e9e;
    box-shadow: 0 0 0 2px rgba(29, 78, 158, 0.2);
}

/* Projectgegevens */
.project-sectie {
    margin-bottom: 1.1rem;
    padding: 1rem 1.15rem 0.9rem;
    background: linear-gradient(180deg, #fffef5 0%, #fff9d6 100%);
    border: 1px solid #e8d96a;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1.25rem;
}

.project-grid .veld-groep label {
    font-size: 8.5pt;
    font-weight: 700;
    color: #5a5a00;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.project-grid .veld-geel {
    background: #fff566;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.project-grid .veld-geel::placeholder {
    color: rgba(0, 0, 0, 0.28);
    font-weight: 400;
}

.project-extra {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.project-extra .veld-groep label {
    font-size: 8.5pt;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Meta – flexibel, geen strakke kolommen */
.meta-sectie {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.meta-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    align-items: flex-end;
}

.veld-groep {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 7rem;
}

.veld-groep label {
    font-size: 9pt;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.veld-groep.veld-sm { min-width: 6rem; }
.veld-groep.veld-xs { min-width: 5rem; }
.veld-groep.veld-breed { flex: 1; min-width: 12rem; max-width: 22rem; }

.veld-met-eenheid {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.veld-met-eenheid span {
    font-size: 9pt;
    color: #666;
    white-space: nowrap;
}

.veld-met-eenheid .veld-grijs,
.veld-met-eenheid .veld-geel {
    width: 4.5ch;
}

.vet { font-weight: 700; }

.waarde {
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #222;
    padding: 0.2rem 0;
}

/* Legenda */
.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 9pt;
    color: #666;
}

.legenda-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.swatch.geel { background: #fff566; }
.swatch.grijs { background: #e2e2e2; }
.swatch.wit { background: #fff; }

/* Hoofd-layout */
.blad-body {
    display: block;
}

/* Goot-sectie – raster met kabelgoten */
.goot-sectie {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.15rem 1.25rem;
    background: linear-gradient(180deg, #f4f7fb 0%, #eef2f8 100%);
    border: 1px solid #d4dbe8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(29, 78, 158, 0.06);
}

.sectie-kop {
    margin-bottom: 1rem;
}

.sectie-kop-rij {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.sectie-kop-rij > .goot-instellingen {
    flex: 1 1 22rem;
    max-width: 100%;
}

.goot-instellingen {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.85rem 1.15rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #d4dbe8;
    border-radius: 6px;
}

.vak-breedtes {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border-top: none;
}

.vak-breedtes-oms {
    margin: 0 0 0.5rem;
    font-size: 8.5pt;
    color: #667;
}

.vak-breedtes-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}

.vak-breedtes-grid--2,
.vak-breedtes-grid--3 {
    /* klasse blijft voor JS-toggle */
}

.vak-breedtes-grid [data-vak][hidden] {
    display: none !important;
}

#vak-breedtes[hidden] {
    display: none !important;
}

.vak-breedtes-grid .veld-groep {
    min-width: 8.5rem;
}

.vak-breedtes-grid .veld-groep label {
    font-size: 9.5pt;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}

.vak-breedtes-grid .veld-met-eenheid {
    gap: 0.5rem;
}

.vak-breedtes-grid .veld-met-eenheid .veld-grijs {
    width: 100%;
    min-width: 5.5rem;
    max-width: 8rem;
    font-size: 14pt;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    padding: 0.5rem 0.65rem;
    border: 1px solid #bbb;
    border-radius: 4px;
}

.vak-breedtes-grid .veld-met-eenheid span {
    font-size: 10pt;
    font-weight: 600;
    color: #555;
}

.vak-breedtes-grid [data-vak="laagspanning"] label { color: #1d4e9e; }
.vak-breedtes-grid [data-vak="zwakstroom"] label { color: #2d6a4f; }
.vak-breedtes-grid [data-vak="data"] label { color: #7c4a03; }

.goot-instellingen .veld-groep label {
    font-size: 8.5pt;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.veld-select {
    width: 100%;
    min-width: 13rem;
    padding: 0.35rem 0.5rem;
    font-family: inherit;
    font-size: 10pt;
    border: 1px solid transparent;
    border-radius: 3px;
    background: #e2e2e2;
}

.veld-select:focus {
    outline: none;
    border-color: #1d4e9e;
    box-shadow: 0 0 0 2px rgba(29, 78, 158, 0.2);
}

.segmentatie-groep {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 7.5rem;
}

.segmentatie-label {
    font-size: 8.5pt;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.segmentatie-keuze {
    display: inline-flex;
    align-self: flex-start;
    background: #e4e9f0;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    border: 1px solid #cdd5e3;
}

.segmentatie-optie {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.segmentatie-optie input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.segmentatie-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    height: 2.35rem;
    padding: 0 0.55rem;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #5a6a7f;
    background: transparent;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
    line-height: 1;
}

.segmentatie-optie input:checked + .segmentatie-knop {
    background: #fff;
    color: #1d4e9e;
    box-shadow: 0 1px 4px rgba(29, 78, 158, 0.2);
}

.segmentatie-optie input:focus-visible + .segmentatie-knop {
    outline: 2px solid #1d4e9e;
    outline-offset: 1px;
}

.segmentatie-optie:hover input:not(:checked) + .segmentatie-knop {
    color: #1d4e9e;
    background: rgba(255, 255, 255, 0.55);
}

.segmentatie-legend {
    margin: 0;
    font-size: 8.5pt;
    color: #667;
    line-height: 1.3;
}

.sectie-kop .sectie-titel {
    margin-bottom: 0.25rem;
}

.sectie-oms {
    margin: 0;
    font-size: 9.5pt;
    color: #667;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

.goot-kaart {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    padding: 0.75rem 0.85rem 0.85rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.goot-kaart:hover {
    border-color: #a8bdd8;
    box-shadow: 0 4px 12px rgba(29, 78, 158, 0.1);
}

.goot-doorsnede-wrap {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.goot-diepte-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 7.5pt;
    font-weight: 700;
    color: #666;
    text-align: center;
    padding: 0.15rem 0;
    flex-shrink: 0;
}

.goot-doorsnede {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-height: 5.5rem;
    border: 2px solid #333;
    background: #f8f9fb;
    overflow: hidden;
    position: relative;
}

.goot-bezet-zone {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: 100%;
    flex-shrink: 0;
}

.goot-doorsnede-ingepast .goot-vak-label,
.goot-vak-smal .goot-vak-label {
    white-space: normal;
    font-size: 6.5pt;
    line-height: 1.15;
}

.goot-vak-smal .goot-vak-breedte {
    font-size: 6.5pt;
    padding: 0.15rem 0.05rem;
}

.goot-gootgrens {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-right: 2px dashed #a0a8b5;
    pointer-events: none;
    z-index: 2;
}

.goot-vak {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    flex-shrink: 0;
    padding: 0.25rem 0.15rem 0;
    border-right: 1px solid #ccc;
    background: #fff;
    overflow: hidden;
}

.goot-vak:last-child {
    border-right: none;
}

.goot-vak-label {
    font-size: 7pt;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goot-vak.ls .goot-vak-label { color: #1d4e9e; }
.goot-vak.zs .goot-vak-label { color: #2d6a4f; }
.goot-vak.dt .goot-vak-label { color: #7c4a03; }

.goot-vak-pct {
    font-size: 9pt;
    padding: 0.1rem 0.35rem;
    margin: 0.15rem 0;
}

.goot-vak-breedte {
    width: 100%;
    text-align: center;
    font-size: 7.5pt;
    font-weight: 700;
    color: #1a1a1a;
    background: #fff566;
    border-top: 2px solid #d4b800;
    padding: 0.2rem 0.1rem;
    font-variant-numeric: tabular-nums;
}

.goot-scheiding {
    flex-shrink: 0;
    background: #222;
    min-width: 2px;
    align-self: stretch;
}

.goot-scheiding-dun {
    background: #444;
    min-width: 3px;
}

.goot-onbenut {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        -45deg,
        #f0f2f5,
        #f0f2f5 4px,
        #e8ebf0 4px,
        #e8ebf0 8px
    );
    min-width: 1.5rem;
    flex-shrink: 0;
    align-self: stretch;
}

.goot-onbenut-label {
    font-size: 7pt;
    font-weight: 600;
    color: #8a93a3;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.02em;
    user-select: none;
}

.goot-status {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6a7280;
    background: #e2e5ea;
    border-radius: 4px;
    line-height: 1.3;
}

.goot-status:empty {
    display: none;
}

.goot-kaart-geschikt {
    background: #fff;
    border-color: #b8c9e0;
}

.goot-kaart-geschikt.goot-kaart--kritiek {
    border-color: #e74c3c;
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.28);
}

.goot-kaart-geschikt.goot-kaart--kritiek.goot-kaart-enkelvak {
    background: linear-gradient(180deg, #fff5f5 0%, #fff 40%);
    border-color: #e74c3c;
}

.goot-kaart[hidden] {
    display: none !important;
}

.goot-kaart[data-staat="onbenut"],
.goot-kaart-onbenut {
    background-color: #d4dae4 !important;
    border-color: #b8c0cc !important;
    box-shadow: none !important;
}

.goot-kaart-onbenut:hover {
    border-color: #b8c0cc;
    box-shadow: none;
}

.goot-kaart-onbenut .goot-breedte {
    color: #6e7a8f;
}

.goot-kaart-onbenut .goot-eenheid,
.goot-kaart-onbenut .goot-meta,
.goot-kaart-onbenut .goot-detail,
.goot-kaart-onbenut .goot-footer-label,
.goot-kaart-onbenut .goot-discipline,
.goot-kaart-onbenut .goot-item.ls .goot-discipline,
.goot-kaart-onbenut .goot-item.zs .goot-discipline,
.goot-kaart-onbenut .goot-item.dt .goot-discipline {
    color: #8a93a3;
}

.goot-kaart-onbenut .goot-segmentatie-note {
    color: #7a8290;
    font-weight: 500;
}

.goot-kaart-onbenut .goot-footer {
    border-top-color: #d4d9e2;
}

.goot-kaart-onbenut .goot-item {
    border-top-color: #dce0e8;
}

.goot-kaart-onbenut .goot-vak {
    background: #dfe3ea;
}

.goot-kaart-onbenut .goot-vak-label,
.goot-kaart-onbenut .goot-vak.ls .goot-vak-label,
.goot-kaart-onbenut .goot-vak.zs .goot-vak-label,
.goot-kaart-onbenut .goot-vak.dt .goot-vak-label {
    color: #7a8494;
}

.goot-kaart-onbenut .goot-vak-breedte {
    background: #d0d6e0;
    border-top-color: #b0b8c4;
    color: #5a6474;
}

.goot-kaart-onbenut .goot-scheiding {
    background: #9aa3b0;
}

.goot-doorsnede-onbenut,
.goot-doorsnede-overflow {
    border-color: #b8bec8;
    background: #e4e7ec;
}

.goot-bezet-zone--overflow .goot-vak {
    background: #dfe3ea;
}

.goot-bezet-zone--overflow .goot-vak-breedte {
    background: #c5cad3 !important;
    border-top-color: #a8b0bc !important;
    color: #5a6474 !important;
}

.goot-bezet-zone--overflow .goot-vak-label,
.goot-bezet-zone--overflow .goot-vak.ls .goot-vak-label,
.goot-bezet-zone--overflow .goot-vak.zs .goot-vak-label,
.goot-bezet-zone--overflow .goot-vak.dt .goot-vak-label {
    color: #7a8494;
}

.goot-kaart-ongeschikt {
    background: #e0e3e9;
    border-color: #c0c6d0;
    box-shadow: none;
    opacity: 0.92;
}

.goot-kaart-ongeschikt:hover {
    border-color: #c5cad3;
    box-shadow: none;
}

.goot-kaart-ongeschikt .goot-breedte {
    color: #8a93a3;
}

.goot-kaart-ongeschikt .goot-eenheid,
.goot-kaart-ongeschikt .goot-meta,
.goot-kaart-ongeschikt .goot-detail,
.goot-kaart-ongeschikt .goot-footer-label {
    color: #9aa3b0;
}

.goot-kaart-ongeschikt .goot-discipline,
.goot-kaart-ongeschikt .goot-item.ls .goot-discipline,
.goot-kaart-ongeschikt .goot-item.zs .goot-discipline,
.goot-kaart-ongeschikt .goot-item.dt .goot-discipline {
    color: #8a93a3;
}

.goot-kaart-ongeschikt .goot-segmentatie-note {
    color: #7a8290;
    font-weight: 600;
}

.goot-kaart-ongeschikt .goot-footer {
    border-top-color: #d8dce2;
}

.goot-kaart-ongeschikt .goot-item {
    border-top-color: #dde0e5;
}

.goot-kaart-ongeschikt .vulgraad-waarde {
    opacity: 0.65;
}

.goot-doorsnede-ongeschikt {
    border-color: #b8bec8;
    background: #e4e7ec;
}

.goot-kaart-ongeschikt .goot-vak {
    background: #e0e3e8;
}

.goot-kaart-ongeschikt .goot-vak-label,
.goot-kaart-ongeschikt .goot-vak.ls .goot-vak-label,
.goot-kaart-ongeschikt .goot-vak.zs .goot-vak-label,
.goot-kaart-ongeschikt .goot-vak.dt .goot-vak-label {
    color: #8a93a3;
}

.goot-kaart-ongeschikt .goot-vak-breedte {
    background: #d4d8df;
    border-top-color: #b8bec8;
    color: #6a7280;
}

.goot-kaart-ongeschikt .goot-scheiding {
    background: #9aa3b0;
}

.goot-kaart-ongeschikt .goot-onbenut {
    background: repeating-linear-gradient(
        -45deg,
        #d8dce2,
        #d8dce2 4px,
        #cdd2d9 4px,
        #cdd2d9 8px
    );
}

.goot-kop {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.goot-breedte {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1d4e9e;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.goot-eenheid {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6a7a8f;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.goot-meta {
    margin: 0 0 0.55rem;
    font-size: 8.5pt;
    color: #788696;
    line-height: 1.35;
}

.goot-segmentatie-note {
    font-weight: 600;
    color: #8a6d00;
}

.goot-segmentatie-waarschuwing {
    color: #7a6a30;
    font-weight: 500;
}

.goot-kaart-enkelvak {
    border-color: #e8d96a;
    background: linear-gradient(180deg, #fffef8 0%, #fff 35%);
}

.goot-lijst {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.goot-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.35rem 0.5rem;
    align-items: center;
    padding: 0.35rem 0;
    border-top: 1px solid #f0f2f5;
    font-size: 9pt;
}

.goot-item:first-child {
    border-top: none;
    padding-top: 0;
}

.goot-discipline {
    font-weight: 600;
    color: #444;
}

.goot-item.ls .goot-discipline { color: #1d4e9e; }
.goot-item.zs .goot-discipline { color: #2d6a4f; }
.goot-item.dt .goot-discipline { color: #7c4a03; }

.goot-item.gf .goot-discipline { color: #0d6e6e; }

.goot-vak.gf .goot-vak-label { color: #0d6e6e; }

.goot-detail {
    font-size: 8pt;
    color: #999;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.goot-vulgraad {
    text-align: right;
    min-width: 3.5rem;
}

.goot-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 2px solid #e4e9f0;
}

.goot-footer-label {
    font-size: 9pt;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.goot-totaal .vulgraad-waarde {
    font-size: 11pt;
}

.vulgraad-waarde {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 10pt;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vulgraad-waarde.vulgraad-groot {
    padding: 0.25rem 0.65rem;
    font-size: 12pt;
}

.vulgraad-waarde.ok { color: #222; background: #f0f4f8; }
.vulgraad-waarde.waarschuwing { background: #ffd966; color: #333; }
.vulgraad-waarde.kritiek { background: #e74c3c; color: #fff; }
.vulgraad-waarde.overflow { background: #b8c0cc; color: #4a5568; }

.goot-kaart-onbenut .vulgraad-waarde,
.goot-kaart-overflow .vulgraad-waarde {
    background: #aeb6c4 !important;
    color: #4a5568 !important;
}

.goot-kaart[data-staat="overflow"],
.goot-kaart-overflow {
    background-color: #d4dae4 !important;
    border-color: #b8c0cc !important;
    box-shadow: none !important;
}

/* Catalogus – leesbare kolommen */
.catalogus-sectie {
    min-width: 0;
    overflow-x: auto;
    padding: 1rem 1.1rem 1.15rem;
    background: #fff;
    border: 1px solid #d0d5de;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.catalogus-sectie .sectie-titel {
    margin: 0 0 0.75rem;
    font-size: 12pt;
    color: #1d4e9e;
}

.catalogus-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: transparent;
    border: none;
    overflow: visible;
    font-size: 10pt;
}

.cat-kolommen {
    display: grid;
    grid-template-columns: 1.3fr 1.1fr 0.95fr 0.95fr;
    gap: 0.65rem;
    align-items: stretch;
    min-width: min(100%, 52rem);
}

.cat-kolom[data-discipline="laagspanning"] {
    --cat-cols: minmax(0, 1fr) 3.5rem 4.25rem;
}

.cat-kolom[data-discipline="zwakstroom"] {
    --cat-cols: minmax(0, 1fr) 3.5rem 4rem;
}

.cat-kolom[data-discipline="data"],
.cat-kolom[data-discipline="glasvezel"] {
    --cat-cols: minmax(0, 1fr) 3.5rem 4rem;
}

.discipline-kop--glasvezel {
    background: #1d4e9e;
}

.cat-kolom {
    --cat-cols: minmax(0, 1fr) 3.5rem 4rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: #fff;
    border: 1px solid #c8cdd6;
    border-radius: 8px;
    overflow: hidden;
    font-size: 10pt;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.cat-kolom-rijen {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.cat-kolom .discipline-kop {
    display: block;
    text-align: center;
}

.cat-kolom-rijen .cat-rij:nth-child(even) {
    background: #f6f8fb;
}

.cat-kop,
.cat-rij,
.discipline-kop,
.cat-footer {
    display: grid;
    grid-template-columns: var(--cat-cols);
    gap: 0.35rem 0.5rem;
    align-items: center;
    padding: 0.35rem 0.7rem;
}

.cat-kop {
    position: sticky;
    top: 0;
    z-index: 3;
    font-size: 9pt;
    font-weight: 700;
    color: #444;
    text-align: center;
    background: #eef2f8;
    border-bottom: 2px solid #c8d4e8;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.cat-kop-cel em,
.cat-kop .kop-aantal em {
    display: block;
    font-size: 7pt;
    font-weight: 600;
    font-style: normal;
    color: #888;
    margin-top: 0.05rem;
}

.cat-kop .cat-naam,
.cat-rij .cat-naam {
    text-align: left;
}

.cat-kop .kop-aantal {
    background: transparent;
    color: inherit;
    font-weight: 700;
    padding: 0;
    border: none;
    border-radius: 0;
}

.cat-kop .kop-aantal em {
    color: #888;
}

.cat-rijen {
    max-height: min(58vh, 28rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.cat-rijen .cat-rij:nth-child(even) {
    background: #f8f9fb;
}

.cat-rij {
    font-size: 10pt;
    border-bottom: 1px solid #e8ebf0;
    min-height: 2.15rem;
}

.cat-rij:hover {
    background: #eef4fa;
}

.cat-naam {
    font-size: 9.5pt;
    font-weight: 500;
    color: #1a1a1a;
    padding-right: 0.4rem;
    line-height: 1.35;
    word-break: break-word;
}

.cat-rij .waarde {
    font-size: 9.5pt;
    color: #444;
    text-align: center;
    padding: 0;
}

.cat-veld {
    display: flex;
    justify-content: center;
}

.cat-veld.aantal {
    background: #fffbe8;
    margin: -0.05rem -0.15rem;
    padding: 0.12rem 0.2rem;
    border-left: 1px solid #ffe600;
    border-right: 1px solid #ffe600;
}

.cat-veld .veld-aantal {
    width: 100%;
    min-width: 3rem;
    max-width: 4.25rem;
    font-size: 12pt;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: #fff566;
    border: 1px solid #d4b800;
    border-radius: 4px;
    padding: 0.28rem 0.35rem;
    line-height: 1.1;
}

.cat-veld .veld-aantal:focus {
    outline: none;
    border-color: #1d4e9e;
    background: #fffef0;
    box-shadow: 0 0 0 2px rgba(29, 78, 158, 0.18);
}

.cat-veld .veld-grijs {
    width: 100%;
    max-width: 4.25rem;
    font-size: 9.5pt;
    padding: 0.2rem 0.3rem;
    text-align: center;
}

.cat-rij .cat-bezet {
    font-weight: 600;
    font-size: 9.5pt;
    color: #333;
}

.discipline-kop {
    font-weight: 700;
    font-size: 10pt;
    color: #fff;
    background: #1d4e9e;
    padding: 0.45rem 0.7rem;
    margin-top: 0;
    border-bottom: none;
    border-top: none;
    letter-spacing: 0.03em;
}

.cat-kolom .cat-kop + .cat-kolom-rijen .cat-rij:first-child,
.discipline-kop + .cat-rij,
.cat-rij:first-child {
    border-top: none;
}

.cat-footer {
    grid-template-columns: 1fr auto;
    background: #f4f6f9;
    border: 1px solid #d0d5de;
    border-radius: 6px;
    padding: 0.55rem 0.85rem;
    font-size: 10pt;
}

.cat-footer-label {
    text-align: right;
    font-weight: 700;
    color: #444;
}

/* Gewicht-balk */
.gewicht-balk {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #d0d5de;
}

.gewicht-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.gewicht-label {
    font-size: 10pt;
    font-weight: 700;
    color: #555;
}

.gewicht-item .eenheid {
    font-size: 9pt;
    color: #888;
}

.gewicht-totaal .waarde {
    font-size: 12pt;
    color: #1d4e9e;
}

@media (max-width: 1100px) {
    .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cat-kolommen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .cat-kolommen {
        grid-template-columns: 1fr;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .scenario-grid {
        grid-template-columns: 1fr;
    }

    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-sectie {
        padding: 0.85rem;
    }

    .goot-sectie {
        padding: 0.85rem;
    }

    .vak-breedtes-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Kabelberekening ── */
.kb-pagina .pagina-wrap {
    max-width: 1280px;
}

.kb-blad {
    --kb-invoer: #fff566;
    --kb-standaard: #e2e2e2;
    --kb-rand: #d0d5de;
    --kb-accent: #1d4e9e;
}

.kb-kop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.15rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid #c8cdd6;
}

.kb-kop__tekst {
    flex: 1;
    min-width: 0;
}

.kb-kop__badge {
    margin: 0 0 0.35rem;
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kb-accent);
    background: rgba(29, 78, 158, 0.08);
    border: 1px solid rgba(29, 78, 158, 0.15);
    border-radius: 3px;
}

.kb-kop__titel {
    margin: 0;
    font-size: 17pt;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.kb-kop__sub {
    margin: 0.35rem 0 0;
    font-size: 10pt;
    color: #667;
    line-height: 1.4;
}

.kb-kop__logo {
    height: 58px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    opacity: 0.96;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}

.kb-project {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem 0.9rem;
    background: linear-gradient(180deg, #fffef5 0%, #fff9d6 100%);
    border: 1px solid #e8d96a;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.kb-invoer--omschrijving {
    display: block;
    width: 100%;
    margin-bottom: 0.85rem;
    font-size: 11pt;
    font-weight: 600;
    padding: 0.5rem 0.65rem;
}

.kb-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem 1.25rem;
}

.kb-meta .kb-veld {
    grid-column: auto;
}

.kb-veld--meta label {
    font-size: 8.5pt;
    font-weight: 700;
    color: #5a5a00;
    letter-spacing: 0.04em;
}

.kb-veld--meta .kb-invoer {
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.kb-veld--meta .kb-invoer::placeholder {
    color: rgba(0, 0, 0, 0.28);
    font-weight: 400;
}

.kb-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 9pt;
    color: #666;
}

.kb-legenda__item::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.35rem;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: -2px;
}

.kb-legenda__item--invoer::before { background: var(--kb-invoer); }
.kb-legenda__item--standaard::before { background: var(--kb-standaard); }
.kb-legenda__item--berekend::before { background: #fff; }

.kb-werkblad {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.25rem;
    align-items: start;
}

.kb-form,
.kb-resultaat {
    background: #fff;
    border: 1px solid var(--kb-rand);
    border-radius: 8px;
    padding: 1rem 1.15rem 1.2rem;
}

.kb-resultaat {
    background: linear-gradient(180deg, #f8fafc 0%, #f0f4fa 100%);
    border-color: #c8d4e8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.kb-paneel__titel {
    margin: 0 0 0.85rem;
    font-size: 11pt;
    font-weight: 700;
    color: #333;
}

.kb-sectie + .kb-sectie {
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef1f5;
}

.kb-sectie__titel {
    margin: 0 0 0.55rem;
    font-size: 9pt;
    font-weight: 700;
    color: var(--kb-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kb-sectie__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.55rem 0.75rem;
}

.kb-veld {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.kb-veld--xs { grid-column: span 3; }
.kb-veld--breed { grid-column: span 8; }

.kb-veld label {
    font-size: 9pt;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kb-veld__invoer {
    display: flex;
    align-items: center;
}

.kb-veld__invoer[data-unit]::after {
    content: attr(data-unit);
    margin-left: 0.4rem;
    font-size: 9pt;
    color: #666;
    white-space: nowrap;
}

.kb-invoer {
    width: 100%;
    font-family: inherit;
    font-size: 11pt;
    padding: 0.38rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--kb-invoer);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.kb-invoer--grijs {
    background: var(--kb-standaard);
}

.kb-invoer--xs {
    max-width: 5.5rem;
}

.kb-invoer--breed {
    min-width: 12rem;
}

.kb-invoer:focus {
    outline: none;
    border-color: var(--kb-accent);
    box-shadow: 0 0 0 2px rgba(29, 78, 158, 0.2);
}

.kb-form[data-modus] .kb-veld[data-modus] {
    display: none;
}

.kb-form[data-modus="vermogen"] .kb-veld[data-modus="vermogen"],
.kb-form[data-modus="stroom"] .kb-veld[data-modus="stroom"],
.kb-form[data-modus="doorsnede"] .kb-veld[data-modus="doorsnede"] {
    display: flex;
}

.kb-oordeel {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 11pt;
    margin-bottom: 1rem;
    text-align: center;
}

.kb-oordeel--ok {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

.kb-oordeel--kritiek {
    background: #fde8e8;
    color: #a00;
    border: 1px solid #e8a0a0;
}

.kb-resultaten {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 1rem;
    margin: 0 0 1rem;
    font-size: 10pt;
}

.kb-resultaten dt {
    margin: 0;
    padding: 0.38rem 0;
    color: #555;
    border-bottom: 1px solid #eef1f5;
}

.kb-resultaten dd {
    margin: 0;
    padding: 0.38rem 0;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: #111;
    border-bottom: 1px solid #eef1f5;
}

.kb-resultaten .kb-resultaat--accent {
    font-weight: 700;
    color: var(--kb-accent);
    background: rgba(255, 255, 255, 0.65);
    margin: 0 -0.35rem;
    padding: 0.45rem 0.35rem;
    border-bottom: none;
    border-radius: 4px;
}

.kb-resultaten dt:has(+ .kb-resultaat--accent) {
    font-weight: 700;
    color: #333;
    border-bottom: none;
}

.kb-resultaat--wrap {
    white-space: normal;
    font-size: 9pt;
    color: #444;
    max-width: 14rem;
}

.kb-controles {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.kb-controle {
    padding: 0.45rem 0.6rem 0.45rem 2rem;
    border-radius: 4px;
    font-size: 9.5pt;
    line-height: 1.35;
    position: relative;
}

.kb-controle::before {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    width: 1rem;
    text-align: center;
}

.kb-controle--ok {
    background: #f0f7f0;
    color: #2e5c2e;
}

.kb-controle--ok::before {
    content: '✓';
}

.kb-controle--kritiek {
    background: #fff0f0;
    color: #8b0000;
}

.kb-controle--kritiek::before {
    content: '✗';
}

.kb-formules {
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px dashed #d4dbe8;
    font-size: 8.5pt;
    color: #777;
    line-height: 1.5;
}

@media (max-width: 960px) {
    .kb-werkblad {
        grid-template-columns: 1fr;
    }

    .kb-veld,
    .kb-veld--xs,
    .kb-veld--breed {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .kb-kop {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .kb-kop__logo {
        align-self: flex-end;
        height: 48px;
    }

    .kb-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .kb-sectie__grid {
        grid-template-columns: 1fr;
    }

    .kb-veld,
    .kb-veld--xs,
    .kb-veld--breed {
        grid-column: 1 / -1;
    }

    .kb-invoer--xs {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .excel-pagina {
        padding: 0.5rem;
    }

    .excel-blad {
        padding: 1rem;
    }

    .blad-kop {
        flex-direction: column;
    }

    .catalogus-grid {
        --cat-cols: minmax(8rem, 1.4fr) repeat(8, minmax(3rem, 1fr));
        font-size: 9pt;
    }
}

/* Print / opslaan knoppen (gedeeld met kortsluitberekening) */
.ks-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.vg-pagina .bovenbalk-rechts .ks-acties {
    margin-right: 0.25rem;
    padding-right: 0.75rem;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.ks-acties--onder {
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0.45rem;
    border-top: 1px solid #c8cdd6;
}

.ks-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.65rem;
    padding: 0.3rem 0.75rem;
    font-family: inherit;
    font-size: 10pt;
    font-weight: 600;
    line-height: 1.2;
    color: #1d4e9e;
    background: #fff;
    border: 1px solid #8fa3bc;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ks-knop:hover {
    background: #eef3fa;
    border-color: #1d4e9e;
}

.ks-knop--primair {
    color: #fff;
    background: #1d4e9e;
    border-color: #163d7d;
}

.ks-knop--primair:hover {
    background: #163d7d;
}

/* Vulgraad – A3 liggend (420 × 297 mm) */
.vg-pagina {
    --vg-blad-b: 420mm;
    --vg-blad-h: 297mm;
    /* Huisstijl – afgestemd op Van Buuren logo */
    --vg-blauw: #164a85;
    --vg-blauw-licht: #2a6cb8;
    --vg-geel: #e8c84a;
    --vg-geel-zacht: #faf7ec;
    --vg-geel-invoer: #fffdf8;
    --vg-geel-rand: #d4bc6a;
    --vg-oppervlak: #ffffff;
    --vg-pagina-bg: #e6eaef;
    --vg-blad-bg: #f8f9fb;
    --vg-rand: #cfd6e2;
    --vg-rand-licht: #e4e9f0;
    --vg-tekst: #2c3a4d;
    --vg-tekst-muted: #5e6d80;
}

/* Vulgraad – rustige layout, logo-kleuren */
.vg-pagina.excel-pagina {
    background: var(--vg-pagina-bg);
}

.vg-pagina .excel-blad {
    background: var(--vg-blad-bg);
    border: 1px solid var(--vg-rand-licht);
    box-shadow: 0 2px 10px rgba(22, 74, 133, 0.08);
}

.vg-pagina .blad-kop {
    border-bottom-color: var(--vg-rand);
}

.vg-pagina .blad-titel {
    color: var(--vg-blauw);
}

.vg-pagina .project-sectie {
    background: var(--vg-oppervlak);
    border: 1px solid var(--vg-rand);
    border-left: 3px solid var(--vg-blauw);
    border-radius: 6px;
    box-shadow: none;
}

.vg-pagina .project-grid .veld-groep label {
    color: var(--vg-blauw);
    font-weight: 600;
}

.vg-pagina .project-grid .veld-geel {
    background: var(--vg-geel-invoer);
    border: 1px solid var(--vg-rand);
    border-bottom: 2px solid var(--vg-geel-rand);
    color: var(--vg-tekst);
}

.vg-pagina .project-grid .veld-geel::placeholder {
    color: rgba(44, 58, 77, 0.35);
}

.vg-pagina .legenda {
    color: var(--vg-tekst-muted);
}

.vg-pagina .legenda .swatch.geel {
    background: var(--vg-geel);
    border-color: var(--vg-geel-rand);
}

.vg-pagina .goot-sectie {
    background: var(--vg-oppervlak);
    border: 1px solid var(--vg-rand);
    border-radius: 6px;
    box-shadow: none;
}

.vg-pagina .goot-sectie .sectie-titel,
.vg-pagina .catalogus-sectie .sectie-titel {
    color: var(--vg-blauw);
}

.vg-pagina .goot-instellingen {
    background: #f4f7fb;
    border-color: var(--vg-rand);
}

.vg-pagina .segmentatie-label {
    color: var(--vg-blauw);
}

.vg-pagina .segmentatie-keuze {
    background: var(--vg-rand-licht);
    border-color: var(--vg-rand);
}

.vg-pagina .segmentatie-optie input:checked + .segmentatie-knop {
    color: var(--vg-blauw);
    box-shadow: 0 1px 3px rgba(22, 74, 133, 0.12);
}

.vg-pagina .goot-kaart {
    background: var(--vg-oppervlak);
    border-color: var(--vg-rand);
    box-shadow: none;
}

.vg-pagina .goot-kaart:hover {
    border-color: var(--vg-blauw-licht);
    box-shadow: 0 2px 6px rgba(22, 74, 133, 0.08);
}

.vg-pagina .goot-breedte {
    color: var(--vg-blauw);
}

.vg-pagina .goot-doorsnede {
    background: #f4f6f9;
    border-color: #a8b4c4;
}

.vg-pagina .goot-vak-breedte {
    background: var(--vg-geel);
    border-top-color: var(--vg-geel-rand);
    color: var(--vg-tekst);
}

.vg-pagina .goot-vak.ls .goot-vak-label {
    color: var(--vg-blauw);
}

.vg-pagina .catalogus-sectie {
    background: var(--vg-oppervlak);
    border: 1px solid var(--vg-rand);
    border-radius: 6px;
    box-shadow: none;
}

.vg-pagina .discipline-kop {
    background: var(--vg-blauw);
}

.vg-pagina .discipline-kop--glasvezel {
    background: var(--vg-blauw);
}

.vg-pagina .cat-kop {
    background: #f0f4f9;
    border-bottom-color: var(--vg-rand);
    color: var(--vg-tekst-muted);
}

.vg-pagina .cat-kop .kop-aantal {
    background: transparent;
    color: inherit;
    border: none;
    font-weight: 700;
    padding: 0;
}

.vg-pagina .cat-kop .kop-aantal em {
    color: var(--vg-tekst-muted);
}

.vg-pagina .cat-naam {
    color: var(--vg-tekst);
}

.vg-pagina .cat-veld.aantal {
    background: transparent;
    border-left: none;
    border-right: none;
}

.vg-pagina .cat-veld .veld-aantal {
    background: var(--vg-geel-invoer);
    border: 1px solid var(--vg-geel-rand);
    color: var(--vg-tekst);
}

.vg-pagina .cat-veld .veld-aantal:focus {
    border-color: var(--vg-blauw);
    background: var(--vg-oppervlak);
    box-shadow: 0 0 0 2px rgba(22, 74, 133, 0.15);
}

.vg-pagina .cat-kolom-rijen .cat-rij:nth-child(even) {
    background: #f6f8fb;
}

.vg-pagina .cat-rij:hover {
    background: #eef3f9;
}

.vg-pagina .cat-footer {
    background: #f0f4f9;
    border-color: var(--vg-rand);
}

.vg-pagina .cat-footer-label {
    color: var(--vg-tekst-muted);
}

.vg-pagina .gewicht-balk {
    background: #f0f4f9;
    border: 1px solid var(--vg-rand);
    border-radius: 6px;
}

.vg-pagina .gewicht-label {
    color: var(--vg-tekst-muted);
}

.vg-pagina .gewicht-totaal .waarde {
    color: var(--vg-blauw);
}

.vg-pagina .vak-breedtes-grid [data-vak="laagspanning"] label {
    color: var(--vg-blauw);
}

.vg-pagina .vulgraad-waarde.waarschuwing {
    background: #f5e6a8;
    color: #5a4a10;
}

@media (min-width: 900px) and (min-height: 600px) {
    .vg-pagina.excel-pagina {
        height: 100dvh;
        min-height: 100vh;
        overflow: hidden;
        padding: 0.35rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .vg-pagina .pagina-wrap {
        width: var(--vg-blad-b);
        max-width: calc(100vw - 1rem);
        transform: scale(var(--vg-schaal, 1));
        transform-origin: top center;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
    }

    .vg-pagina .excel-bovenbalk {
        flex-shrink: 0;
        margin-bottom: 0.25rem;
    }

    .vg-pagina .excel-blad {
        width: var(--vg-blad-b);
        height: var(--vg-blad-h);
        max-height: var(--vg-blad-h);
        flex: 0 0 var(--vg-blad-h);
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 4mm 6mm 4.5mm;
        box-sizing: border-box;
    }

    .vg-pagina .blad-kop {
        flex-shrink: 0;
        margin-bottom: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .vg-pagina .blad-titel {
        font-size: 12pt;
    }

    .vg-pagina .project-sectie {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem 1.5rem;
        margin-bottom: 0.3rem;
        padding: 0.35rem 0.5rem 0.4rem;
    }

    .vg-pagina .project-grid {
        flex: 0 0 auto;
        grid-template-columns: 1fr;
        gap: 0.28rem;
        width: auto;
        max-width: none;
    }

    .vg-pagina .project-grid .veld-groep {
        display: grid;
        grid-template-columns: 28mm 62mm;
        align-items: center;
        gap: 0.35rem 0.5rem;
        min-width: 0;
    }

    .vg-pagina .project-grid .veld-groep label {
        font-size: 7pt;
        margin: 0;
    }

    .vg-pagina .project-grid .veld-geel {
        font-size: 9pt;
        padding: 0.22rem 0.45rem;
        width: 100%;
        max-width: 62mm;
    }

    .vg-pagina .project-logo {
        flex: 1 1 auto;
        margin-left: auto;
        height: 20mm;
        max-height: 80px;
        width: auto;
        opacity: 1;
        object-fit: contain;
        object-position: right center;
    }

    .vg-pagina .legenda {
        flex-shrink: 0;
        margin-bottom: 0.3rem;
        font-size: 7.5pt;
        gap: 0.25rem 0.65rem;
    }

    .vg-pagina .legenda .swatch {
        width: 10px;
        height: 10px;
    }

    .vg-pagina .goot-sectie {
        flex-shrink: 0;
        margin-bottom: 0.3rem;
        padding: 0.4rem 0.5rem 0.45rem;
    }

    .vg-pagina .sectie-kop {
        margin-bottom: 0.3rem;
        min-height: 3.25rem;
    }

    .vg-pagina .sectie-kop-rij {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 0.35rem 1.25rem;
    }

    .vg-pagina .sectie-kop-rij > div:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    .vg-pagina .sectie-kop-rij > .goot-instellingen {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        flex: none;
        max-width: none;
        margin-left: 0;
    }

    .vg-pagina .goot-instellingen {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 0.65rem 0.85rem;
        padding: 0.4rem 0.55rem;
    }

    .vg-pagina .vak-breedtes {
        margin: 0;
        padding: 0;
        border-top: none;
    }

    .vg-pagina .vak-breedtes-grid {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 0.55rem 0.75rem;
    }

    .vg-pagina .vak-breedtes-grid .veld-groep {
        min-width: 0;
    }

    .vg-pagina .vak-breedtes-grid .veld-groep label {
        font-size: 7pt;
        margin-bottom: 0.1rem;
    }

    .vg-pagina .vak-breedtes-grid .veld-met-eenheid .veld-grijs {
        min-width: 2.75rem;
        max-width: 3.5rem;
        font-size: 10pt;
        padding: 0.22rem 0.3rem;
    }

    .vg-pagina .vak-breedtes-grid .veld-met-eenheid span {
        font-size: 8pt;
    }

    .vg-pagina .segmentatie-groep {
        align-items: flex-end;
        text-align: right;
        flex-shrink: 0;
    }

    .vg-pagina .segmentatie-keuze {
        align-self: flex-end;
    }

    .vg-pagina .goot-sectie .sectie-titel {
        font-size: 10pt;
        margin-bottom: 0;
    }

    .vg-pagina .goot-sectie .sectie-oms,
    .vg-pagina .vak-breedtes-oms,
    .vg-pagina .segmentatie-legend {
        display: none;
    }

    .vg-pagina .scenario-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.45rem 0.55rem;
    }

    .vg-pagina .goot-kaart {
        padding: 0.45rem 0.55rem 0.5rem;
    }

    .vg-pagina .goot-kop {
        order: -1;
        margin-bottom: 0.3rem;
    }

    .vg-pagina .goot-doorsnede-wrap {
        margin-bottom: 0.3rem;
    }

    .vg-pagina .goot-doorsnede {
        min-height: 3.85rem;
        border-width: 2px;
    }

    .vg-pagina .goot-diepte-label {
        font-size: 7pt;
    }

    .vg-pagina .goot-breedte {
        font-size: 1.2rem;
    }

    .vg-pagina .goot-eenheid {
        font-size: 0.7rem;
    }

    .vg-pagina .goot-footer-label {
        font-size: 7.5pt;
    }

    .vg-pagina .goot-totaal .vulgraad-waarde {
        font-size: 10pt;
        padding: 0.15rem 0.45rem;
    }

    .vg-pagina .goot-meta,
    .vg-pagina .goot-lijst {
        display: none;
    }

    .vg-pagina .goot-footer {
        margin-top: 0.2rem;
        padding-top: 0.3rem;
    }

    .vg-pagina .blad-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .vg-pagina .catalogus-sectie {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0.35rem 0.45rem 0.35rem;
        overflow: hidden;
    }

    .vg-pagina .catalogus-kop-rij {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.35rem;
    }

    .vg-pagina .catalogus-sectie .sectie-titel {
        margin: 0;
        font-size: 10.5pt;
    }

    .vg-pagina .catalogus-grid {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .vg-pagina .cat-kolommen {
        flex: 1;
        min-height: 0;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.45rem;
        align-items: start;
    }

    .vg-pagina .cat-kolom {
        --cat-cols: minmax(0, 1fr) 13mm 15mm;
        font-size: 9.5pt;
        min-height: 0;
        max-height: 100%;
    }

    .vg-pagina .discipline-kop {
        padding: 0.32rem 0.45rem;
        font-size: 9pt;
    }

    .vg-pagina .cat-kop {
        padding: 0.28rem 0.45rem;
        font-size: 7.5pt;
    }

    .vg-pagina .cat-kop .kop-aantal {
        padding: 0;
    }

    .vg-pagina .cat-kop .kop-aantal em {
        font-size: 6.5pt;
    }

    .vg-pagina .cat-kop,
    .vg-pagina .cat-rij {
        padding: 0.22rem 0.45rem;
        gap: 0.25rem 0.35rem;
    }

    .vg-pagina .cat-rij {
        min-height: 1.55rem;
        font-size: 9pt;
    }

    .vg-pagina .cat-naam {
        font-size: 8.5pt;
        font-weight: 600;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .vg-pagina .cat-rij .waarde,
    .vg-pagina .cat-rij .cat-bezet {
        font-size: 8.5pt;
        font-weight: 600;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .vg-pagina .cat-veld .veld-aantal {
        font-size: 10pt;
        min-width: 3rem;
        max-width: 3.75rem;
        min-height: 1.35rem;
        padding: 0.18rem 0.25rem;
    }

    .vg-pagina .cat-veld.aantal {
        padding: 0.1rem 0.15rem;
    }

    .vg-pagina .cat-kolom-rijen {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    .vg-pagina .cat-kolom-rijen .cat-rij:nth-child(even) {
        background: #f4f7fb;
    }

    .vg-pagina .cat-footer {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.28rem 0.55rem;
        font-size: 9pt;
        border-radius: 4px;
        background: #eef2f8;
        border: 1px solid #c8d4e8;
    }

    .vg-pagina .cat-footer-label {
        text-align: left;
        font-weight: 700;
        color: #444;
        white-space: nowrap;
    }

    .vg-pagina .gewicht-balk {
        flex-shrink: 0;
        margin-top: 0.3rem;
        padding: 0.3rem 0.5rem;
        gap: 0.5rem 1.25rem;
    }

    .vg-pagina .gewicht-label {
        font-size: 8.5pt;
    }

    .vg-pagina .gewicht-totaal .waarde {
        font-size: 10pt;
    }
}

@media (min-width: 900px) and (max-height: 820px) {
    .vg-pagina .legenda {
        display: none;
    }

    .vg-pagina .goot-doorsnede {
        min-height: 2rem;
    }

    .vg-pagina .cat-rij {
        min-height: 1.05rem;
    }

    .vg-pagina .cat-naam {
        font-size: 7pt;
    }
}

@page {
    size: A3 landscape;
    margin: 5mm 6mm;
}

@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html,
    body.vg-pagina {
        height: auto !important;
        overflow: hidden !important;
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .no-print,
    .pagina-bovenbalk,
    .legenda,
    .sectie-oms,
    .vak-breedtes-oms,
    .segmentatie-legend,
    .goot-instellingen,
    .vak-breedtes,
    .goot-meta,
    .goot-lijst {
        display: none !important;
    }

    .vg-pagina.excel-pagina {
        padding: 0 !important;
        background: #fff !important;
        min-height: 0 !important;
        height: auto !important;
        display: block !important;
    }

    .vg-pagina .pagina-wrap {
        width: var(--vg-blad-b) !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    .vg-print-voorbereid .vg-pagina .excel-blad,
    .vg-pagina .excel-blad {
        width: var(--vg-blad-b) !important;
        height: auto !important;
        max-height: none !important;
        box-shadow: none !important;
        padding: 3mm 4mm 3.5mm !important;
        background: #fff !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        zoom: var(--vg-print-schaal, 1);
        transform: scale(var(--vg-print-schaal, 1));
        transform-origin: top left;
    }

    .vg-print-voorbereid .goot-kaart[data-staat="onbenut"],
    .vg-pagina .goot-kaart[data-staat="onbenut"],
    .vg-print-voorbereid .goot-kaart[data-staat="overflow"],
    .vg-pagina .goot-kaart[data-staat="overflow"] {
        display: none !important;
    }

    .vg-print-voorbereid .goot-kaart[hidden],
    .vg-pagina .goot-kaart[hidden] {
        display: none !important;
    }

    .vg-pagina .blad-kop {
        margin-bottom: 2mm !important;
        padding-bottom: 2mm !important;
        gap: 4mm !important;
    }

    .vg-pagina .blad-titel {
        font-size: 11pt !important;
    }

    .vg-pagina .project-sectie {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 3mm 5mm !important;
        margin-bottom: 2mm !important;
        padding: 2mm 2.5mm !important;
    }

    .vg-pagina .project-grid {
        flex: 0 0 auto !important;
        grid-template-columns: 1fr !important;
        gap: 1mm !important;
    }

    .vg-pagina .project-grid .veld-groep {
        display: grid !important;
        grid-template-columns: 28mm 52mm !important;
        align-items: center !important;
        gap: 1mm 2mm !important;
    }

    .vg-pagina .project-grid .veld-geel {
        max-width: 52mm !important;
    }

    .vg-pagina .project-logo {
        height: 16mm !important;
        max-height: none !important;
        margin-left: auto !important;
        opacity: 1 !important;
        object-position: right center !important;
    }

    .vg-pagina .project-grid .veld-groep label {
        font-size: 6.5pt !important;
    }

    .vg-pagina .project-grid .veld-geel {
        font-size: 8pt !important;
        padding: 0.5mm 1mm !important;
        border: 1px solid #ccc !important;
    }

    .vg-pagina .sectie-kop-rij {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 1.5mm 4mm !important;
    }

    .vg-pagina .sectie-kop-rij > .goot-instellingen {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
    }

    .vg-pagina .goot-sectie {
        margin-bottom: 2mm !important;
        padding: 2mm 2.5mm !important;
    }

    .vg-pagina .sectie-kop {
        margin-bottom: 1.5mm !important;
    }

    .vg-pagina .goot-sectie .sectie-titel {
        font-size: 9pt !important;
        margin: 0 !important;
    }

    .vg-pagina .scenario-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 2mm 2.5mm !important;
    }

    .vg-pagina .goot-kaart {
        padding: 1.5mm 2mm !important;
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
    }

    .vg-pagina .goot-kop {
        order: -1;
    }

    .vg-pagina .goot-doorsnede {
        min-height: 16mm !important;
        border-width: 2px !important;
    }

    .vg-pagina .goot-breedte {
        font-size: 9pt !important;
    }

    .vg-pagina .goot-footer {
        margin-top: 0.5mm !important;
        padding-top: 0.5mm !important;
    }

    .vg-pagina .goot-footer-label {
        font-size: 6pt !important;
    }

    .vg-pagina .goot-totaal .vulgraad-waarde {
        font-size: 7.5pt !important;
        padding: 0.3mm 1mm !important;
    }

    .vg-pagina .catalogus-sectie {
        margin: 0 !important;
        padding: 2mm 2.5mm !important;
        box-shadow: none !important;
    }

    .vg-pagina .catalogus-kop-rij {
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 1.5mm !important;
    }

    .vg-pagina .catalogus-sectie .sectie-titel {
        font-size: 9pt !important;
        margin: 0 !important;
    }

    .vg-pagina .cat-kolommen {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 2mm !important;
        align-items: start !important;
    }

    .vg-pagina .cat-kolom {
        --cat-cols: minmax(0, 1fr) 11mm 13mm !important;
        font-size: 7.5pt !important;
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none !important;
    }

    .vg-pagina .discipline-kop {
        padding: 1mm 1.2mm !important;
        font-size: 7.5pt !important;
    }

    .vg-pagina .cat-kop,
    .vg-pagina .cat-rij {
        padding: 0.7mm 1.2mm !important;
        gap: 0.5mm 1mm !important;
    }

    .vg-pagina .cat-kop {
        font-size: 6.5pt !important;
    }

    .vg-pagina .cat-rij {
        min-height: auto !important;
        font-size: 7pt !important;
    }

    .vg-pagina .cat-naam {
        font-size: 6.5pt !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .vg-pagina .cat-rij .waarde,
    .vg-pagina .cat-rij .cat-bezet {
        font-size: 6.5pt !important;
        text-align: right !important;
    }

    .vg-pagina .cat-veld .veld-aantal {
        font-size: 7.5pt !important;
        min-width: 8mm !important;
        max-width: 11mm !important;
        padding: 0.4mm 0.6mm !important;
        border: 1px solid #ccc !important;
    }

    .vg-pagina .cat-kolom-rijen {
        overflow: visible !important;
    }

    .vg-pagina .cat-footer {
        display: flex !important;
        padding: 1mm 2mm !important;
        font-size: 7pt !important;
    }

    .vg-pagina .gewicht-balk {
        margin-top: 2mm !important;
        padding: 1.5mm 2mm !important;
        gap: 3mm 8mm !important;
    }

    .vg-pagina .gewicht-label {
        font-size: 7pt !important;
    }

    .vg-pagina .gewicht-totaal .waarde {
        font-size: 9pt !important;
    }
}