/* VolleKR8 Learning Campus – deelnemersomgeving */
.vk8-campus{
    --vk8-green:#17645f;
    --vk8-orange:#ff9418;
    --vk8-sand:#f4efe7;
    --vk8-ink:#23282d;
    --vk8-muted:#667085;
    --vk8-border:#e3e6e8;
    width:min(1240px, calc(100vw - 48px));
    max-width:none;
    margin-left:50%;
    margin-right:0;
    transform:translateX(-50%);
    padding:20px 18px 64px;
    color:var(--vk8-ink);
    font-size:17px;
    line-height:1.6;
}
.vk8-campus *{box-sizing:border-box}
.vk8-campus h1,.vk8-campus h2,.vk8-campus h3{line-height:1.18;color:var(--vk8-ink)}
.vk8-campus h1{font-size:clamp(34px,4vw,54px);margin:4px 0 14px}
.vk8-campus h2{font-size:28px;margin:0 0 10px}
.vk8-campus h3{font-size:21px;margin:0 0 7px}
.vk8-campus p{margin:0 0 14px}
.vk8-campus-eyebrow,.vk8-campus-kicker,.vk8-campus-block-type{
    display:block;
    color:var(--vk8-green);
    font-weight:700;
    letter-spacing:.025em;
    font-size:14px;
}
.vk8-campus-hero{
    padding:34px 38px;
    margin:0 0 24px;
    border-radius:22px;
    background:var(--vk8-sand);
}
.vk8-campus-hero>p{max-width:850px;font-size:19px;color:#4b5563}
.vk8-campus-hero--module{background:#f7f9f8}
.vk8-campus-hero--form{background:#f7f9f8}
.vk8-campus-back{
    display:inline-block;
    margin:0 0 18px;
    color:var(--vk8-green);
    text-decoration:none;
    font-weight:700;
}
.vk8-campus-card,.vk8-campus-section,.vk8-campus-empty{
    background:#fff;
    border:1px solid var(--vk8-border);
    border-radius:18px;
    padding:28px 30px;
    margin:0 0 22px;
    box-shadow:0 2px 10px rgba(15,23,42,.035);
}
.vk8-campus-card-head,.vk8-campus-section-head,.vk8-campus-status-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:22px;
}
.vk8-campus-badge{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:6px 12px;
    border-radius:999px;
    background:#f2f4f7;
    color:#667085;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.vk8-campus-badge.is-open{
    background:#eaf5f2;
    color:var(--vk8-green);
}
.vk8-campus-meta{
    display:flex;
    gap:10px 28px;
    flex-wrap:wrap;
    margin:14px 0 20px;
    color:#5b6470;
    font-size:15px;
}
.vk8-campus-meta--hero{margin-bottom:0}
.vk8-campus-next{
    padding:20px 22px;
    margin:18px 0;
    border-radius:14px;
    background:#f7f9f8;
    border-left:4px solid var(--vk8-orange);
}
.vk8-campus-next-label{
    display:block;
    margin-bottom:4px;
    color:#667085;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.vk8-campus-next strong{display:block;font-size:21px;margin-bottom:5px}
.vk8-campus-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 18px;
    border:0;
    border-radius:9px;
    background:var(--vk8-green);
    color:#fff!important;
    font-weight:700;
    text-decoration:none!important;
    cursor:pointer;
}
.vk8-campus-btn:hover{filter:brightness(.96)}
.vk8-campus-btn--secondary{
    background:#fff;
    color:var(--vk8-green)!important;
    border:1px solid var(--vk8-green);
}
.vk8-campus-link{color:var(--vk8-green);font-weight:700;text-decoration:none}
.vk8-campus-progress-wrap{margin:20px 0 5px}
.vk8-campus-progress-wrap--hero{max-width:560px;margin-top:22px}
.vk8-campus-progress-label{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-bottom:6px;
    font-size:14px;
    color:#667085;
}
.vk8-campus-progress{
    height:9px;
    overflow:hidden;
    border-radius:999px;
    background:#eceff1;
}
.vk8-campus-progress>span{
    display:block;
    height:100%;
    background:var(--vk8-green);
    border-radius:inherit;
}
.vk8-campus-progress--small{height:6px;margin-top:7px}
.vk8-campus-access-message{
    padding:18px 20px;
    border-radius:12px;
    background:#f8f8f8;
}
.vk8-campus-access-message strong{display:block;margin-bottom:4px}
.vk8-campus-access-message p{margin:0;color:#667085}
.vk8-campus-video{
    width:100%;
    max-width:900px;
    margin:16px 0 4px;
    overflow:hidden;
    border-radius:14px;
    background:#111;
}
.vk8-campus-video video{
    display:block;
    width:100%;
    height:auto;
}
.vk8-campus-video--embed{
    position:relative;
    aspect-ratio:16/9;
}
.vk8-campus-video--embed iframe{
    position:absolute;
    inset:0;
    width:100%!important;
    height:100%!important;
}
.vk8-campus-status-row{align-items:center}
.vk8-campus-small{color:#667085;font-size:14px}
.vk8-campus-modules{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.vk8-campus-module-card{
    display:grid;
    grid-template-columns:54px minmax(0,1fr) 32px;
    gap:18px;
    align-items:center;
    padding:18px 20px;
    border:1px solid var(--vk8-border);
    border-radius:14px;
    color:inherit!important;
    text-decoration:none!important;
    background:#fff;
}
.vk8-campus-module-card:hover{border-color:#b8cbc8;box-shadow:0 3px 12px rgba(15,23,42,.05)}
.vk8-campus-module-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:#eef5f3;
    color:var(--vk8-green);
    font-weight:800;
}
.vk8-campus-module-body p{color:#667085;margin:0 0 9px}
.vk8-campus-module-arrow{font-size:24px;color:var(--vk8-green)}
.vk8-campus-module-progress>span{font-size:13px;color:#667085}
.vk8-campus-progress-inline{color:#667085;font-size:14px}
.vk8-campus-progress-inline strong{color:var(--vk8-green);font-size:20px}
.vk8-campus-objective{
    display:flex;
    flex-direction:column;
    gap:4px;
    max-width:900px;
    margin-top:18px;
    padding:15px 18px;
    border-left:4px solid var(--vk8-green);
    background:#fff;
    border-radius:8px;
}
.vk8-campus-learning-route{display:flex;flex-direction:column;gap:18px}
.vk8-campus-block{
    padding:28px 30px;
    border:1px solid var(--vk8-border);
    border-radius:18px;
    background:#fff;
}
.vk8-campus-block.is-completed{border-color:#bad6cf;background:#fbfdfc}
.vk8-campus-block-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:16px;
}
.vk8-campus-time{
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:8px;
    background:#f2f4f7;
    color:#667085;
    font-size:13px;
}
.vk8-campus-copy{max-width:900px}
.vk8-campus-copy p:last-child{margin-bottom:0}
.vk8-campus-materials{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
}
.vk8-campus-resource{
    display:flex;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    border:1px solid var(--vk8-border);
    border-radius:12px;
    color:var(--vk8-ink)!important;
    text-decoration:none!important;
    background:#f9fafb;
}
.vk8-campus-resource:hover{border-color:#b8cbc8}
.vk8-campus-resource-icon{
    display:flex;
    width:34px;
    height:34px;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#eaf5f2;
    color:var(--vk8-green);
    font-weight:800;
}
.vk8-campus-resource span:last-child{display:flex;flex-direction:column}
.vk8-campus-resource small{color:#667085}
.vk8-campus-material--video{
    padding:16px 18px;
    border:1px solid var(--vk8-border);
    border-radius:14px;
    background:#f9fafb;
}
.vk8-campus-material-label{color:var(--vk8-green);font-size:13px;font-weight:700}
.vk8-campus-completed{
    display:inline-flex;
    margin-top:18px;
    padding:7px 11px;
    border-radius:999px;
    background:#eaf5f2;
    color:var(--vk8-green);
    font-size:13px;
    font-weight:800;
}
.vk8-campus-complete-form{margin-top:20px}
.vk8-campus-soon{
    margin-top:18px;
    padding:10px 12px;
    border-radius:9px;
    background:#f6f7f7;
    color:#667085;
    font-size:14px;
}
.vk8-campus-module-footer{margin-top:24px}
.vk8-campus-profile-summary{
    display:flex;
    gap:8px 18px;
    align-items:center;
    flex-wrap:wrap;
    margin:0 0 18px;
    padding:14px 17px;
    border-radius:12px;
    background:#f7f9f8;
}
.vk8-campus-profile-summary span{color:#667085}
.vk8-campus-form{
    padding:26px 28px;
    border:1px solid var(--vk8-border);
    border-radius:18px;
    background:#fff;
}
.vk8-campus-field{margin-bottom:22px}
.vk8-campus-field>label:first-child{
    display:block;
    margin-bottom:7px;
    font-weight:700;
}
.vk8-campus-field input[type=text],
.vk8-campus-field textarea,
.vk8-campus-field select{
    width:100%;
    max-width:820px;
    padding:11px 12px;
    border:1px solid #cfd4d8;
    border-radius:8px;
    font:inherit;
}
.vk8-campus-options{display:flex;flex-direction:column;gap:8px}
.vk8-campus-options label,.vk8-campus-checkbox{
    display:flex;
    gap:8px;
    align-items:flex-start;
}
.vk8-campus-required{color:#b42318}
.vk8-campus-notice{
    margin:0 0 18px;
    padding:13px 16px;
    border-radius:10px;
    font-weight:700;
}
.vk8-campus-notice--success{background:#eaf5f2;color:var(--vk8-green)}
.vk8-campus-notice--error{background:#fef3f2;color:#b42318}
.vk8-campus-empty{text-align:left}
@media(max-width:760px){
    .vk8-campus{
        width:100%;
        max-width:100%;
        margin-left:0;
        margin-right:0;
        transform:none;
        padding-left:12px;
        padding-right:12px;
    }
    .vk8-campus-hero,.vk8-campus-card,.vk8-campus-section,.vk8-campus-block,.vk8-campus-form{padding:22px 20px}
    .vk8-campus-card-head,.vk8-campus-section-head,.vk8-campus-status-row,.vk8-campus-block-head{flex-direction:column;align-items:stretch}
    .vk8-campus-module-card{grid-template-columns:44px minmax(0,1fr) 24px;gap:12px;padding:15px 14px}
    .vk8-campus-module-number{width:40px;height:40px}
    .vk8-campus-status-row .vk8-campus-btn{align-self:flex-start}
}

/* Front-end breedte verfijning v0.7.2 */
.vk8-campus-program-card{
    width:100%;
}


/* Automatische voortgang v0.7.4 */
.vk8-campus-auto-note{
    margin-top:16px;
    padding:10px 12px;
    border-radius:9px;
    background:#f7f9f8;
    color:#667085;
    font-size:14px;
}


/* Betrouwbare voortgang v0.7.5 */
.vk8-campus-block:not(.is-completed) .vk8-campus-auto-note{
    border-left:3px solid #d9e4e1;
}


/* Opdrachten en reflecties v0.8.0 */
.vk8-campus-activity-form{
    margin-top:20px;
    padding:18px 20px;
    border:1px solid #e0e6e4;
    border-radius:12px;
    background:#f9fbfa;
}
.vk8-campus-activity-label{
    display:block;
    margin-bottom:7px;
    font-weight:700;
    color:#243139;
}
.vk8-campus-activity-form textarea{
    display:block;
    width:100%;
    min-height:150px;
    padding:12px 13px;
    border:1px solid #cfd7d4;
    border-radius:8px;
    background:#fff;
    font:inherit;
    line-height:1.5;
    resize:vertical;
}
.vk8-campus-activity-meta{
    display:flex;
    gap:8px 20px;
    flex-wrap:wrap;
    margin:9px 0 14px;
    color:#667085;
    font-size:13px;
}
.vk8-campus-activity-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:15px;
}
.vk8-campus-assignment-file{
    margin-top:15px;
    padding:14px;
    border:1px dashed #c7d1ce;
    border-radius:9px;
    background:#fff;
}
.vk8-campus-existing-file{
    margin:8px 0 0!important;
    font-size:14px;
}
.vk8-campus-submission-status{
    display:flex;
    gap:8px 18px;
    flex-wrap:wrap;
    margin-top:14px;
    padding:10px 12px;
    border-radius:8px;
    background:#eef5f3;
    color:#17645f;
    font-size:14px;
}
.vk8-campus-feedback{
    margin-top:14px;
    padding:14px 16px;
    border-left:4px solid #ff9418;
    border-radius:8px;
    background:#fff8ef;
}
.vk8-campus-feedback p:last-child{margin-bottom:0}
@media(max-width:760px){
    .vk8-campus-activity-actions{flex-direction:column;align-items:stretch}
    .vk8-campus-activity-actions .vk8-campus-btn{width:100%}
}


/* Opdrachtfunctie v0.9.1 */
.vk8-campus-assignment-purpose{
    display:inline-flex;
    align-items:center;
    margin:0 0 10px;
    padding:5px 9px;
    border-radius:999px;
    background:#eef5f3;
    color:#17645f;
    font-size:13px;
    font-weight:700;
}


/* Bijeenkomstinformatie v0.10.0 */
.vk8-campus-meeting-info{
    display:flex;
    flex-wrap:wrap;
    gap:8px 24px;
    margin:14px 0;
    padding:12px 14px;
    border-radius:9px;
    background:#f4f8f7;
    color:#4d5b66;
    font-size:14px;
}
.vk8-campus-meeting-info strong{
    color:#17645f;
}


/* Programma-afronding & certificaat v0.11.0 */
.vk8-campus-completion-checks{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:18px 0;
}
.vk8-campus-completion-check{
    padding:14px 16px;
    border:1px solid #e2e7e5;
    border-radius:10px;
    background:#fafbfb;
}
.vk8-campus-completion-check strong,
.vk8-campus-completion-check span{
    display:block;
}
.vk8-campus-completion-check strong{
    color:#596474;
    margin-bottom:4px;
}
.vk8-campus-completion-check.is-done{
    border-color:#c5dfd8;
    background:#eef7f4;
}
.vk8-campus-completion-check.is-done strong{
    color:#17645f;
}
.vk8-campus-certificate-box{
    margin-top:18px;
    padding:20px 22px;
    border-left:4px solid #ff9418;
    border-radius:10px;
    background:#faf8f4;
}
.vk8-campus-certificate-box h3{
    margin:4px 0 8px;
    color:#17645f;
}
@media(max-width:700px){
    .vk8-campus-completion-checks{grid-template-columns:1fr}
}


/* Centrale Learning Campus login v0.14.1 */
.vk8-campus-login{
    max-width:760px;
    margin:48px auto;
}
.vk8-campus-login-card{
    max-width:520px;
    margin:0 auto;
    padding:34px 36px;
    border:1px solid #dfe7e4;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 30px rgba(0,28,26,.06);
}
.vk8-campus-login-card h1{
    margin:6px 0 8px;
    color:#001c1a;
    font-size:34px;
    line-height:1.1;
}
.vk8-campus-login-card > p{
    margin:0 0 24px;
    color:#667085;
    line-height:1.6;
}
.vk8-campus-login-card .login-username,
.vk8-campus-login-card .login-password{
    margin:0 0 16px;
}
.vk8-campus-login-card label{
    display:block;
    margin-bottom:6px;
    color:#344054;
    font-weight:700;
}
.vk8-campus-login-card input[type="text"],
.vk8-campus-login-card input[type="password"]{
    box-sizing:border-box;
    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #cfd8d5;
    border-radius:8px;
    font-size:16px;
}
.vk8-campus-login-card .login-remember label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
}
.vk8-campus-login-card .login-submit{
    margin:20px 0 0;
}
.vk8-campus-login-card .button-primary{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:8px;
    background:#001c1a;
    color:#fff;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}
.vk8-campus-login-card .button-primary:hover{
    background:#125559;
}
.vk8-campus-login-help{
    margin-top:16px;
    text-align:center;
}
.vk8-campus-login-help a{
    color:#125559;
    font-weight:700;
    text-decoration:none;
}
@media(max-width:640px){
    .vk8-campus-login{
        margin:24px auto;
    }
    .vk8-campus-login-card{
        padding:26px 22px;
    }
}


/* Standalone Learning Campus login v0.14.2 */
html:has(body.vk8-standalone-login){
    margin-top:0 !important;
}
body.vk8-standalone-login{
    margin:0;
    min-height:100vh;
    background:#eef5f3;
    color:#001c1a;
    font-family:Arial,Helvetica,sans-serif;
}
body.vk8-standalone-login #wpadminbar{
    display:none !important;
}
.vk8-login-shell{
    display:grid;
    min-height:100vh;
    grid-template-columns:minmax(0,2fr) minmax(520px,1fr);
    background:#eef5f3;
}
.vk8-login-visual{
    position:relative;
    display:flex;
    align-items:flex-end;
    min-height:100vh;
    padding:64px;
    overflow:hidden;
    background:
        radial-gradient(circle at 20% 20%,rgba(248,173,59,.28),transparent 28%),
        radial-gradient(circle at 78% 25%,rgba(255,255,255,.16),transparent 30%),
        linear-gradient(135deg,#125559 0%,#17645f 42%,#5bbfc2 100%);
    background-position:center;
    background-size:cover;
}
.vk8-login-visual:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,28,26,.02) 30%,rgba(0,28,26,.52) 100%);
    pointer-events:none;
}
.vk8-login-visual-inner{
    position:relative;
    z-index:1;
    max-width:680px;
    color:#fff;
}
.vk8-login-eyebrow{
    display:inline-block;
    margin-bottom:16px;
    color:#f8ad3b;
    font-size:13px;
    font-weight:900;
    letter-spacing:.12em;
}
.vk8-login-visual h1{
    margin:0 0 16px;
    max-width:650px;
    color:#fff;
    font-size:clamp(42px,5vw,72px);
    line-height:1.02;
    letter-spacing:-.03em;
}
.vk8-login-visual p{
    max-width:610px;
    margin:0;
    color:rgba(255,255,255,.9);
    font-size:19px;
    line-height:1.6;
}
.vk8-login-roleline{
    margin-top:28px;
    font-size:14px;
    font-weight:800;
    color:#fff;
}
.vk8-login-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 28px;
    background:#f5f8f7;
}
.vk8-login-card{
    width:min(100%,560px);
    padding:38px 40px;
    border:1px solid #dbe5e2;
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 55px rgba(0,28,26,.10);
}
.vk8-login-brand{
    display:flex;
    min-height:72px;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
}
.vk8-login-brand img{
    display:block;
    max-width:250px;
    max-height:92px;
    object-fit:contain;
}
.vk8-login-wordmark{
    text-align:center;
}
.vk8-login-wordmark span{
    display:block;
    color:#17645f;
    font-size:44px;
    font-weight:800;
    letter-spacing:-.045em;
}
.vk8-login-wordmark small{
    display:block;
    margin-top:2px;
    color:#f4901e;
    font-size:15px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.vk8-login-card h2{
    margin:0 0 6px;
    text-align:center;
    color:#001c1a;
    font-size:28px;
}
.vk8-login-card-intro{
    margin:0 0 24px;
    text-align:center;
    color:#667085;
}
.vk8-login-error{
    margin:0 0 18px;
    padding:12px 14px;
    border-left:4px solid #f4901e;
    border-radius:8px;
    background:#fff5e8;
    color:#7a3d00;
    font-size:14px;
    line-height:1.45;
}
.vk8-login-form p{
    margin:0 0 16px;
}
.vk8-login-form label{
    display:block;
    margin-bottom:6px;
    color:#344054;
    font-size:14px;
    font-weight:800;
}
.vk8-login-form input[type="text"],
.vk8-login-form input[type="password"]{
    box-sizing:border-box;
    width:100%;
    min-height:48px;
    padding:11px 13px;
    border:1px solid #ccd8d4;
    border-radius:9px;
    background:#fbfcfc;
    color:#001c1a;
    font-size:16px;
    outline:none;
}
.vk8-login-form input[type="text"]:focus,
.vk8-login-form input[type="password"]:focus{
    border-color:#17645f;
    box-shadow:0 0 0 3px rgba(23,100,95,.10);
}
.vk8-login-form-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:4px 0 20px;
    font-size:13px;
}
.vk8-login-form-row a,
.vk8-login-welcome a,
.vk8-login-footer a{
    color:#17645f;
    font-weight:800;
    text-decoration:none;
}
.vk8-login-remember{
    display:flex !important;
    align-items:center;
    gap:7px;
    margin:0 !important;
    font-weight:600 !important;
}
.vk8-login-submit{
    width:100%;
    min-height:50px;
    border:0;
    border-radius:9px;
    background:#f4901e;
    color:#fff;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 5px 12px rgba(244,144,30,.18);
}
.vk8-login-submit:hover{
    background:#e88112;
}
.vk8-login-welcome{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #e5ecea;
    text-align:center;
}
.vk8-login-welcome h3{
    margin:0 0 8px;
    color:#001c1a;
    font-size:18px;
}
.vk8-login-welcome p{
    margin:0 0 12px;
    color:#667085;
    font-size:14px;
    line-height:1.55;
}
.vk8-login-footer{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid #e5ecea;
    text-align:center;
    font-size:13px;
}
@media(max-width:980px){
    .vk8-login-shell{
        grid-template-columns:1fr;
    }
    .vk8-login-visual{
        min-height:310px;
        padding:42px 30px;
    }
    .vk8-login-visual h1{
        font-size:42px;
    }
    .vk8-login-panel{
        padding:30px 20px 50px;
    }
}
@media(max-width:560px){
    .vk8-login-visual{
        min-height:260px;
        padding:32px 22px;
    }
    .vk8-login-visual h1{
        font-size:34px;
    }
    .vk8-login-visual p{
        font-size:16px;
    }
    .vk8-login-roleline{
        display:none;
    }
    .vk8-login-card{
        padding:28px 22px;
        border-radius:14px;
    }
    .vk8-login-form-row{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* Microlearning-route op loginpagina v0.14.3 */
.vk8-login-microlearning{
    margin-top:24px;
    padding:18px 18px 17px;
    border:1px solid rgba(23,100,95,.16);
    border-radius:12px;
    background:#f5faf8;
    text-align:left;
}
.vk8-login-microlearning-kicker{
    display:block;
    margin-bottom:5px;
    color:#f4901e;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}
.vk8-login-microlearning h3{
    margin:0 0 6px;
    color:#001c1a;
    font-size:17px;
    text-align:left;
}
.vk8-login-microlearning p{
    margin:0 0 10px;
    color:#667085;
    font-size:13px;
    line-height:1.5;
}
.vk8-login-microlearning-link{
    color:#17645f;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
}
.vk8-login-microlearning-link:hover{
    text-decoration:underline;
}


/* Premium VolleKR8 login v0.14.5
   Inter 18px basis, 2/3 hero + 1/3 login, rustiger en chiquer. */
body.vk8-standalone-login{
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:18px;
    line-height:1.55;
    background:#f7f8f7;
}
.vk8-login-shell{
    grid-template-columns:minmax(0,2fr) minmax(520px,1fr);
    background:#f7f8f7;
}
.vk8-login-visual{
    isolation:isolate;
    padding:clamp(44px,5vw,78px);
    background:
        radial-gradient(circle at 13% 7%,rgba(248,173,59,.30),transparent 26%),
        radial-gradient(circle at 78% 35%,rgba(255,255,255,.08),transparent 24%),
        linear-gradient(145deg,#001c1a 0%,#0b4545 42%,#125559 70%,#17645f 100%);
}
.vk8-login-visual:before{
    content:"";
    position:absolute;
    z-index:0;
    width:72vw;
    height:72vw;
    right:-38vw;
    bottom:-46vw;
    border:1px solid rgba(255,255,255,.16);
    border-radius:50%;
    box-shadow:
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 150px rgba(255,255,255,.018);
    pointer-events:none;
}
.vk8-login-visual:after{
    z-index:0;
    background:
        linear-gradient(180deg,rgba(0,28,26,.02) 28%,rgba(0,28,26,.42) 100%),
        radial-gradient(circle at 88% 80%,rgba(91,191,194,.18),transparent 30%);
}
.vk8-login-visual-inner{
    z-index:2;
    max-width:760px;
}
.vk8-login-eyebrow{
    margin-bottom:18px;
    font-size:13px;
    letter-spacing:.13em;
}
.vk8-login-visual h1{
    max-width:720px;
    margin-bottom:22px;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:clamp(48px,5vw,76px);
    font-weight:800;
    line-height:1.03;
    letter-spacing:-.045em;
}
.vk8-login-visual p{
    max-width:640px;
    font-size:18px;
    line-height:1.7;
}
.vk8-login-roleline{
    margin-top:30px;
    font-size:14px;
    letter-spacing:.01em;
}
.vk8-login-panel{
    padding:34px 30px;
    background:
        radial-gradient(circle at 100% 0%,rgba(18,85,89,.06),transparent 34%),
        #f7f8f7;
}
.vk8-login-card{
    width:min(100%,570px);
    padding:42px 44px 34px;
    border:1px solid rgba(18,85,89,.12);
    border-radius:22px;
    background:rgba(255,255,255,.98);
    box-shadow:
        0 26px 70px rgba(0,28,26,.09),
        0 3px 10px rgba(0,28,26,.04);
}
.vk8-login-brand{
    min-height:74px;
    margin-bottom:18px;
}
.vk8-login-brand:after{
    content:"";
    position:absolute;
}
.vk8-login-brand img{
    max-width:245px;
    max-height:88px;
}
.vk8-login-wordmark span{
    font-size:46px;
    letter-spacing:-.055em;
}
.vk8-login-wordmark small{
    margin-top:3px;
    font-size:13px;
    letter-spacing:.14em;
}
.vk8-login-card h2{
    position:relative;
    margin:4px 0 8px;
    font-size:30px;
    font-weight:800;
    letter-spacing:-.025em;
}
.vk8-login-card h2:before{
    content:"";
    display:block;
    width:34px;
    height:3px;
    margin:0 auto 18px;
    border-radius:999px;
    background:#f4901e;
}
.vk8-login-card-intro{
    margin-bottom:26px;
    font-size:15px;
    line-height:1.55;
}
.vk8-login-form p{
    margin-bottom:17px;
}
.vk8-login-form label{
    margin-bottom:7px;
    font-size:14px;
    font-weight:700;
}
.vk8-login-form input[type="text"],
.vk8-login-form input[type="password"]{
    min-height:52px;
    padding:12px 14px;
    border-color:#d3ddda;
    border-radius:10px;
    background:#fcfdfd;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.vk8-login-form input[type="text"]:focus,
.vk8-login-form input[type="password"]:focus{
    background:#fff;
    border-color:#17645f;
    box-shadow:0 0 0 4px rgba(23,100,95,.09);
}
.vk8-login-form-row{
    margin:5px 0 21px;
    font-size:13px;
}
.vk8-login-submit{
    min-height:52px;
    border-radius:10px;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    font-weight:800;
    box-shadow:0 7px 18px rgba(244,144,30,.22);
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.vk8-login-submit:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(244,144,30,.26);
}
.vk8-login-welcome{
    position:relative;
    margin-top:28px;
    padding:25px 0 0 58px;
    text-align:left;
}
.vk8-login-welcome:before{
    content:"✓";
    position:absolute;
    left:0;
    top:24px;
    display:flex;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#edf6f3;
    color:#17645f;
    font-size:18px;
    font-weight:900;
}
.vk8-login-welcome h3{
    margin-bottom:6px;
    font-size:18px;
}
.vk8-login-welcome p{
    margin-bottom:8px;
    font-size:13px;
    line-height:1.55;
}
.vk8-login-microlearning{
    margin-top:24px;
    padding:18px 20px 17px;
    border-color:rgba(23,100,95,.14);
    border-radius:12px;
    background:
        linear-gradient(135deg,rgba(237,246,243,.95),rgba(255,255,255,.98));
    box-shadow:inset 3px 0 0 rgba(244,144,30,.72);
}
.vk8-login-microlearning-kicker{
    margin-bottom:6px;
    font-size:10px;
    letter-spacing:.12em;
}
.vk8-login-microlearning h3{
    margin-bottom:6px;
    font-size:17px;
    font-weight:800;
}
.vk8-login-microlearning p,
.vk8-login-microlearning-link{
    font-size:12.5px;
}
.vk8-login-footer{
    margin-top:20px;
    padding-top:17px;
    font-size:12px;
}
@media(max-width:1180px){
    .vk8-login-shell{
        grid-template-columns:minmax(0,1.55fr) minmax(500px,1fr);
    }
    .vk8-login-card{
        padding-left:34px;
        padding-right:34px;
    }
}
@media(max-width:980px){
    body.vk8-standalone-login{
        font-size:17px;
    }
    .vk8-login-shell{
        grid-template-columns:1fr;
    }
    .vk8-login-card{
        width:min(100%,620px);
    }
    .vk8-login-welcome{
        padding-left:0;
        text-align:center;
    }
    .vk8-login-welcome:before{
        position:static;
        margin:0 auto 12px;
    }
}


/* Login viewport-fix v0.14.6
   Links blijft de hero/titel altijd zichtbaar; rechts scrollt de kaart zelfstandig. */
@media(min-width:981px){
    html:has(body.vk8-standalone-login),
    body.vk8-standalone-login{
        height:100%;
        overflow:hidden;
    }

    .vk8-login-shell{
        height:100vh;
        min-height:0;
        overflow:hidden;
    }

    .vk8-login-visual{
        height:100vh;
        min-height:0;
        box-sizing:border-box;
        align-items:center;
    }

    .vk8-login-visual-inner{
        transform:translateY(6vh);
    }

    .vk8-login-panel{
        height:100vh;
        min-height:0;
        box-sizing:border-box;
        align-items:flex-start;
        justify-content:center;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-gutter:stable;
        padding-top:24px;
        padding-bottom:24px;
    }

    .vk8-login-card{
        flex:0 0 auto;
        margin:0;
    }
}

@media(max-width:980px){
    html:has(body.vk8-standalone-login),
    body.vk8-standalone-login{
        height:auto;
        overflow:auto;
    }

    .vk8-login-shell{
        height:auto;
        min-height:100vh;
        overflow:visible;
    }

    .vk8-login-visual{
        height:auto;
    }

    .vk8-login-visual-inner{
        transform:none;
    }

    .vk8-login-panel{
        height:auto;
        overflow:visible;
        align-items:center;
    }
}


/* Wachtwoord tonen/verbergen v0.15.2 */
.vk8-login-password-wrap{
    position:relative;
    display:block;
}
.vk8-login-password-wrap input[type="password"],
.vk8-login-password-wrap input[type="text"]{
    padding-right:54px;
}
.vk8-login-password-toggle{
    position:absolute;
    top:50%;
    right:12px;
    display:flex;
    width:38px;
    height:38px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#667085;
    cursor:pointer;
    transform:translateY(-50%);
}
.vk8-login-password-toggle:hover,
.vk8-login-password-toggle:focus-visible{
    background:#edf6f3;
    color:#17645f;
    outline:none;
}
.vk8-login-password-toggle svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.vk8-login-password-toggle .vk8-eye-hide{
    display:none;
}
.vk8-login-password-toggle.is-visible .vk8-eye-show{
    display:none;
}
.vk8-login-password-toggle.is-visible .vk8-eye-hide{
    display:block;
}


/* Centraal Learning Campus-logo v0.16.4 */
.vk8-campus-brandbar{
    display:flex;
    align-items:center;
    margin:0 0 18px;
}
.vk8-campus-central-logo{
    display:block;
    object-fit:contain;
}
.vk8-campus-hero + .vk8-campus-card{
    margin-top:22px;
}
@media(max-width:640px){
    .vk8-campus-brandbar{
        margin-bottom:14px;
    }
    .vk8-campus-central-logo{
        max-width:240px !important;
    }
}


/* Wachtwoord instellen/vergeten — v0.17.0 */
.vk8-login-success{
    margin:0 0 18px;
    padding:12px 14px;
    border:1px solid #cde6df;
    border-radius:9px;
    background:#edf8f4;
    color:#125559;
    font-weight:650;
}
.vk8-login-password-help,
.vk8-login-return{
    color:#667085;
    font-size:13px;
    line-height:1.55;
}
.vk8-login-return{
    margin-top:18px;
    text-align:center;
}
.vk8-login-return a{
    color:#125559;
    font-weight:750;
    text-decoration:none;
}
.vk8-login-submit--link{
    display:block;
    box-sizing:border-box;
    text-align:center;
    text-decoration:none;
}


/* =========================================================
   WACHTWOORDKNOPPEN — v0.17.2
   Link-knoppen mogen nooit website-linkkleuren erven.
   ========================================================= */
.vk8-login-card a.vk8-login-submit,
.vk8-login-card a.vk8-login-submit:link,
.vk8-login-card a.vk8-login-submit:visited,
.vk8-login-card a.vk8-login-submit:hover,
.vk8-login-card a.vk8-login-submit:focus,
.vk8-login-card a.vk8-login-submit:active,
.vk8-login-card .vk8-login-submit--link{
    display:flex !important;
    width:100%;
    min-height:52px;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    padding:12px 18px;
    border:0;
    border-radius:10px;
    background:#F4901E !important;
    color:#FFFFFF !important;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    font-weight:800;
    line-height:1.25;
    text-align:center;
    text-decoration:none !important;
    text-shadow:none !important;
    opacity:1 !important;
    -webkit-text-fill-color:#FFFFFF !important;
    box-shadow:0 7px 18px rgba(244,144,30,.22);
}

.vk8-login-card a.vk8-login-submit:hover,
.vk8-login-card a.vk8-login-submit:focus,
.vk8-login-card .vk8-login-submit--link:hover,
.vk8-login-card .vk8-login-submit--link:focus{
    background:#E88112 !important;
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(244,144,30,.26);
}

.vk8-login-card button.vk8-login-submit{
    color:#FFFFFF !important;
    -webkit-text-fill-color:#FFFFFF !important;
}


/* =========================================================
   DEELNEMERSOMGEVING BREEDTE + UITLOGGEN — v0.17.3
   ========================================================= */

/*
 * Het VolleKR8-thema plaatst normale pagina-inhoud in een Bootstrap-kolom
 * (col-sm-8 + push). De Learning Campus is een volledige applicatiepagina.
 * Neutraliseer die kolom uitsluitend wanneer hij de Learning Campus bevat.
 */
body:has(.vk8-campus) .container:has(.vk8-campus){
    width:100% !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

body:has(.vk8-campus) .container:has(.vk8-campus) > .row{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

body:has(.vk8-campus) .container:has(.vk8-campus) > .row > [class*="col-"]{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    left:auto !important;
    right:auto !important;
    float:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/*
 * Geen viewport-breakout meer. Daardoor kan de opleiding nooit buiten
 * het browservenster vallen of horizontaal moeten worden verschoven.
 */
.vk8-campus{
    width:calc(100% - 36px) !important;
    max-width:1240px !important;
    margin:0 auto !important;
    transform:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible;
}

.vk8-campus-brandbar{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0 0 18px;
    padding:4px 0;
}

.vk8-campus-brandbar-logo{
    display:flex;
    min-width:0;
    align-items:center;
}

.vk8-campus-brandbar-user{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:15px;
}

.vk8-campus-user-name{
    color:#667085;
    font-size:14px;
    font-weight:700;
}

.vk8-campus-logout,
.vk8-campus-logout:link,
.vk8-campus-logout:visited{
    display:inline-flex;
    min-height:40px;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border:1px solid #17645f;
    border-radius:9px;
    background:#fff;
    color:#17645f !important;
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none !important;
}

.vk8-campus-logout:hover,
.vk8-campus-logout:focus{
    background:#17645f;
    color:#fff !important;
}

/* Ook kinderen mogen nooit door een onbedoelde minimum-breedte uitbreken. */
.vk8-campus,
.vk8-campus > *,
.vk8-campus-card,
.vk8-campus-section,
.vk8-campus-hero,
.vk8-campus-next,
.vk8-campus-learning-route,
.vk8-campus-block{
    min-width:0;
    max-width:100%;
}

/* Brede inhoud zoals tekst, links en metadata mag normaal afbreken. */
.vk8-campus{
    overflow-wrap:anywhere;
}
.vk8-campus-meta,
.vk8-campus-card-head,
.vk8-campus-section-head{
    min-width:0;
}

@media(max-width:760px){
    .vk8-campus{
        width:calc(100% - 24px) !important;
    }

    .vk8-campus-brandbar{
        gap:12px;
    }

    .vk8-campus-brandbar-user{
        gap:8px;
    }

    .vk8-campus-user-name{
        display:none;
    }

    .vk8-campus-central-logo{
        max-width:220px !important;
    }

    .vk8-campus-logout{
        min-height:38px;
        padding:7px 11px;
        font-size:13px;
    }
}

@media(max-width:480px){
    .vk8-campus{
        width:calc(100% - 18px) !important;
    }

    .vk8-campus-central-logo{
        max-width:180px !important;
    }
}


/* Onzichtbare botval; blijft buiten viewport maar in DOM voor eenvoudige bots. */
.vk8-lc-honeypot{
    position:absolute !important;
    left:-10000px !important;
    top:auto !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}


/* Voorbeeldmodus beheerder op deelnemerspagina — v0.18.0 */
body.vk8-lc-preview-active{padding-top:44px!important}
body.vk8-lc-preview-active .vk8-preview-bar{position:fixed;z-index:100100;top:0;right:0;left:0;display:flex;min-height:44px;box-sizing:border-box;align-items:center;justify-content:space-between;gap:18px;padding:7px 18px;background:#F4901E;color:#001C1A;box-shadow:0 4px 16px rgba(0,28,26,.15);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;line-height:1.35}
body.vk8-lc-preview-active .vk8-preview-bar__main{display:flex;min-width:0;align-items:center;gap:11px;flex-wrap:wrap}
body.vk8-lc-preview-active .vk8-preview-bar__main>strong{padding:3px 8px;border-radius:999px;background:#001C1A;color:#fff;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
body.vk8-lc-preview-active .vk8-preview-readonly{color:#49310d;font-size:12px}
body.vk8-lc-preview-active .vk8-preview-exit,body.vk8-lc-preview-active .vk8-preview-exit:link,body.vk8-lc-preview-active .vk8-preview-exit:visited{flex:0 0 auto;padding:6px 11px;border-radius:8px;background:#fff;color:#001C1A!important;font-weight:850;text-decoration:none!important}
body.vk8-lc-preview-active .vk8-preview-exit:hover{background:#001C1A;color:#fff!important}
@media(max-width:640px){body.vk8-lc-preview-active{padding-top:54px!important}body.vk8-lc-preview-active .vk8-preview-bar{min-height:54px;gap:8px;padding:7px 10px}body.vk8-lc-preview-active .vk8-preview-readonly{display:none}body.vk8-lc-preview-active .vk8-preview-bar__main{gap:5px 8px}body.vk8-lc-preview-active .vk8-preview-exit{padding:6px 8px;font-size:12px}}


/* Opmaak vanuit inhoud-editor leerblokken — v0.18.4 */
.vk8-campus-copy h3{
    margin:1.15em 0 .45em;
    color:#125559;
    font-size:1.08em;
    line-height:1.35;
}
.vk8-campus-copy ul,
.vk8-campus-copy ol{
    margin:.7em 0 1em 1.35em;
    padding:0;
}
.vk8-campus-copy li{margin:.28em 0;}
.vk8-campus-copy strong{font-weight:800;}
.vk8-campus-copy a{
    color:#17645f;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:2px;
}


/* Alinea- en witruimtebehoud leerblok-editor — v0.18.5 */
.vk8-campus-copy p{
    margin:0 0 1.05em;
}
.vk8-campus-copy p:last-child{
    margin-bottom:0;
}
.vk8-campus-copy .vk8-campus-empty-line{
    min-height:.8em;
    margin:0 0 .55em;
}
.vk8-campus-copy .vk8-campus-line-spacer{
    display:block;
    height:1em;
}


/* Compactere alinea-afstand leerblokken — v0.18.6
   Een lege regel uit de editor telt als één normale visuele tussenruimte,
   niet bovenop een volledige alinea-marge. */
.vk8-campus-copy p{
    margin:0 0 .62em;
}
.vk8-campus-copy p:last-child{
    margin-bottom:0;
}
.vk8-campus-copy .vk8-campus-empty-line{
    display:block;
    height:.32em;
    min-height:0;
    margin:0;
    padding:0;
    font-size:0;
    line-height:0;
}
.vk8-campus-copy .vk8-campus-empty-line br{
    display:none;
}
.vk8-campus-copy .vk8-campus-line-spacer{
    display:block;
    height:.42em;
}


/* =========================================================
   ZELFSTANDIGE LEARNING CAMPUS — v0.18.12
   Dashboard / programma / module / formulier
   ========================================================= */

html:has(body.vk8-lc-app-page){
    margin-top:0 !important;
    background:#f4f7f6;
}

body.vk8-lc-app-page{
    margin:0 !important;
    min-height:100vh;
    background:#f4f7f6 !important;
    color:#243330;
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* De Learning Campus is een zelfstandige applicatiepagina. */
body.vk8-lc-app-page #wpadminbar{
    display:none !important;
}
html:has(body.vk8-lc-app-page){
    padding-top:0 !important;
}

#vk8-campus-app{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    padding:28px 0 54px;
    background:
        radial-gradient(circle at 10% 5%, rgba(18,85,89,.06), transparent 31%),
        linear-gradient(180deg,#f8faf9 0%,#f3f7f5 100%);
}

/* Zeer subtiel campus-watermerk; gebruikt automatisch het centrale logo. */
#vk8-campus-app::before{
    content:"";
    position:fixed;
    z-index:0;
    right:4vw;
    bottom:5vh;
    width:min(430px,42vw);
    height:170px;
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:contain;
    opacity:.025;
    pointer-events:none;
}

#vk8-campus-app > *{
    position:relative;
    z-index:1;
}

body.vk8-lc-app-page .vk8-campus{
    --vk8-green:#125559;
    --vk8-orange:#F4901E;
    --vk8-sand:#eef5f3;
    --vk8-ink:#243330;
    --vk8-muted:#667085;
    --vk8-border:#dde7e3;
    width:calc(100% - 40px) !important;
    max-width:1180px !important;
    margin:0 auto !important;
    padding:0 !important;
    color:var(--vk8-ink);
}

/* Zelfstandige campusheader */
body.vk8-lc-app-page .vk8-campus-brandbar{
    min-height:72px;
    margin:0 0 24px;
    padding:12px 18px;
    border:1px solid rgba(18,85,89,.10);
    border-radius:16px;
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 26px rgba(0,28,26,.055);
    backdrop-filter:blur(8px);
}

body.vk8-lc-app-page .vk8-campus-brandbar-logo img{
    max-height:48px;
    width:auto !important;
    max-width:min(300px,46vw) !important;
}

body.vk8-lc-app-page .vk8-campus-brandbar-user{
    gap:13px;
}

body.vk8-lc-app-page .vk8-campus-external-link,
body.vk8-lc-app-page .vk8-campus-external-link:link,
body.vk8-lc-app-page .vk8-campus-external-link:visited{
    color:var(--vk8-green) !important;
    font-size:13px;
    font-weight:750;
    text-decoration:none !important;
}

body.vk8-lc-app-page .vk8-campus-external-link:hover{
    text-decoration:underline !important;
}

body.vk8-lc-app-page .vk8-campus-user-name{
    padding-left:13px;
    border-left:1px solid #dfe7e4;
    color:#53615e;
    font-size:13px;
}

body.vk8-lc-app-page .vk8-campus-logout{
    color:#667085 !important;
    font-size:13px;
    font-weight:700;
}

/* Hero: wit, veel rust, campusgroen en één oranje accentlijn. */
body.vk8-lc-app-page .vk8-campus-hero{
    position:relative;
    overflow:hidden;
    margin:0 0 24px;
    padding:34px 38px 32px;
    border:1px solid rgba(18,85,89,.10);
    border-radius:18px;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 10px 34px rgba(0,28,26,.055);
}

body.vk8-lc-app-page .vk8-campus-hero::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:4px;
    background:var(--vk8-orange);
}

body.vk8-lc-app-page .vk8-campus h1,
body.vk8-lc-app-page .vk8-campus h2,
body.vk8-lc-app-page .vk8-campus h3{
    color:var(--vk8-green);
}

body.vk8-lc-app-page .vk8-campus h1{
    margin:2px 0 11px;
    font-size:clamp(32px,4vw,48px);
    font-weight:800;
    letter-spacing:-.025em;
}

body.vk8-lc-app-page .vk8-campus-hero > p{
    max-width:820px;
    margin:0;
    color:#53615e;
    font-size:17px;
    line-height:1.65;
}

/* Opleidingskaart / secties */
body.vk8-lc-app-page .vk8-campus-card,
body.vk8-lc-app-page .vk8-campus-section,
body.vk8-lc-app-page .vk8-campus-empty{
    border:1px solid rgba(18,85,89,.10);
    border-radius:18px;
    background:rgba(255,255,255,.97);
    box-shadow:0 9px 28px rgba(0,28,26,.045);
}

body.vk8-lc-app-page .vk8-campus-program-card{
    padding:28px 30px;
}

body.vk8-lc-app-page .vk8-campus-kicker,
body.vk8-lc-app-page .vk8-campus-eyebrow,
body.vk8-lc-app-page .vk8-campus-block-type{
    color:var(--vk8-green);
}

body.vk8-lc-app-page .vk8-campus-next{
    border:1px solid rgba(18,85,89,.10);
    border-radius:14px;
    background:#eef5f3;
}

body.vk8-lc-app-page .vk8-campus-btn,
body.vk8-lc-app-page .vk8-campus-btn:link,
body.vk8-lc-app-page .vk8-campus-btn:visited{
    border-color:var(--vk8-orange);
    background:var(--vk8-orange);
    color:#fff !important;
    box-shadow:none;
}

body.vk8-lc-app-page .vk8-campus-btn:hover{
    filter:brightness(.96);
    transform:translateY(-1px);
}

body.vk8-lc-app-page .vk8-campus-btn--secondary,
body.vk8-lc-app-page .vk8-campus-btn--secondary:link,
body.vk8-lc-app-page .vk8-campus-btn--secondary:visited{
    border-color:var(--vk8-green);
    background:#fff;
    color:var(--vk8-green) !important;
}

body.vk8-lc-app-page .vk8-campus-progress{
    background:#e6ecea;
}
body.vk8-lc-app-page .vk8-campus-progress span{
    background:var(--vk8-orange);
}

body.vk8-lc-app-page .vk8-campus-link,
body.vk8-lc-app-page .vk8-campus-back{
    color:var(--vk8-green) !important;
}

/* WordPress/thema-elementen zijn niet meer onderdeel van de applicatietemplate.
   Deze regels zijn alleen extra vangnetten voor plug-ins die zelf globale elementen injecteren. */
body.vk8-lc-app-page .site-header,
body.vk8-lc-app-page #masthead,
body.vk8-lc-app-page .site-footer,
body.vk8-lc-app-page #colophon{
    display:none !important;
}

@media(max-width:760px){
    #vk8-campus-app{
        padding:14px 0 34px;
    }
    #vk8-campus-app::before{
        width:70vw;
        opacity:.018;
    }
    body.vk8-lc-app-page .vk8-campus{
        width:calc(100% - 24px) !important;
    }
    body.vk8-lc-app-page .vk8-campus-brandbar{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        padding:13px 15px;
    }
    body.vk8-lc-app-page .vk8-campus-brandbar-user{
        width:100%;
        flex-wrap:wrap;
    }
    body.vk8-lc-app-page .vk8-campus-user-name{
        padding-left:0;
        border-left:0;
    }
    body.vk8-lc-app-page .vk8-campus-hero{
        padding:27px 23px 25px;
    }
    body.vk8-lc-app-page .vk8-campus-program-card{
        padding:23px 21px;
    }
}


/* =========================================================
   Hotfix v0.18.13
   Veiligere campus-rendering zonder custom template
   ========================================================= */
body.vk8-lc-app-page{
    background:#f4f7f6 !important;
}
body.vk8-lc-app-page .site,
body.vk8-lc-app-page #page,
body.vk8-lc-app-page .ast-container,
body.vk8-lc-app-page .site-content,
body.vk8-lc-app-page .entry-content,
body.vk8-lc-app-page article,
body.vk8-lc-app-page .content-area,
body.vk8-lc-app-page .site-main{
    background:transparent !important;
}
body.vk8-lc-app-page .entry-content > .vk8-campus,
body.vk8-lc-app-page .site-main > .vk8-campus,
body.vk8-lc-app-page article .vk8-campus{
    position:relative;
}
body.vk8-lc-app-page .entry-content > .vk8-campus::before,
body.vk8-lc-app-page .site-main > .vk8-campus::before,
body.vk8-lc-app-page article .vk8-campus::before{
    content:"";
    position:fixed;
    z-index:0;
    right:4vw;
    bottom:5vh;
    width:min(430px,42vw);
    height:170px;
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:contain;
    opacity:.025;
    pointer-events:none;
}
body.vk8-lc-app-page .entry-content > .vk8-campus > *,
body.vk8-lc-app-page .site-main > .vk8-campus > *,
body.vk8-lc-app-page article .vk8-campus > *{
    position:relative;
    z-index:1;
}


/* =========================================================
   DEELNEMERSOMGEVING — ONTWERP 1 — v0.18.15
   Rustige zelfstandige campus, gebaseerd op het gekozen eerste ontwerp.
   ========================================================= */

html:has(body.vk8-lc-app-page),
body.vk8-lc-app-page{
    background:#f3f2ef !important;
}

#vk8-campus-app{
    position:relative;
    min-height:100vh;
    padding:34px 0 48px;
    background:
        radial-gradient(circle at 18% 0%,rgba(18,85,89,.035),transparent 34%),
        linear-gradient(180deg,#f7f6f3 0%,#f1f1ee 100%) !important;
}

/* Subtiele grafische bogen uit ontwerp 1. */
#vk8-campus-app::after{
    content:"";
    position:fixed;
    z-index:0;
    right:-110px;
    bottom:-170px;
    width:760px;
    height:760px;
    border:1px solid rgba(18,85,89,.035);
    border-radius:50%;
    box-shadow:
        0 0 0 82px rgba(18,85,89,.018),
        0 0 0 168px rgba(18,85,89,.012);
    pointer-events:none;
}

/* Het bestaande centrale logo blijft als heel licht watermerk rechtsonder. */
#vk8-campus-app::before{
    right:5vw !important;
    bottom:5vh !important;
    width:min(350px,34vw) !important;
    height:155px !important;
    opacity:.032 !important;
    filter:grayscale(1);
}

/* Eén rustige witte campusschil, zoals in ontwerp 1. */
body.vk8-lc-app-page .vk8-campus{
    width:calc(100% - 48px) !important;
    max-width:1320px !important;
    margin:0 auto !important;
    padding:0 0 42px !important;
    overflow:hidden;
    border:1px solid rgba(0,28,26,.08);
    border-radius:22px;
    background:rgba(255,255,255,.975);
    box-shadow:0 14px 44px rgba(0,28,26,.07);
}

/* Header geïntegreerd in de witte campusschil. */
body.vk8-lc-app-page .vk8-campus-brandbar{
    min-height:92px;
    margin:0 !important;
    padding:18px 34px !important;
    border:0 !important;
    border-bottom:1px solid #e8ecea !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}

body.vk8-lc-app-page .vk8-campus-brandbar-logo img{
    width:auto !important;
    max-width:min(285px,45vw) !important;
    max-height:58px !important;
}

body.vk8-lc-app-page .vk8-campus-brandbar-user{
    gap:14px;
}

body.vk8-lc-app-page .vk8-campus-external-link,
body.vk8-lc-app-page .vk8-campus-external-link:link,
body.vk8-lc-app-page .vk8-campus-external-link:visited{
    color:var(--vk8-green) !important;
    font-size:13.5px;
    font-weight:700;
}

body.vk8-lc-app-page .vk8-campus-user-name{
    color:#667085;
    font-size:13px;
}

body.vk8-lc-app-page .vk8-campus-logout{
    color:var(--vk8-green) !important;
    font-size:13px;
}

/* Alle inhoud krijgt dezelfde royale inspringing. */
body.vk8-lc-app-page .vk8-campus > .vk8-campus-back,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-hero,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-card,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-section,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-empty,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-learning-route,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-module-footer,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-profile-summary,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-notice,
body.vk8-lc-app-page .vk8-campus > form{
    margin-left:46px !important;
    margin-right:46px !important;
}

/* Teruglink rustig en compact. */
body.vk8-lc-app-page .vk8-campus-back{
    margin-top:24px !important;
    margin-bottom:4px !important;
    font-size:13px;
    font-weight:700;
}

/* Geen 'hero-kaart' meer: titel voelt als onderdeel van één rustige pagina. */
body.vk8-lc-app-page .vk8-campus-hero{
    margin-top:0 !important;
    margin-bottom:8px !important;
    padding:30px 0 26px !important;
    overflow:visible;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

body.vk8-lc-app-page .vk8-campus-hero::before{
    display:none !important;
}

body.vk8-lc-app-page .vk8-campus h1{
    max-width:900px;
    margin:4px 0 14px !important;
    color:var(--vk8-green) !important;
    font-size:clamp(34px,4vw,50px) !important;
    font-weight:780;
    letter-spacing:-.028em;
}

body.vk8-lc-app-page .vk8-campus-hero > p{
    max-width:900px;
    color:#4f5b58;
    font-size:17px;
    line-height:1.7;
}

body.vk8-lc-app-page .vk8-campus-eyebrow,
body.vk8-lc-app-page .vk8-campus-kicker,
body.vk8-lc-app-page .vk8-campus-block-type{
    color:var(--vk8-green) !important;
}

/* Oranje alleen als kleine accentkleur. */
body.vk8-lc-app-page .vk8-campus-eyebrow::after{
    content:"";
    display:block;
    width:38px;
    height:3px;
    margin-top:9px;
    border-radius:99px;
    background:var(--vk8-orange);
}

/* Dashboard/opleiding: kaarten stiller en minder 'website'. */
body.vk8-lc-app-page .vk8-campus-card,
body.vk8-lc-app-page .vk8-campus-section,
body.vk8-lc-app-page .vk8-campus-empty{
    border:1px solid #e4e9e7 !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:none !important;
}

body.vk8-lc-app-page .vk8-campus-program-card{
    margin-top:22px;
    padding:28px 30px !important;
}

/* Leerroute: leerblokken als rustige hoofdstukken binnen dezelfde pagina. */
body.vk8-lc-app-page .vk8-campus-learning-route{
    margin-top:10px;
}

body.vk8-lc-app-page .vk8-campus-block{
    position:relative;
    margin:0 0 18px !important;
    padding:26px 30px 28px !important;
    border:1px solid #e4e9e7 !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.985) !important;
    box-shadow:none !important;
}

body.vk8-lc-app-page .vk8-campus-block::before{
    content:"";
    position:absolute;
    top:26px;
    bottom:26px;
    left:0;
    width:3px;
    border-radius:0 3px 3px 0;
    background:rgba(244,144,30,.75);
}

body.vk8-lc-app-page .vk8-campus-block h2{
    margin:4px 0 12px !important;
    color:var(--vk8-green) !important;
    font-size:clamp(23px,2.3vw,31px) !important;
    font-weight:760;
}

body.vk8-lc-app-page .vk8-campus-block-type{
    font-size:13px !important;
    letter-spacing:.015em !important;
}

body.vk8-lc-app-page .vk8-campus-time{
    padding:6px 10px;
    border-radius:10px;
    background:#eef5f3 !important;
    color:var(--vk8-green) !important;
    font-size:13px;
    font-weight:700;
}

body.vk8-lc-app-page .vk8-campus-copy{
    max-width:900px;
    color:#424d4a;
    line-height:1.72;
}

/* Voortgang vooral groen, oranje alleen voor actie. */
body.vk8-lc-app-page .vk8-campus-progress{
    background:#e9eeec !important;
}
body.vk8-lc-app-page .vk8-campus-progress span{
    background:var(--vk8-green) !important;
}

/* Knoppen compact en rustig. */
body.vk8-lc-app-page .vk8-campus-btn,
body.vk8-lc-app-page .vk8-campus-btn:link,
body.vk8-lc-app-page .vk8-campus-btn:visited{
    border-radius:10px !important;
    border-color:var(--vk8-green) !important;
    background:var(--vk8-green) !important;
    color:#fff !important;
    box-shadow:none !important;
}

body.vk8-lc-app-page .vk8-campus-btn--secondary,
body.vk8-lc-app-page .vk8-campus-btn--secondary:link,
body.vk8-lc-app-page .vk8-campus-btn--secondary:visited{
    background:#fff !important;
    color:var(--vk8-green) !important;
}

/* Primaire 'volgende stap' mag het oranje accent gebruiken. */
body.vk8-lc-app-page .vk8-campus-next .vk8-campus-btn{
    border-color:var(--vk8-orange) !important;
    background:var(--vk8-orange) !important;
}

/* Footer van een module blijft onderdeel van de rustige witte pagina. */
body.vk8-lc-app-page .vk8-campus-module-footer{
    padding-top:8px;
}

/* Mobiel: dezelfde stijl, maar zonder te veel witte rand. */
@media(max-width:760px){
    #vk8-campus-app{
        padding:14px 0 28px;
    }

    body.vk8-lc-app-page .vk8-campus{
        width:calc(100% - 20px) !important;
        border-radius:16px;
    }

    body.vk8-lc-app-page .vk8-campus-brandbar{
        min-height:auto;
        padding:15px 18px !important;
    }

    body.vk8-lc-app-page .vk8-campus > .vk8-campus-back,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-hero,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-card,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-section,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-empty,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-learning-route,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-module-footer,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-profile-summary,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-notice,
    body.vk8-lc-app-page .vk8-campus > form{
        margin-left:20px !important;
        margin-right:20px !important;
    }

    body.vk8-lc-app-page .vk8-campus-block{
        padding:22px 20px 24px !important;
    }

    #vk8-campus-app::after{
        width:520px;
        height:520px;
        right:-260px;
        bottom:-180px;
    }

    #vk8-campus-app::before{
        width:58vw !important;
        opacity:.024 !important;
    }
}


/* =========================================================
   WATERMERK — ALTIJD IN BEELD — v0.18.16
   ========================================================= */

/* Het oude pseudo-watermerk uit eerdere versies uitzetten. */
#vk8-campus-app::before{
    display:none !important;
}

/*
 * Het watermerk staat nu vast aan de zichtbare browserhoek.
 * Het centrale horizontale Learning Campus-logo wordt bewust "gecropt":
 * alleen het herkenbare campusbeeldmerk links wordt getoond.
 */
.vk8-campus-fixed-watermark{
    position:fixed;
    z-index:0;
    right:38px;
    bottom:30px;
    width:210px;
    height:205px;
    overflow:hidden;
    background-repeat:no-repeat;
    background-position:left center;
    background-size:auto 196px;
    opacity:.060;
    filter:grayscale(1);
    pointer-events:none;
    user-select:none;
}

#vk8-campus-app{
    position:relative;
    z-index:1;
}

body.vk8-lc-preview-active .vk8-campus-fixed-watermark{
    bottom:30px;
}

@media(max-width:760px){
    .vk8-campus-fixed-watermark{
        right:14px;
        bottom:16px;
        width:135px;
        height:132px;
        background-size:auto 126px;
        opacity:.040;
    }
}


/* =========================================================
   ONTWERP 1 — WATERMERK BINNEN DE CAMPUSSCHIL — v0.18.17
   ========================================================= */

/*
 * Op brede schermen was de campusschil begrensd op 1320px, waardoor het
 * watermerk visueel buiten de leeromgeving terechtkwam. Ontwerp 1 gebruikt
 * juist een brede rustige witte omgeving met de leerinhoud links en het
 * watermerk subtiel rechtsonder.
 */
body.vk8-lc-app-page .vk8-campus{
    position:relative !important;
    isolation:isolate;
    width:calc(100% - 56px) !important;
    max-width:none !important;
    margin:0 28px !important;
}

/* Het losse viewport-watermerk uit v0.18.16 vervalt. */
.vk8-campus-fixed-watermark{
    display:none !important;
}

/*
 * Het watermerk wordt nu onderdeel van de witte campusschil.
 * position:fixed houdt het op 100% zoom in beeld; overflow:hidden van de
 * campusschil zorgt dat het nooit meer buiten de campus kan verschijnen.
 */
body.vk8-lc-app-page .vk8-campus::before{
    content:"";
    position:fixed;
    z-index:0;
    right:72px;
    bottom:42px;
    width:230px;
    height:220px;
    background-image:var(--vk8-campus-watermark);
    background-repeat:no-repeat;
    background-position:left center;
    background-size:auto 210px;
    opacity:.052;
    filter:grayscale(1);
    pointer-events:none;
    user-select:none;
}

/* Leerinhoud blijft altijd boven het watermerk. */
body.vk8-lc-app-page .vk8-campus > *{
    position:relative;
    z-index:1;
}

/*
 * Op een brede monitor hoeft tekst niet over de volledige breedte te lopen.
 * Zo ontstaat precies de rustige compositie van ontwerp 1: inhoud links,
 * ademruimte en watermerk rechts.
 */
body.vk8-lc-app-page .vk8-campus > .vk8-campus-back,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-hero,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-card,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-section,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-empty,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-learning-route,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-module-footer,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-profile-summary,
body.vk8-lc-app-page .vk8-campus > .vk8-campus-notice,
body.vk8-lc-app-page .vk8-campus > form{
    width:calc(100% - 92px) !important;
    max-width:1120px !important;
    margin-right:auto !important;
}

/* De bovenbalk blijft over de volle breedte van de campusschil lopen. */
body.vk8-lc-app-page .vk8-campus > .vk8-campus-brandbar{
    width:100% !important;
    max-width:none !important;
}

@media(max-width:1240px){
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-back,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-hero,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-card,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-section,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-empty,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-learning-route,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-module-footer,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-profile-summary,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-notice,
    body.vk8-lc-app-page .vk8-campus > form{
        max-width:none !important;
    }
}

@media(max-width:760px){
    body.vk8-lc-app-page .vk8-campus{
        width:calc(100% - 20px) !important;
        margin:0 10px !important;
    }

    body.vk8-lc-app-page .vk8-campus::before{
        right:24px;
        bottom:22px;
        width:130px;
        height:126px;
        background-size:auto 120px;
        opacity:.035;
    }

    body.vk8-lc-app-page .vk8-campus > .vk8-campus-back,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-hero,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-card,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-section,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-empty,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-learning-route,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-module-footer,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-profile-summary,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-notice,
    body.vk8-lc-app-page .vk8-campus > form{
        width:calc(100% - 40px) !important;
    }
}


/* =========================================================
   ONTWERP 1 — WATERMERK VERFIJNING — v0.18.18
   ========================================================= */

/*
 * Het watermerk krijgt bewust meer vrije ruimte:
 * iets kleiner, verder naar de buitenhoek en net iets zichtbaarder.
 */
body.vk8-lc-app-page .vk8-campus::before{
    right:34px !important;
    bottom:22px !important;
    width:172px !important;
    height:168px !important;
    background-size:auto 158px !important;
    background-position:left center !important;
    opacity:.070 !important;
}

/*
 * Op brede schermen houden we de inhoud iets compacter.
 * Daardoor blijft rechts een rustige zone over waarin het watermerk vrij staat.
 */
@media(min-width:1400px){
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-back,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-hero,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-card,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-section,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-empty,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-learning-route,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-module-footer,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-profile-summary,
    body.vk8-lc-app-page .vk8-campus > .vk8-campus-notice,
    body.vk8-lc-app-page .vk8-campus > form{
        max-width:1040px !important;
    }
}

@media(max-width:760px){
    body.vk8-lc-app-page .vk8-campus::before{
        right:14px !important;
        bottom:12px !important;
        width:112px !important;
        height:108px !important;
        background-size:auto 103px !important;
        opacity:.045 !important;
    }
}


/* =========================================================
   ONTWERP 1 — LICHT TRANSPARANTE CONTENTVLAKKEN — v0.18.19
   ========================================================= */

/*
 * Alleen de achtergrond wordt transparant gemaakt.
 * Tekst, iconen en knoppen blijven volledig dekkend en scherp.
 * Zo kan het subtiele campuswatermerk door de witte vlakken heen schemeren.
 */
body.vk8-lc-app-page .vk8-campus-card,
body.vk8-lc-app-page .vk8-campus-section,
body.vk8-lc-app-page .vk8-campus-empty,
body.vk8-lc-app-page .vk8-campus-block{
    background:rgba(255,255,255,.90) !important;
}

/* Ook enkele functionele panelen iets zachter maken. */
body.vk8-lc-app-page .vk8-campus-next,
body.vk8-lc-app-page .vk8-campus-profile-summary,
body.vk8-lc-app-page .vk8-campus-objective,
body.vk8-lc-app-page .vk8-campus-access-message{
    background:rgba(238,245,243,.90) !important;
}

/*
 * De bovenbalk en de campusschil zelf blijven vrijwel volledig wit.
 * Zo blijft de basis rustig en blijft de leesbaarheid maximaal.
 */
body.vk8-lc-app-page .vk8-campus-brandbar{
    background:rgba(255,255,255,.97) !important;
}

@media(max-width:760px){
    /*
     * Op mobiel iets minder transparant vanwege het kleinere leesvlak.
     */
    body.vk8-lc-app-page .vk8-campus-card,
    body.vk8-lc-app-page .vk8-campus-section,
    body.vk8-lc-app-page .vk8-campus-empty,
    body.vk8-lc-app-page .vk8-campus-block{
        background:rgba(255,255,255,.94) !important;
    }
}


/* =========================================================
   LEERBLOK ONTMOETEN — v0.18.20
   ========================================================= */
body.vk8-lc-app-page .vk8-campus-resource--meeting{
    border-color:rgba(18,85,89,.22) !important;
    background:rgba(238,245,243,.88) !important;
}
body.vk8-lc-app-page .vk8-campus-resource--meeting .vk8-campus-resource-icon{
    background:var(--vk8-green) !important;
    color:#fff !important;
}


/* =========================================================
   PREVIEW — TERUG NAAR BEHEERDER — v0.18.25
   ========================================================= */

/*
 * Deze knop is uitsluitend voor de beheerder in voorbeeldmodus.
 * Daarom bewust afwijkend van de deelnemerknoppen: wit met petrol rand.
 * Dit voorkomt de huidige groen-op-groen combinatie en maakt de functie
 * herkenbaar als beheeractie zonder te schreeuwen.
 */
body.vk8-lc-app-page .vk8-campus-preview-exit,
body.vk8-lc-app-page .vk8-campus-preview-exit:link,
body.vk8-lc-app-page .vk8-campus-preview-exit:visited{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:40px !important;
    padding:8px 15px !important;
    border:1.5px solid var(--vk8-green) !important;
    border-radius:10px !important;
    background:#fff !important;
    color:var(--vk8-green) !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    white-space:nowrap;
    box-shadow:none !important;
}

body.vk8-lc-app-page .vk8-campus-preview-exit:hover,
body.vk8-lc-app-page .vk8-campus-preview-exit:focus{
    border-color:var(--vk8-green) !important;
    background:var(--vk8-green) !important;
    color:#fff !important;
    text-decoration:none !important;
}

/* Op mobiel compact houden. */
@media(max-width:760px){
    body.vk8-lc-app-page .vk8-campus-preview-exit{
        min-height:36px !important;
        padding:7px 10px !important;
        font-size:12px !important;
    }
}


/* v0.18.27 – actieplan als vaste rode draad */
.vk8-campus-action-plan{
    border-left:4px solid var(--vk8-orange);
}
.vk8-campus-thread-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 16px;
}
.vk8-campus-thread-tag{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 10px;
    border-radius:999px;
    font-size:13px;
    line-height:1.2;
    font-weight:800;
}
.vk8-campus-thread-tag--actionplan{
    background:#fff3e4;
    color:#9a4e00;
    border:1px solid #f4c98f;
}
.vk8-campus-thread-tag--video{
    background:#eaf5f2;
    color:var(--vk8-green);
    border:1px solid #bddbd5;
}

/* =========================================================
   TESTS & PROFIELEN — v0.18.30
   ========================================================= */
.vk8-campus-test-intro{
    margin:18px 0 22px;
    padding:18px 20px;
    border:1px solid rgba(18,85,89,.16);
    border-radius:14px;
    background:rgba(238,245,243,.72);
}
.vk8-campus-test-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}
.vk8-campus-test-meta span{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(18,85,89,.14);
    color:var(--vk8-green);
    font-size:13px;
    font-weight:800;
}
.vk8-campus-test-form{
    display:grid;
    gap:14px;
}
.vk8-campus-test-question{
    margin:0;
    padding:18px 20px;
    border:1px solid rgba(18,85,89,.14);
    border-radius:14px;
    background:rgba(255,255,255,.88);
}
.vk8-campus-test-question legend{
    width:100%;
    margin-bottom:12px;
    color:var(--vk8-green);
    font-weight:800;
    line-height:1.45;
}
.vk8-campus-test-question legend span{
    color:var(--vk8-orange);
}
.vk8-campus-test-choice{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:10px 12px;
    margin:8px 0 0;
    border-radius:10px;
    background:#f8faf9;
    cursor:pointer;
    line-height:1.5;
}
.vk8-campus-test-choice input{
    margin-top:4px;
    flex:0 0 auto;
}
.vk8-campus-test-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}
.vk8-campus-test-privacy{
    margin:4px 0 0;
    color:#66706d;
    font-size:13px;
}
.vk8-campus-test-result{
    margin:18px 0;
    padding:22px;
    border:1px solid rgba(18,85,89,.16);
    border-radius:16px;
    background:rgba(255,255,255,.9);
}
.vk8-campus-test-result-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
}
.vk8-campus-test-result-head h3{
    margin:4px 0 0;
}
.vk8-campus-profile-code{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:82px;
    min-height:48px;
    padding:8px 14px;
    border-radius:12px;
    background:var(--vk8-green);
    color:#fff;
    font-size:24px;
    letter-spacing:2px;
}
.vk8-campus-dimension{
    margin:16px 0;
}
.vk8-campus-dimension-labels{
    display:flex;
    justify-content:space-between;
    gap:14px;
    margin-bottom:7px;
    font-size:14px;
}
.vk8-campus-dimension-labels strong:last-child{
    text-align:right;
}
.vk8-campus-dimension-track{
    position:relative;
    height:9px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(18,85,89,.22), rgba(244,144,30,.22));
}
.vk8-campus-dimension-track:after{
    content:"";
    position:absolute;
    left:50%;
    top:-3px;
    width:1px;
    height:15px;
    background:rgba(0,28,26,.28);
}
.vk8-campus-dimension-marker{
    position:absolute;
    top:50%;
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--vk8-green);
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 3px #fff;
}
.vk8-campus-dimension-balance,
.vk8-campus-test-result-date{
    display:block;
    margin-top:7px;
    color:#66706d;
    font-size:13px;
}
@media(max-width:700px){
    .vk8-campus-test-question{ padding:15px; }
    .vk8-campus-test-result-head{ flex-direction:column; }
    .vk8-campus-dimension-labels{ font-size:12px; }
}

/* =========================================================
   TESTS & PROFIELEN — inklapbaar testblok v0.18.32
   ========================================================= */
.vk8-campus-test-panel{
    margin:18px 0 22px;
    border:1px solid rgba(18,85,89,.18);
    border-radius:16px;
    background:rgba(255,255,255,.90);
    overflow:hidden;
}
.vk8-campus-test-panel[open]{
    box-shadow:0 10px 30px rgba(0,28,26,.06);
}
.vk8-campus-test-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:18px 20px;
    cursor:pointer;
    list-style:none;
    user-select:none;
    background:rgba(238,245,243,.58);
}
.vk8-campus-test-summary::-webkit-details-marker{
    display:none;
}
.vk8-campus-test-summary::marker{
    display:none;
    content:"";
}
.vk8-campus-test-summary:hover{
    background:rgba(238,245,243,.9);
}
.vk8-campus-test-summary-main{
    display:grid;
    gap:3px;
    min-width:0;
}
.vk8-campus-test-summary-main > strong{
    color:var(--vk8-green);
    font-size:19px;
    line-height:1.25;
}
.vk8-campus-test-summary-main > span:last-child{
    color:#66706d;
    font-size:14px;
}
.vk8-campus-test-summary-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:0 0 auto;
    padding:10px 13px;
    border:1px solid rgba(18,85,89,.32);
    border-radius:11px;
    background:#fff;
    color:var(--vk8-green);
    font-weight:800;
    font-size:14px;
}
.vk8-campus-test-summary-open{
    display:none;
}
.vk8-campus-test-panel[open] .vk8-campus-test-summary-closed{
    display:none;
}
.vk8-campus-test-panel[open] .vk8-campus-test-summary-open{
    display:inline;
}
.vk8-campus-test-chevron{
    display:inline-block;
    font-size:18px;
    line-height:1;
    transition:transform .18s ease;
}
.vk8-campus-test-panel[open] .vk8-campus-test-chevron{
    transform:rotate(180deg);
}
.vk8-campus-test-panel-body{
    padding:0 20px 20px;
}
.vk8-campus-test-panel-body > .vk8-campus-test-intro{
    margin-top:20px;
}
.vk8-campus-test-bottom-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:12px;
}
.vk8-campus-test-panel--completed .vk8-campus-test-summary{
    background:rgba(238,245,243,.72);
}
.vk8-campus-test-panel--completed .vk8-campus-test-summary-main > strong:after{
    content:" ✓";
    color:var(--vk8-green);
}
@media(max-width:700px){
    .vk8-campus-test-summary{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
        padding:16px;
    }
    .vk8-campus-test-summary-action{
        width:100%;
    }
    .vk8-campus-test-panel-body{
        padding:0 14px 16px;
    }
}


/* =========================================================
   Team Safety Scan – teamscan
   ========================================================= */
.vk8-campus-team-scan{max-width:1000px;margin-left:auto;margin-right:auto}
.vk8-campus-team-scan-head{margin-bottom:22px}
.vk8-campus-team-scan-head h1{margin:4px 0 14px;color:#155b57}
.vk8-campus-scan-domain{margin:0 0 12px;border:1px solid #dce8e6;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 2px 10px rgba(24,63,59,.035)}
.vk8-campus-scan-domain>summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;cursor:pointer;list-style:none;color:#155b57}
.vk8-campus-scan-domain>summary::-webkit-details-marker{display:none}
.vk8-campus-scan-domain>summary span:first-child{display:flex;flex-direction:column;gap:3px}
.vk8-campus-scan-domain>summary small{font-size:12px;color:#6b7774;font-weight:400}
.vk8-campus-scan-domain-toggle{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#e7f0ef;color:#155b57;font-size:20px;line-height:1}
.vk8-campus-scan-domain[open] .vk8-campus-scan-domain-toggle{background:#155b57;color:#fff;font-size:0}
.vk8-campus-scan-domain[open] .vk8-campus-scan-domain-toggle:after{content:'−';font-size:20px}
.vk8-campus-scan-domain-body{padding:0 20px 8px;border-top:1px solid #edf2f1}
.vk8-campus-scan-question{padding:20px 0;border-bottom:1px solid #edf2f1}
.vk8-campus-scan-question:last-child{border-bottom:0}
.vk8-campus-scan-question-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px}
.vk8-campus-scan-number{display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:#f0f5f4;color:#155b57;font-size:12px;font-weight:800}
.vk8-campus-scan-kind{display:block;margin:0 0 3px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#75817e;font-weight:800}
.vk8-campus-scan-question h3{margin:0;font-size:16px;line-height:1.45;color:#293330}
.vk8-campus-scan-question textarea{width:100%;min-height:110px;border:1px solid #cfdcda;border-radius:9px;padding:12px 13px;font:inherit;box-sizing:border-box}
.vk8-campus-scan-scale{display:grid;grid-template-columns:repeat(11,minmax(36px,1fr));gap:6px;margin-left:42px}
.vk8-campus-scan-scale label{position:relative;cursor:pointer}
.vk8-campus-scan-scale input{position:absolute;opacity:0;pointer-events:none}
.vk8-campus-scan-scale label span{display:flex;align-items:center;justify-content:center;min-height:38px;border:1px solid #cfdcda;border-radius:7px;background:#fff;color:#42504c;font-weight:700;transition:.15s ease}
.vk8-campus-scan-scale label:hover span{border-color:#17645f;background:#f4f8f7}
.vk8-campus-scan-scale input:checked+span{border-color:#17645f;background:#17645f;color:#fff;box-shadow:0 0 0 2px rgba(23,100,95,.1)}
.vk8-campus-scan-scale-labels{display:flex;justify-content:space-between;margin:5px 0 0 42px;color:#7a8582;font-size:11px}
.vk8-campus-team-scan-form>.vk8-campus-test-actions{margin-top:20px}
.vk8-team-report-total{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:14px 0 16px;padding:20px;border-radius:12px;background:#155b57;color:#fff}
.vk8-team-report-total strong{font-size:40px;line-height:1}
.vk8-team-report-total small{opacity:.88}
.vk8-team-report-domains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.vk8-team-report-domain{padding:14px;border:1px solid #dce8e6;border-radius:10px;background:#fff}
.vk8-team-report-domain span,.vk8-team-report-domain small{display:block}
.vk8-team-report-domain strong{display:block;margin:5px 0;font-size:25px;color:#155b57}
.vk8-team-report-domain small{font-size:11px;color:#687270}
.vk8-team-report-detail{margin:8px 0;border:1px solid #dce8e6;border-radius:9px;background:#fff;overflow:hidden}
.vk8-team-report-detail>summary{display:flex;justify-content:space-between;gap:12px;padding:14px 15px;cursor:pointer;color:#155b57}
.vk8-team-report-question-list,.vk8-team-report-open-list{border-top:1px solid #edf2f1;padding:0 15px}
.vk8-team-report-question{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid #edf2f1}
.vk8-team-report-question:last-child{border-bottom:0}
.vk8-team-report-question strong{color:#155b57;white-space:nowrap}
.vk8-team-report-open-list p{padding:11px 0;margin:0;border-bottom:1px solid #edf2f1}
.vk8-team-report-open-list p:last-child{border-bottom:0}
@media(max-width:850px){.vk8-team-report-domains{grid-template-columns:repeat(2,minmax(0,1fr))}.vk8-campus-scan-scale{grid-template-columns:repeat(6,minmax(38px,1fr))}}
@media(max-width:560px){.vk8-team-report-domains{grid-template-columns:1fr}.vk8-campus-scan-domain>summary{padding:15px}.vk8-campus-scan-domain-body{padding:0 15px 6px}.vk8-campus-scan-scale{grid-template-columns:repeat(4,minmax(42px,1fr));margin-left:0}.vk8-campus-scan-scale-labels{margin-left:0}.vk8-campus-scan-question-head{gap:9px}}

/* Team Safety Scan - inhoudelijke rapportage v0.18.45 */
.vk8-team-report-reading{margin:18px 0;padding:20px 22px;border:1px solid #dce8e6;border-radius:12px;background:#f7faf9}
.vk8-team-report-reading h4{margin:4px 0 10px;font-size:22px;color:#155b57}
.vk8-team-report-reading p{margin:0 0 10px;line-height:1.65}
.vk8-team-report-reading-note{margin-bottom:0!important;padding-top:10px;border-top:1px solid #dce8e6;color:#626d6a;font-size:13px}
.vk8-team-report-detail--analysis>summary{padding:16px 17px;font-size:16px}
.vk8-team-report-analysis{padding:18px;border-top:1px solid #edf2f1;background:#fff}
.vk8-team-report-domain-intro p{margin:0 0 9px;line-height:1.6}
.vk8-team-report-domain-definition{color:#5f6967}
.vk8-team-report-perspectives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:17px 0 10px}
.vk8-team-report-perspectives>div{padding:14px 16px;border:1px solid #dce8e6;border-radius:10px;background:#f8fbfa}
.vk8-team-report-perspectives span,.vk8-team-report-perspectives small{display:block}
.vk8-team-report-perspectives strong{display:block;margin:3px 0;font-size:27px;line-height:1;color:#155b57}
.vk8-team-report-perspectives small{font-size:11px;color:#697371}
.vk8-team-report-perspective-text{margin:0 0 18px;padding:12px 14px;border-left:3px solid #f7931e;background:#fff9f2;line-height:1.55}
.vk8-team-report-focus,.vk8-team-report-strength,.vk8-team-report-conversation{margin-top:18px}
.vk8-team-report-analysis h5{margin:0 0 10px;font-size:15px;color:#1e2b29}
.vk8-team-report-focus-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid #edf2f1}
.vk8-team-report-focus-row:last-child{border-bottom:0}
.vk8-team-report-focus-row p{margin:2px 0 0;line-height:1.45}
.vk8-team-report-focus-row>strong{white-space:nowrap;font-size:18px;color:#155b57}
.vk8-team-report-question-kind{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#6b7673}
.vk8-team-report-strength{padding:14px 16px;border-radius:10px;background:#f7faf9}
.vk8-team-report-conversation{padding:14px 17px;border-radius:10px;background:#f7faf9}
.vk8-team-report-conversation ul{margin:7px 0 0 19px;padding:0}
.vk8-team-report-conversation li{margin:0 0 7px;line-height:1.5}
.vk8-team-report-all-questions{margin-top:18px;border-top:1px solid #dce8e6;padding-top:12px}
.vk8-team-report-all-questions>summary{cursor:pointer;color:#155b57;font-weight:700}
.vk8-team-report-all-questions .vk8-team-report-question-list{margin-top:10px;border:1px solid #edf2f1;border-radius:8px}
.vk8-team-report-question span small{display:block;margin-bottom:3px;color:#71807c;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:650px){.vk8-team-report-perspectives{grid-template-columns:1fr}.vk8-team-report-analysis{padding:14px}.vk8-team-report-focus-row{gap:12px}}

/* Team Safety Scan - schaalhulp en gedeeld teamverslag v0.18.47 */
.vk8-campus-scan-privacy-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:18px 0 14px;
    padding:14px 16px;
    border:1px solid #d9e8e5;
    border-left:4px solid #155b57;
    border-radius:10px;
    background:#f5faf8;
}
.vk8-campus-scan-privacy-card strong{flex:0 0 auto;color:#155b57}
.vk8-campus-scan-privacy-card span{color:#4f5e5a;line-height:1.55}
.vk8-campus-scan-score-guide{
    margin:16px 0 6px;
    padding:18px;
    border:1px solid #dce8e6;
    border-radius:12px;
    background:#fff;
}
.vk8-campus-scan-score-guide-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:15px;
}
.vk8-campus-scan-score-guide-head h3{margin:3px 0 0;color:#155b57;font-size:19px}
.vk8-campus-scan-score-guide-head p{max-width:520px;margin:0;color:#5f6c68;line-height:1.5;font-size:13px}
.vk8-campus-scan-score-anchors{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
}
.vk8-campus-scan-score-anchors>div{
    min-height:78px;
    padding:11px 10px;
    border:1px solid #e1eae8;
    border-radius:9px;
    background:#f8fbfa;
}
.vk8-campus-scan-score-anchors strong{display:block;margin-bottom:5px;color:#155b57;font-size:21px;line-height:1}
.vk8-campus-scan-score-anchors span{display:block;color:#52615d;font-size:11px;line-height:1.35}
.vk8-campus-scan-scale-labels span{max-width:46%;line-height:1.35}
.vk8-campus-scan-scale-labels span:last-child{text-align:right}

.vk8-team-report-team-intro{
    margin:18px 0 22px;
    padding:24px;
    border:1px solid #d8e6e4;
    border-radius:14px;
    background:linear-gradient(180deg,#f7fbfa 0%,#fff 100%);
}
.vk8-team-report-team-intro h3{margin:4px 0 9px;color:#155b57;font-size:26px}
.vk8-team-report-team-intro>p{max-width:820px;margin:0 0 16px;color:#4f5d59;line-height:1.6}
.vk8-team-report-anon-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.vk8-team-report-anon-grid>div{
    padding:14px 15px;
    border:1px solid #dce8e6;
    border-radius:10px;
    background:#fff;
}
.vk8-team-report-anon-grid strong,.vk8-team-report-anon-grid span{display:block}
.vk8-team-report-anon-grid strong{margin-bottom:5px;color:#155b57}
.vk8-team-report-anon-grid span{color:#687471;font-size:12px;line-height:1.45}
.vk8-team-report-team-note{
    max-width:none!important;
    margin:14px 0 0!important;
    padding-top:13px;
    border-top:1px solid #dce8e6;
    color:#6a7572!important;
    font-size:12px;
}
@media(max-width:780px){
    .vk8-campus-scan-score-guide-head{align-items:flex-start;flex-direction:column;gap:8px}
    .vk8-campus-scan-score-anchors{grid-template-columns:repeat(3,minmax(0,1fr))}
    .vk8-team-report-anon-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
    .vk8-campus-scan-privacy-card{flex-direction:column;gap:4px}
    .vk8-campus-scan-score-anchors{grid-template-columns:repeat(2,minmax(0,1fr))}
    .vk8-campus-scan-scale-labels{font-size:10px}
}


/* Team Safety Scan - deelnemersvoorbeeld v0.18.48 */
.vk8-campus-scan-preview-note {
    display: grid;
    gap: 4px;
    margin: 18px 0;
    padding: 16px 18px;
    border: 1px solid #d7e6e3;
    border-left: 4px solid #f49a24;
    border-radius: 10px;
    background: #fffaf4;
}
.vk8-campus-scan-preview-note strong { color: #155f5b; }
.vk8-campus-team-scan-form--preview .vk8-campus-test-actions button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}


/* Campusnavigatie - duidelijkere terug- en websiteknoppen v0.18.51 */
body.vk8-lc-app-page .vk8-campus-back,
body.vk8-lc-app-page .vk8-campus-back:link,
body.vk8-lc-app-page .vk8-campus-back:visited {
    display:inline-flex;
    align-items:center;
    min-height:42px;
    margin:0 0 20px;
    padding:8px 14px;
    border:1px solid #cfe0dd;
    border-radius:10px;
    background:#f5faf8;
    color:var(--vk8-green) !important;
    font-size:15px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none !important;
    box-shadow:0 2px 8px rgba(0,28,26,.035);
    transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
body.vk8-lc-app-page .vk8-campus-back:hover,
body.vk8-lc-app-page .vk8-campus-back:focus {
    border-color:#aacbc5;
    background:#eaf5f2;
    box-shadow:0 4px 12px rgba(0,28,26,.06);
    transform:translateY(-1px);
}

body.vk8-lc-app-page .vk8-campus-external-link,
body.vk8-lc-app-page .vk8-campus-external-link:link,
body.vk8-lc-app-page .vk8-campus-external-link:visited {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:7px 12px;
    border:1px solid #cfe0dd;
    border-radius:9px;
    background:#f7fbfa;
    color:var(--vk8-green) !important;
    font-size:13px;
    font-weight:800;
    line-height:1.2;
    text-decoration:none !important;
    white-space:nowrap;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
}
body.vk8-lc-app-page .vk8-campus-external-link:hover,
body.vk8-lc-app-page .vk8-campus-external-link:focus {
    border-color:var(--vk8-green);
    background:var(--vk8-green);
    color:#fff !important;
    text-decoration:none !important;
}

@media(max-width:700px){
    body.vk8-lc-app-page .vk8-campus-back,
    body.vk8-lc-app-page .vk8-campus-back:link,
    body.vk8-lc-app-page .vk8-campus-back:visited{
        min-height:40px;
        padding:8px 12px;
        font-size:14px;
    }
    body.vk8-lc-app-page .vk8-campus-external-link,
    body.vk8-lc-app-page .vk8-campus-external-link:link,
    body.vk8-lc-app-page .vk8-campus-external-link:visited{
        min-height:36px;
        padding:7px 10px;
        font-size:12px;
    }
}


/* =========================================================
   LOGIN — RUSTIGER HERO + CAMPUS-WATERMERK — v0.18.55
   ========================================================= */

/* De rollenregel onder de intro is vervallen. */
.vk8-login-roleline{
    display:none !important;
}

/*
 * Speciaal beeldmerk voor het loginwatermerk.
 * De hoed en onderboog zijn bewust lichter dan de cirkel en de twee
 * figuren blijven als aparte vorm herkenbaar. Daardoor blijft het hele
 * Learning Campus-icoon leesbaar op het petrol/groene hero-vlak.
 */
.vk8-login-watermark{
    position:absolute;
    z-index:1;
    right:clamp(30px,4vw,66px);
    bottom:clamp(28px,4vw,58px);
    width:250px;
    height:auto;
    opacity:.18;
    pointer-events:none;
    user-select:none;
}

.vk8-login-watermark img{
    display:block;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    filter:none !important;
}

@media(max-width:980px){
    .vk8-login-watermark{
        right:24px;
        bottom:22px;
        width:170px;
        opacity:.13;
    }
}

@media(max-width:620px){
    .vk8-login-watermark{
        right:16px;
        bottom:14px;
        width:122px;
        opacity:.10;
    }
}

/* =========================================================
   TEAM SAFETY SCAN - RAPPORT v0.18.56
   ========================================================= */
.vk8-team-report{margin-top:18px;color:#263238}
.vk8-team-report-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 18px;padding:24px 26px;border-radius:18px;background:linear-gradient(135deg,#155b57 0%,#0f4c49 100%);color:#fff;box-shadow:0 10px 28px rgba(21,91,87,.10)}
.vk8-team-report-eyebrow{display:block;margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#f7a13b}
.vk8-team-report-hero h3{margin:0 0 4px;font-size:30px;line-height:1.12;color:#fff}
.vk8-team-report-team-name{margin:0!important;color:rgba(255,255,255,.82)!important;font-size:15px}
.vk8-team-report-meta{display:grid;grid-template-columns:repeat(3,minmax(74px,1fr));gap:8px;min-width:280px}
.vk8-team-report-meta>div{padding:11px 12px;border:1px solid rgba(255,255,255,.16);border-radius:11px;background:rgba(255,255,255,.08)}
.vk8-team-report-meta span,.vk8-team-report-meta strong{display:block}
.vk8-team-report-meta span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.68)}
.vk8-team-report-meta strong{margin-top:3px;font-size:15px;color:#fff}
.vk8-team-report-overview{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);gap:14px;margin:0 0 14px}
.vk8-team-report-total-card,.vk8-team-report-snapshot{padding:21px 22px;border:1px solid #dce8e6;border-radius:14px;background:#fff}
.vk8-team-report-card-label{display:block;margin-bottom:7px;color:#64716e;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.vk8-team-report-score-row{display:flex;align-items:baseline;gap:7px}
.vk8-team-report-score-row strong{font-size:48px;line-height:1;color:#155b57}
.vk8-team-report-score-row span{font-size:17px;color:#7b8583}
.vk8-team-report-total-card>p{margin:6px 0 13px;font-weight:700;color:#33413f}
.vk8-team-report-scorebar{height:10px;border-radius:999px;background:#e9efee;overflow:hidden}
.vk8-team-report-scorebar>span{display:block;height:100%;border-radius:999px;background:#f7931e}
.vk8-team-report-scorebar-labels{display:flex;justify-content:space-between;margin-top:5px;font-size:10px;color:#7a8582}
.vk8-team-report-snapshot-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #edf2f1}
.vk8-team-report-snapshot-row span{font-size:13px;color:#66726f}
.vk8-team-report-snapshot-row strong{text-align:right;color:#155b57}
.vk8-team-report-snapshot-row--focus strong{color:#b66a13}
.vk8-team-report-snapshot>p{margin:13px 0 0;line-height:1.55;color:#66716f;font-size:13px}
.vk8-team-report-band-guide{margin:0 0 18px;padding:17px 18px;border:1px solid #dce8e6;border-radius:13px;background:#f9fbfb}
.vk8-team-report-band-guide-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
.vk8-team-report-band-guide-head strong{color:#155b57}
.vk8-team-report-band-guide-head span{font-size:12px;color:#71807c}
.vk8-team-report-band-track{position:relative;display:flex;height:9px;border-radius:999px;overflow:visible;background:#eef2f1}
.vk8-team-report-band-track .band{display:block;height:9px}
.vk8-team-report-band-track .band--risk{background:#d9e2e0;border-radius:999px 0 0 999px}
.vk8-team-report-band-track .band--improve{background:#efd8ba}
.vk8-team-report-band-track .band--potential{background:#f4c986}
.vk8-team-report-band-track .band--strong{background:#9bc4bc;border-radius:0 999px 999px 0}
.vk8-team-report-band-track i{position:absolute;top:-5px;width:3px;height:19px;margin-left:-1px;border-radius:2px;background:#155b57;box-shadow:0 0 0 2px #fff}
.vk8-team-report-band-labels{display:grid;grid-template-columns:2fr .9fr 1.3fr 1.8fr;gap:8px;margin-top:9px}
.vk8-team-report-band-labels span{font-size:10px;line-height:1.35;color:#67736f}
.vk8-team-report-band-labels b{display:block;color:#33413f;font-size:10px}
.vk8-team-report-domains--enhanced{gap:11px}
.vk8-team-report-domains--enhanced .vk8-team-report-domain{padding:15px 15px 13px;border-radius:12px}
.vk8-team-report-domain-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vk8-team-report-domain-top span{font-weight:700;color:#33413f}
.vk8-team-report-domain-top strong{margin:0!important;font-size:25px!important;line-height:1!important;color:#155b57}
.vk8-team-report-domain-bar{height:6px;margin:10px 0 8px;border-radius:999px;background:#e9efee;overflow:hidden}
.vk8-team-report-domain-bar span{display:block;height:100%;border-radius:999px;background:#f7931e}
.vk8-team-report-section-head{margin:24px 0 9px;padding:0 2px}
.vk8-team-report-section-head>span{display:block;margin-bottom:3px;font-size:18px;font-weight:800;color:#155b57}
.vk8-team-report-section-head p{margin:0;color:#6a7773;font-size:13px;line-height:1.5}
.vk8-team-report-domain-summary{display:flex;flex-direction:column;gap:3px}
.vk8-team-report-domain-summary small{font-size:11px;font-weight:500;color:#6d7976}
.vk8-team-report-domain-score{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:34px;padding:0 10px;border-radius:999px;background:#eef5f4;color:#155b57!important;font-size:17px!important;font-weight:800}
.vk8-team-report-perspective-text strong{color:#9d5b0e}
.vk8-team-report-open{margin-top:24px;padding:18px;border:1px solid #eadfcf;border-radius:14px;background:#fffaf4}
.vk8-team-report-open-head{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:22px;align-items:start;margin-bottom:12px}
.vk8-team-report-open-head h4{margin:3px 0 0;font-size:21px;color:#155b57}
.vk8-team-report-open-head>p{margin:0;color:#6b716f;line-height:1.55;font-size:13px}
.vk8-team-report-footer-note{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:10px;background:#eef5f4;color:#53605d;font-size:12px;line-height:1.5}
.vk8-team-report-footer-note strong{min-width:150px;color:#155b57}
@media(max-width:850px){.vk8-team-report-hero{flex-direction:column}.vk8-team-report-meta{width:100%;min-width:0}.vk8-team-report-overview{grid-template-columns:1fr}.vk8-team-report-open-head{grid-template-columns:1fr}.vk8-team-report-footer-note{flex-direction:column;gap:4px}.vk8-team-report-footer-note strong{min-width:0}}
@media(max-width:560px){.vk8-team-report-hero{padding:20px}.vk8-team-report-hero h3{font-size:25px}.vk8-team-report-meta{grid-template-columns:repeat(3,1fr)}.vk8-team-report-meta>div{padding:9px}.vk8-team-report-score-row strong{font-size:42px}.vk8-team-report-band-labels{grid-template-columns:1fr 1fr}.vk8-team-report-snapshot-row{align-items:flex-start;flex-direction:column;gap:3px}.vk8-team-report-snapshot-row strong{text-align:left}}