/* ── Kijk Live Mee ─────────────────────────────────────────────── */
:root {
    --blauw:      #1c6ea4;
    --blauw-donker:#12507a;
    --donker:     #1a2430;
    --tekst:      #2b3540;
    --grijs:      #6b7785;
    --licht:      #f4f7fa;
    --lijn:       #e2e8ee;
    --wit:        #ffffff;
    --radius:     12px;
    --schaduw:    0 4px 20px rgba(20,40,60,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tekst);
    line-height: 1.6;
    background: var(--wit);
}
h1, h2, h3 { line-height: 1.25; color: var(--donker); }
a { color: var(--blauw); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lijn);
}
.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
}
.brand { display: flex; flex-direction: column; text-decoration: none; }
.brand strong { font-size: 20px; color: var(--donker); letter-spacing: .3px; }
.brand span { font-size: 12px; color: var(--grijs); }
.nav a {
    text-decoration: none; color: var(--donker); font-weight: 600;
    margin-left: 22px; font-size: 15px;
}
.nav a.btn { color: #fff; }

/* Knoppen */
.btn {
    display: inline-block; background: var(--blauw); color: #fff;
    border: none; padding: 12px 22px; border-radius: 999px;
    font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none;
    transition: background .15s ease;
}
.btn:hover { background: var(--blauw-donker); }
.btn-block { width: 100%; }

/* Hero */
.hero {
    background: linear-gradient(150deg, var(--donker), #21455f 60%, var(--blauw));
    color: #fff; padding: 72px 0;
}
.hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; font-size: 40px; margin: 0 0 16px; }
.hero p { color: #dbe6ef; font-size: 18px; margin: 0; }
.hero p strong { color: #fff; }

/* Code-kaart */
.code-card {
    background: #fff; color: var(--tekst); border-radius: var(--radius);
    padding: 30px; box-shadow: var(--schaduw);
}
.code-card h2 { margin: 0 0 6px; font-size: 22px; }
.code-card p { margin: 0 0 18px; color: var(--grijs); font-size: 14px; }
.code-card label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.code-input {
    width: 100%; padding: 14px 16px; font-size: 20px; letter-spacing: 3px;
    text-align: center; text-transform: uppercase; font-weight: 700;
    border: 2px solid var(--lijn); border-radius: 10px; margin-bottom: 14px;
}
.code-input:focus { outline: none; border-color: var(--blauw); }
.foutmelding {
    background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0;
    padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 14px;
}

/* Diensten */
.section { padding: 64px 0; }
.section.alt { background: var(--licht); }
.section h2.kop { text-align: center; font-size: 30px; margin: 0 0 8px; }
.section .sub { text-align: center; color: var(--grijs); margin: 0 0 40px; }
.diensten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.dienst {
    background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 26px; box-shadow: var(--schaduw);
}
.dienst .ico {
    width: 46px; height: 46px; border-radius: 10px; background: #e8f1f8;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    font-size: 22px;
}
.dienst h3 { margin: 0 0 8px; font-size: 19px; }
.dienst p { margin: 0; color: var(--grijs); font-size: 15px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.contact-grid .kaart {
    background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius);
    padding: 26px; box-shadow: var(--schaduw);
}
.contact-grid .kaart .ico { font-size: 26px; margin-bottom: 8px; }
.contact-grid .kaart strong { display: block; margin-bottom: 4px; }
.contact-grid .kaart a { color: var(--blauw); text-decoration: none; }

/* Footer */
.site-footer { background: var(--donker); color: #b8c4d0; padding: 28px 0; text-align: center; font-size: 14px; }
.site-footer a { color: #dbe6ef; }

/* Stream-pagina */
.stream-wrap { max-width: 960px; margin: 0 auto; padding: 40px 24px; }
.stream-wrap h1 { text-align: center; font-size: 30px; margin: 0 0 24px; }
.video-frame { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw); background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.countdown {
    display: flex; justify-content: center; gap: 16px; margin: 28px 0;
}
.countdown .cel {
    background: var(--donker); color: #fff; border-radius: 12px;
    padding: 16px 10px; min-width: 84px; text-align: center;
}
.countdown .cel .getal { font-size: 38px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown .cel .label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #a9b7c5; margin-top: 6px; }
.countdown-titel { text-align: center; color: var(--grijs); margin: 0 0 6px; font-weight: 600; }
.live-nu {
    text-align: center; font-size: 20px; font-weight: 800; color: #fff;
    background: #d33; display: inline-block; padding: 8px 22px; border-radius: 999px;
}
.center { text-align: center; }
.back-link { display: inline-block; margin-top: 24px; color: var(--grijs); text-decoration: none; font-size: 14px; }
.credit { display: block; margin-top: 30px; color: var(--grijs); font-size: 14px; }
.credit a { color: var(--blauw); font-weight: 600; }
.stream-page .credit { color: #8b96a5; }
.stream-page .credit a { color: var(--accent2); }

/* Dashboard / login */
.admin-body { background: var(--licht); min-height: 100vh; }
.admin-wrap { max-width: 960px; margin: 0 auto; padding: 40px 24px; }
.login-box {
    max-width: 380px; margin: 80px auto; background: #fff; padding: 34px;
    border-radius: var(--radius); box-shadow: var(--schaduw);
}
.login-box h1 { font-size: 22px; margin: 0 0 20px; text-align: center; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 11px 13px; border: 1px solid var(--lijn); border-radius: 8px; font-size: 15px; font-family: inherit; background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blauw); }
.field .hint { font-size: 12px; color: var(--grijs); margin-top: 4px; }

.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.admin-top h1 { margin: 0; font-size: 26px; }
.card { background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius); padding: 26px; box-shadow: var(--schaduw); margin-bottom: 24px; }
.card h2 { margin: 0 0 18px; font-size: 19px; }

table.pages { width: 100%; border-collapse: collapse; }
table.pages th, table.pages td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--lijn); font-size: 14px; vertical-align: middle; }
table.pages th { color: var(--grijs); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.code-pill { font-family: ui-monospace, Menlo, Consolas, monospace; background: #e8f1f8; color: var(--blauw-donker); padding: 4px 10px; border-radius: 6px; font-weight: 700; letter-spacing: 1px; }
.acties a { text-decoration: none; font-size: 13px; font-weight: 700; margin-right: 12px; }
.acties a.del { color: #b3261e; }
.btn-sec { background: #fff; color: var(--blauw); border: 2px solid var(--blauw); padding: 10px 18px; }
.btn-sec:hover { background: var(--licht); }
.melding { background: #e7f6ec; color: #1a7a3d; border: 1px solid #b7e2c4; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.muted { color: var(--grijs); }

/* ── Stream-pagina: donker thema (accent via --accent/--accent2/--glow) ── */
body.stream-page {
    --accent:  #c2b280;
    --accent2: #e2d5ad;
    --glow:    rgba(194,178,128,.16);
    background:
        radial-gradient(1100px 560px at 50% -12%, var(--glow), transparent 68%),
        linear-gradient(180deg, #0d1014 0%, #14181f 55%, #0d1014 100%);
    color: #e7ebf1;
    min-height: 100vh;
}
.stream-page .site-header {
    background: rgba(13,16,20,.72);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
}
.stream-page .brand strong { color: #f2f5f9; }
.stream-page .brand span   { color: #97a2b0; }
.stream-page .nav a        { color: #cdd5df; }
.stream-page .nav a:hover  { color: var(--accent2); }

.stream-page .stream-wrap h1 { color: #f4f6fa; letter-spacing: .3px; }
.stream-page .stream-wrap h1::after {
    content: ""; display: block; width: 64px; height: 3px; margin: 16px auto 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 3px;
}

.stream-page .countdown-titel {
    color: #9aa5b3; text-transform: uppercase; letter-spacing: 2px; font-size: 13px;
}
.stream-page .countdown .cel {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.stream-page .countdown .cel .getal { color: var(--accent2); text-shadow: 0 0 18px var(--glow); }
.stream-page .countdown .cel .label { color: #8b96a5; }

.stream-page .video-frame {
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1px var(--glow);
}
.stream-page .live-nu   { background: #c0392b; box-shadow: 0 0 22px rgba(192,57,43,.5); }
.stream-page .back-link { color: #8b96a5; }
.stream-page .back-link:hover { color: var(--accent2); }
.stream-page .muted     { color: #8b96a5; }

/* ── Homepage: donker thema ─────────────────────────────────────── */
body.home { background: #0d1014; color: #dfe4ea; }

.home .site-header {
    background: rgba(13,16,20,.85);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.home .brand strong { color: #f2f5f9; }
.home .brand span   { color: #97a2b0; }
.home .nav a        { color: #dfe4ea; }
.home .nav a:hover  { color: #fff; }

.home .code-card {
    background: #171c24;
    color: #dfe4ea;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 22px 55px rgba(0,0,0,.5);
}
.home .code-card h2 { color: #f4f6fa; }
.home .code-card p  { color: #9aa5b3; }
.home .code-card label { color: #dfe4ea; }
.home .code-input {
    background: #0f1319; color: #f2f5f9; border-color: rgba(255,255,255,.14);
}
.home .code-input:focus { border-color: var(--blauw); }
.home .code-input::placeholder { color: #4a5563; }

.home .section     { background: #0d1014; }
.home .section.alt { background: #0f141b; }
.home .section h2.kop { color: #f4f6fa; }
.home .section .sub   { color: #9aa5b3; }

.home .dienst {
    background: #161b22;
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.home .dienst .ico { background: rgba(55,138,221,.15); }
.home .dienst h3 { color: #f2f5f9; }
.home .dienst p  { color: #9aa5b3; }

.home .contact-grid .kaart {
    background: #161b22;
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.home .contact-grid .kaart strong { color: #f2f5f9; }
.home .contact-grid .kaart .muted { color: #9aa5b3; }

/* Responsive */
@media (max-width: 820px) {
    .hero .container { grid-template-columns: 1fr; }
    .hero { padding: 48px 0; }
    .hero h1 { font-size: 30px; }
    .diensten { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .row2 { grid-template-columns: 1fr; }
    .countdown .cel { min-width: 68px; padding: 12px 6px; }
    .countdown .cel .getal { font-size: 28px; }
}