body{
    font-family: Arial, Helvetica, sans-serif;
    max-width:1200px;
    margin:auto;
    padding:30px;
    background:#f5f5f5;
}

header{
    text-align:center;
    margin-bottom:40px;
}

section{
    background:white;
    padding:20px;
    border-radius:12px;
}

article{
    margin-bottom:20px;
    border-bottom:1px solid #ddd;
    padding-bottom:15px;
}
/* =======================================
   HERO
======================================= */

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f4f4;
}

.hero{
    position:relative;
    height:450px;
    overflow:hidden;
}

.hero-image{
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-gallery { width:100%; height:100%; overflow:hidden; background:#002B5C; }.hero-gallery-track { display:flex; width:max-content; height:100%; gap:0; }.hero-gallery-track img { display:block; width:clamp(260px, 34vw, 520px); height:100%; object-fit:cover; }.hero-gallery-photo { display:block; cursor:zoom-in; }.hero-gallery-moving { animation:heroGallery 38s linear infinite; }.hero:hover .hero-gallery-moving { animation-play-state:paused; } @keyframes heroGallery { from { transform:translateX(0); } to { transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hero-gallery-moving { animation:none; } }

.hero-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.35);

    color:white;

    text-align:center;
    pointer-events:none;
}
.photo-lightbox{display:none;position:fixed;z-index:1000;inset:0;place-items:center;padding:20px;background:rgba(0,0,0,.88);}.photo-lightbox:target{display:grid;}.photo-lightbox-dialog{position:relative;max-width:min(1100px,94vw);max-height:94vh;text-align:center;}.photo-lightbox-image{display:block;max-width:94vw;max-height:84vh;margin:auto;border-radius:8px;object-fit:contain;}.photo-lightbox-caption{margin:10px 48px 0;color:#fff;font-size:16px;}.photo-lightbox-close{position:absolute;right:0;top:0;transform:translate(45%,-45%);width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#002B5C;font-size:31px;line-height:40px;text-decoration:none;cursor:pointer;box-shadow:0 2px 9px rgba(0,0,0,.4);}

.logo{
    width:90px;
    margin-bottom:15px;
}

.hero h1{
    margin:0;
    font-size:42px;
}

.hero h2{
    margin:8px 0;
    font-size:28px;
    font-weight:400;
}

.hero p{
    font-size:20px;
}
.news-date{
    color:#777;
    font-size:14px;
}

/* =======================================
   OPENBARE TEAMS (ALLEEN MET TOESTEMMING)
======================================= */
.teams-page{max-width:1100px;margin:36px auto;padding:0 20px;background:transparent;}
.teams-eyebrow{color:#C8102E;font-weight:bold;letter-spacing:.08em;font-size:13px;margin:0;}
.teams-page h1{margin:6px 0 10px;}
.teams-intro{max-width:700px;color:#555;margin-bottom:28px;}
.public-team-card{background:#fff;border-radius:14px;padding:24px;margin:18px 0;box-shadow:0 3px 12px rgba(0,0,0,.08);}
.teams-story{max-width:900px;background:#fff;border-radius:14px;padding:26px 30px;margin:20px 0 28px;box-shadow:0 3px 12px rgba(0,0,0,.08);}.teams-story h2{margin:0 0 14px;color:#002B5C;}.teams-story p{margin:0 0 14px;line-height:1.65;}.teams-story p:last-child{margin-bottom:0;}@media(max-width:600px){.teams-story{padding:20px;}}
.public-team-card header{text-align:left;margin:0 0 16px;}
.public-team-card header h2{margin:0 0 4px;}
.public-team-card header p{margin:5px 0;color:#555;}
.public-players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:16px;}
.public-player-card{text-align:center;border-radius:10px;background:#f7f7f7;padding:14px;min-height:72px;}
.public-player-card img{width:112px;height:112px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 10px;}
.public-player-card h3{font-size:16px;margin:0;}
.public-team-empty{color:#666;font-style:italic;}
.member-documents-page{max-width:900px;margin:36px auto;padding:0 20px;background:transparent;}
.member-documents-list{margin-top:24px;}
/* =======================================
   NAVIGATIE
======================================= */

.navbar{

    background:#C8102E;

    display:flex;

    justify-content:center;

    gap:35px;

    padding:14px;

}

.navbar a{

    color:white;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

}

.navbar a:hover{

    text-decoration:underline;

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

.mobile-header{

    display:none;

    background:#C8102E;

    color:white;

    padding:15px;

    font-size:22px;

    font-weight:bold;

    justify-content:space-between;

    align-items:center;

}

.mobile-header button{

    background:none;

    border:none;

    color:white;

    font-size:32px;

    cursor:pointer;

}

@media(max-width:700px){

    .mobile-header{

        display:flex;

    }

    .navbar{

        display:none;

        flex-direction:column;

        gap:0;

    }

    .navbar.show{

        display:flex;

    }

    .navbar a{

        padding:15px;

        border-top:1px solid rgba(255,255,255,.2);

    }

}
/* =======================================
   NIEUWS
======================================= */

.news-card{

    background:white;

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.news-header{

    margin-bottom:10px;

}

.news-date{

    color:#888;

    font-size:14px;

}

.news-card h3{

    margin:0 0 10px 0;

    font-size:28px;

}

.news-card p{

    line-height:1.6;

}

.birthday-card{
    background:linear-gradient(135deg, #fff8d7, #fff0f3);
    border:2px solid #f1c85b;
}

.birthday-card h2{
    margin-top:0;
}

.birthday-intro{
    font-size:18px;
    font-weight:bold;
}

.birthday-list{
    list-style:none;
    margin:16px 0;
    padding:0;
}

.birthday-list li{
    padding:10px 0;
    border-bottom:1px solid rgba(120, 80, 0, .16);
    display:flex;
    flex-direction:column;
    gap:3px;
}

.birthday-list span,
.birthday-note{
    color:#5f4b20;
}

.birthday-note{
    font-size:14px;
    margin-bottom:0;
}

.read-more{

    display:inline-block;

    margin-top:15px;

    color:#C8102E;

    text-decoration:none;

    font-weight:bold;

}

.read-more:hover{

    text-decoration:underline;

}

/* =======================================
   LEDENLOGIN
======================================= */

.member-access-card,
.login-card {
    max-width: 560px;
}
.app-download-card { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:820px; border:2px solid #cbd8e6; }.app-download-card h2 { margin-top:0; color:#002B5C; }.app-download-copy { flex:1; }.store-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }.store-button { display:inline-block; padding:11px 15px; border-radius:8px; background:#002B5C; color:#fff; font-weight:bold; text-decoration:none; }.store-button:hover { background:#C8102E; color:#fff; }.store-qr-codes { display:flex; gap:10px; }.app-store-qr { flex:0 0 118px; text-align:center; color:#002B5C; font-size:13px; font-weight:bold; text-decoration:none; }.app-store-qr img { display:block; width:108px; height:108px; margin:0 auto 6px; border:6px solid #fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.14); } @media(max-width:700px) { .app-download-card { align-items:flex-start; }.store-qr-codes { gap:5px; }.app-store-qr { flex-basis:82px; font-size:11px; }.app-store-qr img { width:76px; height:76px; border-width:4px; } .store-buttons { flex-direction:column; } .store-button { text-align:center; } }

/* Op telefoon én in de ingebouwde app-browser zijn QR-codes niet scanbaar.
   De winkelknoppen blijven dan als rustige, goed leesbare keuze over. */
@media (max-width: 700px) {
  .app-download-card { display: block; }
  .app-download-card .store-qr-codes { display: none; }
}

.login-page {
    max-width: 560px;
    margin: 20px auto;
}

.login-form {
    display: grid;
    gap: 10px;
}

.login-form label {
    font-weight: bold;
    margin-top: 8px;
}

.login-form input {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #b8b8b8;
    border-radius: 6px;
    padding: 12px;
    font: inherit;
}
.password-field { position:relative; display:block; }.password-field input { padding-right:52px; }.password-toggle { position:absolute; top:50%; right:8px; transform:translateY(-50%); border:0; background:transparent; cursor:pointer; font-size:20px; line-height:1; padding:7px; }

.primary-button,
.secondary-button {
    display: inline-block;
    width: fit-content;
    border: 0;
    border-radius: 6px;
    padding: 12px 18px;
    cursor: pointer;
    font: inherit;
    font-weight: bold;
    text-decoration: none;
}

.primary-button {
    background: #C8102E;
    color: white;
}

.primary-button:hover {
    background: #a50d26;
}

.secondary-button {
    background: #002B5C;
    color: white;
}

.form-error {
    color: #a50d26;
    font-weight: bold;
    margin: 8px 0;
}

.cms-page { max-width: 1050px; padding-top: 42px; padding-bottom: 60px; }
.cms-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:25px; }
.cms-hero h1 { font-size:42px; margin:3px 0 8px; color:#002B5C; }
.cms-hero p { margin:0; color:#52606d; }
.cms-eyebrow { margin:0; color:#C8102E!important; font-size:12px; font-weight:bold; letter-spacing:1.2px; }
.cms-view-site { color:#002B5C; font-weight:bold; text-decoration:none; white-space:nowrap; }
.cms-overview { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px; margin:24px 0 38px; }
.cms-overview div { background:#002B5C; color:white; border-radius:10px; padding:18px 20px; }
.cms-overview strong { display:block; font-size:28px; }
.cms-overview span { font-size:14px; opacity:.85; }
.cms-section { margin:30px 0; background:#fff; padding:26px; border-radius:12px; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.cms-section-heading { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid #e7e9ec; padding-bottom:15px; margin-bottom:16px; }
.cms-section-heading h2 { margin:3px 0 0; color:#002B5C; }
.cms-section-heading > span { color:#657380; font-size:14px; }
.cms-composer { border:1px solid #dce1e6; border-radius:8px; padding:0 18px 18px; background:#f8fafb; }
.cms-composer summary, .cms-item summary { cursor:pointer; }
.cms-composer summary { color:#C8102E; font-weight:bold; padding:16px 0; }
.cms-form { display:grid; gap:14px; max-width:760px; }
.cms-form label { display:grid; gap:6px; color:#334155; font-size:14px; font-weight:bold; }
.cms-form input, .cms-form textarea { box-sizing:border-box; width:100%; padding:11px; font:inherit; border:1px solid #bcc5ce; border-radius:6px; background:white; }
.cms-form select { box-sizing:border-box; width:100%; padding:11px; font:inherit; border:1px solid #bcc5ce; border-radius:6px; background:white; }
.cms-form textarea { min-height:145px; resize:vertical; }
.rich-editor-wrap { border:1px solid #bcc5ce; border-radius:6px; overflow:hidden; background:white; }
.rich-toolbar { display:flex; flex-wrap:wrap; gap:5px; padding:7px; background:#eef2f5; border-bottom:1px solid #d5dce2; }
.rich-toolbar button { border:1px solid #c5cdd5; border-radius:4px; background:#fff; color:#002B5C; padding:5px 8px; cursor:pointer; font:inherit; font-size:13px; }
.rich-toolbar button:hover { background:#dce8f1; }
.rich-editor { min-height:150px; padding:11px; outline:none; line-height:1.55; }
.rich-editor:empty:before { content:attr(data-placeholder); color:#87939e; }
.rich-editor p:first-child { margin-top:0; }
.cms-fields-two, .cms-fields-three { display:grid; gap:14px; }
.cms-fields-two { grid-template-columns:2fr 1fr; }
.cms-security-stack { display:grid; grid-template-columns:1fr; gap:14px; }
.cms-security-stack .cms-item { margin:0; }
.cms-security > summary { cursor:pointer; list-style:none; }
.cms-security > summary::-webkit-details-marker { display:none; }
.cms-security > summary .cms-section-heading { margin-bottom:4px; }
.cms-security > summary .cms-section-heading > span::before { content:'⌄ '; }
.cms-security[open] > summary .cms-section-heading > span { font-size:0; }
.cms-security[open] > summary .cms-section-heading > span::before { content:'⌃ Inklappen'; font-size:14px; }
.cms-security-content { border-top:1px solid #e7e9ec; margin-top:16px; padding-top:16px; }
.cms-fields-three { grid-template-columns:2fr 1fr 1fr; }
.cms-list { margin-top:16px; }
.cms-item { margin:10px 0; border:1px solid #e0e5e9; border-radius:8px; background:white; padding:0 16px 16px; }
.cms-item summary { display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center; padding:15px 0; list-style:none; }
.cms-item summary::-webkit-details-marker { display:none; }
.cms-date { color:#657380; font-size:14px; }
.cms-edit, .cms-text-link { color:#C8102E; font-size:14px; font-weight:bold; text-decoration:none; }
.cms-delete { margin-top:12px; }
.cms-help { margin:0; color:#657380; font-size:13px; }
.cms-albums { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; margin-top:16px; }
.cms-album { border:1px solid #e0e5e9; border-radius:8px; padding:0 18px 18px; }
.cms-album summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; padding:16px 0; }.cms-album summary::-webkit-details-marker { display:none; }
.cms-album-edit { border-top:1px solid #e4e8eb; padding-top:16px; }
.cms-album h3 { color:#002B5C; margin:5px 0; }.cms-album p { margin:4px 0; }
.cms-add-photos { margin-top:18px; }.cms-photo-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:10px; margin-top:18px; }.cms-photo-list img, .cms-photo-list video { width:100%; height:100px; object-fit:cover; border-radius:6px; background:#111; }.cms-photo-list .danger-button { width:100%; font-size:12px; padding:6px; margin-top:4px; }
.member-document-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }.member-download-link { color:#002B5C; font-weight:bold; }.newsletter-fullscreen-link { display:inline-block; padding:11px 16px; border-radius:8px; background:#C8102E; color:#fff; font-weight:bold; text-decoration:none; }.newsletter-fullscreen-link:hover { background:#9f0c25; color:#fff; }.newsletter-mobile-help { display:none; color:#4b5563; }.newsletter-viewer { width:100%; height:min(78vh, 1000px); min-height:600px; border:1px solid #d7dfe5; border-radius:10px; background:#f4f6f7; }
@media (max-width: 700px) { .member-document-actions { align-items:stretch; flex-direction:column; gap:10px; }.newsletter-fullscreen-link { text-align:center; font-size:17px; }.newsletter-mobile-help { display:block; }.newsletter-viewer { display:none; } }
.agenda-archive { margin-top:28px; border:1px solid #d7dfe5; border-radius:10px; background:#f8fafc; }.agenda-archive summary { cursor:pointer; padding:18px; color:#002B5C; font-size:18px; font-weight:bold; }.agenda-archive-content { padding:0 18px 18px; }.agenda-archive-item { opacity:.82; }
.agenda-attachment, .cms-agenda-attachment { display:block; width:100%; max-width:620px; max-height:440px; margin:16px 0 4px; border:1px solid #dce3e9; border-radius:9px; object-fit:cover; }.cms-agenda-attachment { max-width:300px; max-height:210px; }.agenda-attachment-link { font-weight:bold; }
.news-ticker { margin:0 0 30px; border:1px solid #cbd8e6; border-radius:12px; overflow:hidden; background:#002B5C; color:#fff; }.news-ticker-label { margin:0; padding:10px 18px; background:#C8102E; font-size:13px; font-weight:bold; letter-spacing:.08em; }.news-ticker-window { overflow:hidden; }.news-ticker-track { display:flex; width:100%; }.news-ticker-item { flex:0 0 100%; box-sizing:border-box; min-height:230px; padding:22px 22px 26px; }.news-ticker-item .news-date { color:#d6e6f5; }.news-ticker-item h2 { margin:4px 0 10px; color:#fff; font-size:24px; }.news-ticker-item p { color:#fff; }.news-ticker-item .read-more { color:#fff; text-decoration:underline; }.news-ticker-count-2 { animation:newsTickerTwo 18s ease-in-out infinite; }.news-ticker-count-3 { animation:newsTickerThree 24s ease-in-out infinite; }.news-ticker:hover .news-ticker-track, .news-ticker:focus-within .news-ticker-track { animation-play-state:paused; }.news-archive { margin-top:28px; border:1px solid #d7dfe5; border-radius:10px; background:#f8fafc; }.news-archive summary { cursor:pointer; padding:18px; color:#002B5C; font-size:18px; font-weight:bold; }.news-archive-content { max-height:620px; overflow-y:auto; padding:0 18px 18px; }.news-archive-item { opacity:.88; } @keyframes newsTickerTwo { 0%,42% { transform:translateX(0); } 50%,92% { transform:translateX(-100%); } 100% { transform:translateX(-200%); } } @keyframes newsTickerThree { 0%,27% { transform:translateX(0); } 33%,60% { transform:translateX(-100%); } 66%,93% { transform:translateX(-200%); } 100% { transform:translateX(-300%); } } @media (prefers-reduced-motion: reduce) { .news-ticker-track { animation:none !important; } }
.news-ticker-help{margin:0;padding:10px 18px 4px;color:#dceaf5;font-size:14px;}.news-ticker-window{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#C8102E #d6e2ed;}.news-ticker-window::-webkit-scrollbar{height:10px;}.news-ticker-window::-webkit-scrollbar-track{background:#d6e2ed;}.news-ticker-window::-webkit-scrollbar-thumb{background:#C8102E;border-radius:10px;}.news-ticker-track{width:100%;}.news-ticker-item{display:flex;align-items:center;gap:24px;scroll-snap-align:start;scroll-snap-stop:always;min-height:210px;}.news-ticker-copy{flex:1;min-width:0;}.news-ticker-image{width:220px;height:150px;border-radius:8px;object-fit:cover;}.news-archive-image{float:right;width:150px;height:100px;object-fit:cover;border-radius:7px;margin:0 0 12px 18px;}.news-detail-image{display:block;width:100%;max-height:560px;object-fit:cover;border-radius:12px;margin:18px 0 24px;}.cms-news-image{display:block;width:min(260px,100%);height:150px;object-fit:cover;border-radius:7px;border:1px solid #d7dfe5;}@media(max-width:700px){.news-ticker-item{align-items:flex-start;min-height:0;padding:18px;}.news-ticker-image{width:120px;height:100px;}.news-ticker-item h2{font-size:21px;}.news-archive-image{float:none;display:block;width:100%;height:180px;margin:12px 0;}}
.news-ticker-window{overflow:hidden;padding-bottom:0;scroll-snap-type:none;}.news-ticker-track{display:flex;width:100%;transition:transform .55s ease;will-change:transform;}.news-ticker-item{flex:0 0 100%;scroll-snap-align:none;}.news-ticker-controls{display:flex;justify-content:center;align-items:center;gap:14px;padding:11px 18px 14px;background:rgba(0,0,0,.16);font-size:14px;}.news-ticker-button{width:38px;height:34px;border:1px solid rgba(255,255,255,.7);border-radius:7px;background:#fff;color:#002B5C;font-size:22px;line-height:28px;cursor:pointer;}.news-ticker-button:hover,.news-ticker-button:focus{background:#f5d7dd;border-color:#fff;}
.cms-homepage-photo-picker fieldset { margin:18px 0; border:1px solid #e0e5e9; border-radius:8px; }.cms-homepage-photo-picker legend { padding:0 7px; color:#002B5C; font-weight:bold; }.cms-homepage-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; padding:10px; }.cms-homepage-photo-grid label { position:relative; display:block; cursor:pointer; }.cms-homepage-photo-grid input { position:absolute; z-index:1; top:8px; left:8px; width:20px; height:20px; }.cms-homepage-photo-grid img { display:block; width:100%; height:96px; object-fit:cover; border-radius:6px; }.cms-homepage-photo-grid span { display:block; padding-top:4px; font-size:12px; }
.cms-notice { padding:13px 16px; border-radius:7px; font-weight:bold; }.cms-notice-success { background:#e8f6ed; color:#176b38; }.cms-notice-error { background:#fbe9e9; color:#9a2020; }
.cms-invitation { margin:18px 0; padding:18px; border:2px solid #176b38; border-radius:8px; background:#eef8f1; }.cms-invitation p { margin:8px 0 14px; }.cms-invitation-copy { display:flex; gap:10px; align-items:center; }.cms-invitation-copy input { flex:1; min-width:0; padding:11px; font-size:14px; border:1px solid #b7c4cc; border-radius:5px; }
.cms-account-meta { margin:0 0 16px; color:#657380; font-size:14px; }.cms-account-meta code { color:#002B5C; }.cms-checkbox { display:flex!important; align-items:center; gap:9px; }.cms-checkbox input { width:auto!important; }.cms-password-form { margin-top:18px; padding-top:18px; border-top:1px solid #e4e8eb; }.cms-user-state { font-size:12px; font-weight:bold; }.cms-user-active { color:#176b38; }.cms-user-inactive { color:#9a2020; }
.content-page { max-width:850px; margin:40px auto; }.content-page h1 { color:#002B5C; }.content-page-image { display:block; width:100%; aspect-ratio:16 / 8; max-height:360px; object-fit:cover; border-radius:12px; margin:0 0 24px; }.content-page-body { line-height:1.65; }.content-page-body a { color:#C8102E; font-weight:bold; }.good-cause-list { display:grid; gap:18px; margin-top:28px; }.good-cause-card { display:grid; grid-template-columns:minmax(150px, 240px) minmax(0, 1fr); gap:20px; overflow:hidden; padding:18px; background:#fff; border:1px solid #e1e6eb; border-radius:12px; box-shadow:0 2px 8px rgba(0,43,92,.08); }.good-cause-card img { width:100%; height:150px; object-fit:cover; border-radius:8px; }.good-cause-card h2 { margin:0 0 4px; color:#002B5C; font-size:1.3rem; }.good-cause-date { margin:0 0 12px; color:#657487; font-weight:600; }.good-cause-description { line-height:1.65; overflow-wrap:break-word; white-space:pre-line; }.good-cause-description p:first-child { margin-top:0; }.good-cause-card p:first-child { margin-top:0; }.cms-content-image { display:block; width:min(320px, 100%); height:180px; object-fit:cover; border-radius:10px; border:1px solid #d9e0e8; } @media (max-width:900px) { .good-cause-card { grid-template-columns:1fr; }.good-cause-card img { width:100%; max-width:none; height:190px; } }
.danger-button { margin-top:8px; border:0; border-radius:6px; padding:8px 12px; background:#8d1d25; color:white; cursor:pointer; font:inherit; }.danger-button:hover { background:#721820; }
.books-page { max-width:900px; margin:40px auto; }.books-eyebrow { color:#C8102E; font-weight:bold; letter-spacing:.08em; font-size:13px; margin:0; }.books-page h1 { margin:6px 0 10px; color:#002B5C; }.books-intro { max-width:700px; line-height:1.65; color:#4b5563; }.books-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:28px; }.book-card { display:block; min-height:210px; padding:24px; border-radius:14px; background:#fff; color:#1f2937; text-decoration:none; box-shadow:0 3px 12px rgba(0,0,0,.09); border:1px solid #e1e6eb; transition:transform .18s ease, box-shadow .18s ease; }.book-card:hover { transform:translateY(-3px); box-shadow:0 8px 19px rgba(0,43,92,.16); }.book-icon { font-size:38px; }.book-card h2 { color:#002B5C; margin:12px 0 10px; }.book-card p { line-height:1.55; }.book-card strong { color:#C8102E; } @media(max-width:600px) { .books-grid { grid-template-columns:1fr; }.books-page { margin:28px auto; } }
@media(max-width:700px) { .cms-page { padding-top:25px; }.cms-hero { display:block; }.cms-view-site { display:inline-block; margin-top:15px; }.cms-overview { gap:8px; }.cms-overview div { padding:13px; }.cms-overview strong { font-size:22px; }.cms-section { padding:18px; }.cms-fields-two, .cms-fields-three { grid-template-columns:1fr; }.cms-item summary { grid-template-columns:1fr; gap:4px; }.cms-edit { display:none; } }
/* =======================================
   TRAINING
======================================= */

.training{

    margin-top:50px;

}

.training-card{

    background:white;

    border-radius:12px;

    padding:25px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.training-card p{

    font-size:18px;

    margin:12px 0;

}
/* =======================================
   FOOTER
======================================= */

.footer{

    margin-top:60px;

    background:#002B5C;

    color:white;

    padding:40px 20px;

}

.footer-content{

    max-width:1200px;

    margin:auto;

    text-align:center;

}

.footer h3{

    margin-top:0;

}

.footer p{

    margin:10px 0;

    line-height:1.6;

}

.copyright{

    margin-top:30px;

    font-size:14px;

    opacity:.8;

}
/* =======================================
   RESPONSIVE
======================================= */

main{

    max-width:1100px;

    margin:auto;

    padding:20px;

}

@media (max-width:700px){

    .hero{

        height:260px;

    }

    .logo{

        width:60px;

    }

    .hero h1{

        font-size:28px;

    }

    .hero h2{

        font-size:20px;

    }

    .hero p{

        font-size:16px;

    }

    .news-card h3{

        font-size:22px;

    }

}
/* =======================================
   FOTOGALERIJ
======================================= */

.photo-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    gap: 20px;

    margin-top: 30px;

}

.gallery-photo {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 12px;

    box-shadow: 0 3px 10px rgba(0,0,0,.15);

    cursor: pointer;

    transition: .2s;

}

.gallery-video {

    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    background: #111;

}

.gallery-photo:hover {

    transform: scale(1.03);

}
/* =======================================
   LIGHTBOX
======================================= */

.lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.lightbox img{

    max-width:92%;

    max-height:92%;

    border-radius:10px;

}

#closeLightbox{

    position:absolute;

    top:20px;

    right:30px;

    color:white;

    font-size:50px;

    cursor:pointer;

}
.lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    font-size:60px;

    color:white;

    cursor:pointer;

    user-select:none;

    padding:20px;

}

.lightbox-arrow:hover{

    color:#ddd;

}

.left{

    left:20px;

}

.right{

    right:20px;

}
/* =======================================
   TEAMS
======================================= */

.team-photo{

    width:100%;

    max-width:900px;

    display:block;

    margin:30px auto;

    border-radius:14px;

    box-shadow:0 5px 18px rgba(0,0,0,.15);

}

.player-card{

    text-align:center;

}

.player-card h3{

    margin:12px 0 5px;

    font-size:18px;

}

.player-card p{

    margin:0;

    color:#666;

}
.player-link{

    color:#002B5C;

    text-decoration:none;

}

.player-link:hover{

    color:#C8102E;

    text-decoration:underline;

}
/* =======================================
   SPELERS
======================================= */

.player-photo{

    width:100%;

    height:240px;

    object-fit:cover;

    object-position:center top;

    border-radius:12px;

    display:block;

}

.player-card{

    background:white;

    border-radius:16px;

    overflow:hidden;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    transition:.25s;

    text-align:center;

}

.player-card:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 30px rgba(0,0,0,.15);

}

.player-card h3{

    font-size:22px;

    color:#002B5C;

    margin:18px 0 6px;

}

.player-card p{

    color:#888;

    font-size:16px;

    margin-bottom:20px;

}
/* =======================================
   PROFIELFOTO'S
======================================= */

.player-photo {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* Kaart */

.player-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

.player-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,.14);
}

.player-card h3 {
    margin: 16px 10px 5px;
    font-size: 20px;
}

.player-card p {
    margin: 0 0 18px;
    color: #777;
    font-size: 15px;
}

.player-link {
    color: #002B5C;
    text-decoration: none;
}

.player-link:hover {
    color: #C8102E;
}
@media (max-width: 700px) {

    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .player-photo {
        height: 170px;
    }

    .player-card h3 {
        font-size: 17px;
    }

    .player-card p {
        font-size: 14px;
    }

}
.intro-cards {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin:40px 0;
}
.intro-cards .news-card { margin-bottom:0; }
.homepage-promo { margin:32px 0 0; }
.homepage-promo .news-card { margin-bottom:0; border:1px solid #d9e2ec; }

/* Donderdagcompetitie */
.competition-team-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.competition-team { min-width:0; margin:0; padding:12px; border:1px solid #d7e0e7; border-radius:8px; background:#fff; }.competition-team legend { padding:0 5px; color:#002B5C; font-weight:bold; }.competition-player-grid { display:grid; grid-template-columns:1fr; gap:5px; max-height:360px; overflow-y:auto; }.competition-player { display:flex!important; align-items:center; gap:8px!important; padding:7px; border-radius:5px; font-weight:normal!important; cursor:pointer; }.competition-player:hover { background:#eef4f8; }.competition-player input { flex:0 0 auto; width:auto!important; }.competition-player small { display:block; color:#657380; }.competition-heading { margin:28px 0 10px; color:#002B5C; }.competition-table-wrap { overflow-x:auto; border:1px solid #dce3e9; border-radius:8px; background:#fff; }.competition-table { width:100%; min-width:570px; border-collapse:collapse; }.competition-table th, .competition-table td { padding:10px 12px; border-bottom:1px solid #e5e9ed; text-align:center; }.competition-table th:nth-child(2) { text-align:left; }.competition-table tbody tr:nth-child(odd) { background:#f8fafc; }.competition-table tbody tr:first-child { background:#fff8d9; }.competition-table thead { background:#002B5C; color:#fff; }.competition-results { display:grid; gap:10px; }.competition-results article { padding:14px 16px; border:1px solid #dce3e9; border-radius:8px; background:#fff; }.competition-results p { margin:0 0 6px; }.competition-match-teams { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; color:#657380; line-height:1.5; }.competition-match-teams p { margin:0; }.competition-match-teams strong { color:#002B5C; }.competition-match-photo, .cms-competition-photo { display:block; width:100%; max-width:620px; max-height:440px; margin:14px 0; object-fit:cover; border-radius:9px; border:1px solid #dce3e9; }.cms-competition-photo { max-width:300px; max-height:210px; }.cms-match-photo-form { margin:16px 0; padding:14px; border:1px solid #dce3e9; border-radius:8px; background:#f8fafc; }.competition-vest { color:#C8102E; font-weight:bold; }.competition-page h2 { margin-top:32px; color:#002B5C; }.cms-result-form { margin-top:18px; padding-top:16px; border-top:1px solid #e4e8eb; }
.competition-standings { display:grid; gap:9px; }.competition-standing-row { display:grid; grid-template-columns:32px 46px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:10px; border:1px solid #dce3e9; border-radius:9px; background:#fff; }.competition-standing-row:first-child { border-color:#e4c85d; background:#fff9df; }.competition-place { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#eaf0f5; color:#002B5C; font-weight:bold; }.competition-avatar { display:block; width:46px; height:46px; border-radius:50%; object-fit:cover; border:1px solid #d3dce4; background:#f3f6f8; }.competition-avatar-placeholder { display:grid; place-items:center; font-size:21px; }.competition-player-summary { min-width:0; }.competition-player-summary strong, .competition-player-summary span { display:block; }.competition-player-summary strong { color:#002B5C; font-size:16px; line-height:1.25; }.competition-player-summary span { margin-top:3px; color:#657380; font-size:13px; line-height:1.35; }.competition-points { min-width:52px; display:grid; justify-items:end; text-align:right; color:#657380; }.competition-points strong { color:#002B5C; font-size:22px; line-height:1; }.competition-points span { font-size:12px; }.competition-points small { margin-top:3px; font-size:11px; white-space:nowrap; }

@media(max-width:700px){

    .intro-cards {
        grid-template-columns:1fr;
        gap:12px;
        margin:24px 0;
    }
    .intro-cards .news-card { padding:16px; }
    .intro-cards .news-card h2 { margin:0 0 8px; font-size:21px; }
    .intro-cards .news-card p { margin:8px 0; line-height:1.5; }
    .homepage-promo { margin-top:22px; }
    .homepage-promo .news-card { padding:18px; }
    .competition-team-grid, .competition-match-teams { grid-template-columns:1fr; }
    .competition-standing-row { grid-template-columns:29px 42px minmax(0, 1fr) auto; gap:8px; padding:9px; }.competition-place { width:28px; height:28px; }.competition-avatar { width:42px; height:42px; }.competition-player-summary strong { font-size:15px; }.competition-player-summary span { font-size:12px; }.competition-points { min-width:45px; }.competition-points strong { font-size:20px; }.competition-points small { display:block; font-size:10px; }

}