:root {
      --cm-red: #d0021b;
      --cm-blue: #02aeee;
      --cm-nav-bg: #02aeee;
      --cm-light: #f4f6f9;
      --cm-border: #dee2e6;
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: 'Source Sans 3', sans-serif;
    }

    body {
      font-family: var(--font-body);
      background: var(--cm-light);
      color: #222;
      font-size: 14px;
    }

    /* ── TOP BAR ── */
    .topbar {
      background: #fff;
      border-bottom: 1px solid var(--cm-border);
      font-size: 12px;
      padding: 4px 0;
      color: #666;
    }
    .topbar a { color: #666; text-decoration: none; }
    .topbar a:hover { color: var(--cm-red); }

    /* ── LOGO ── */
    .logo-bar {
      background: #fff;
      min-height: 120px;
      padding: 0;
      border-bottom: 3px solid var(--cm-red);
      display: flex;
      align-items: flex-end;
    }
    .logo-bar .logo-bar-inner {
      width: 100%;
      padding-bottom: 14px;
    }
    .logo-bar .logo-text {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 3rem;
      color: var(--cm-blue);
      line-height: 1;
    }
    .logo-bar .logo-sub {
      font-size: 12px;
      color: #888;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-top: 2px;
    }
    .logo-icon {
      width: 58px;
      height: 58px;
      margin-right: 14px;
    }
    .search-btn {
      background: var(--cm-red);
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 22px;
      font-size: 14px;
      font-weight: 600;
    }
    .search-btn:hover { background: #a80016; color: #fff; }

    /* ── LOGO AD SLOT ── */
    .logo-ad-slot {
      background: #e9ecef;
      border: 1px dashed #bbb;
      border-radius: 4px;
      width: 468px;
      height: 80px;
      color: #aaa;
      font-size: 11px;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    /* ── MAIN NAV ── */
    .main-nav {
      background: var(--cm-nav-bg);
      position: sticky;
      top: 0;
      z-index: 1030;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    .main-nav .nav-link {
      color: #fff !important;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 14px;
      text-transform: uppercase;
      letter-spacing: .4px;
    }
    .main-nav .nav-link:hover,
    .main-nav .nav-link.active { background: var(--cm-red); }
    .main-nav .dropdown-menu {
      border-radius: 0;
      border: none;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
      font-size: 13px;
    }
    .nav-weather {
      color: #ffffff;
      font-size: 12px;
      padding: 0 4px;
      white-space: nowrap;
    }
    .nav-weather i { color: #ffffff; }

    /* ── TOPIC PILLS ── */
    .topic-bar {
      background: #fff;
      border-bottom: 1px solid var(--cm-border);
      padding: 6px 0;
    }
    .topic-bar a {
      font-size: 14px;
      color: var(--cm-blue);
      text-decoration: none;
      padding: 3px 10px;
      border-radius: 20px;
      border: 1px solid #c5d3e8;
      margin: 2px 3px;
      display: inline-block;
      transition: all .15s;
    }
    .topic-bar a:hover { background: var(--cm-blue); color: #fff; border-color: var(--cm-blue); }
    .topic-bar .badge-tv { background: var(--cm-red); color: #fff; border: none; }
    .topic-bar .badge-radio { background: #555; color: #fff; border: none; }
    .topic-bar .weather { font-size: 12px; color: #444; }
    .topic-search {
      width: 160px;
      font-size: 12px;
      height: 28px;
      padding: 2px 8px;
    }
    .topic-bar .search-btn {
      padding: 4px 14px;
      font-size: 12px;
    }

        /* ── ARTICLE ── */
    .article-wrap {
      background: #fff;
      border: 1px solid var(--cm-border);
      border-radius: 6px;
      padding: 28px 32px 36px;
    }

    .article-byline {
      font-size: 12px;
      color: #888;
      margin-bottom: 10px;
      line-height: 1.6;
    }
    .article-byline a { color: var(--cm-blue); text-decoration: none; font-weight: 600; }
    .article-byline a:hover { color: var(--cm-red); }

    .article-share {
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px; height: 30px;
      border-radius: 4px;
      color: #fff;
      font-size: 13px;
      text-decoration: none;
      transition: opacity .15s;
    }
    .share-btn:hover { opacity: .82; color: #fff; }
    .share-fb   { background: #1877f2; }
    .share-x    { background: #000; }
    .share-mail { background: #6c757d; }
    .share-wa   { background: #25d366; }
    .share-more { background: #adb5bd; }
    .share-li   { background: #0a66c2; }
    .share-copy { background: #e9ecef; color: #555 !important; border: 1px solid #ddd; }

    .article-title {
      font-family: var(--font-display);
      font-weight: 900;
      font-size: 1.9rem;
      color: #111;
      line-height: 1.25;
      margin-bottom: 16px;
    }

    .article-image {
      width: 100%;
      border-radius: 4px;
      display: block;
      margin-bottom: 20px;
    }

    .article-body p {
      font-size: 18px;
      line-height: 1.75;
      color: #333;
      margin-bottom: 1rem;
    }
    .article-body p.lead-bold {
      font-weight: 700;
      color: #111;
    }
    .article-divider {
      border: none;
      border-top: 2px solid var(--cm-border);
      margin: 24px 0;
    }


    /* ── LAYOUT ── */
    .main-wrap { background: var(--cm-light); padding: 18px 0 40px; }
    .sidebar { position: relative; }

    /* ── HERO ── */
    .hero-card {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      background: #000;
      margin-bottom: 16px;
      aspect-ratio: 16 / 9;
    }
    .hero-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: .85;
      display: block;
    }
    .hero-caption {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,.82));
      color: #fff;
      padding: 28px 14px 14px;
      font-family: var(--font-display);
      font-size: 1.30rem;
      font-weight: 700;
      line-height: 1.3;
    }

    /* ── NEWS CARDS ── */
    .news-card {
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid var(--cm-border);
      height: 100%;
      transition: box-shadow .2s;
    }
    .news-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.10); }
    .news-card img { width: 100%; height: 130px; object-fit: cover; }
    .news-card .card-body { padding: 10px 12px 12px; }
    .news-card .card-meta {
      font-size: 10px;
      color: #999;
      margin-bottom: 4px;
    }
    .news-card .card-title {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.3;
      color: #111;
      margin-bottom: 6px;
      height: 3.9em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .news-card .card-title a { color: inherit; text-decoration: none; }
    .news-card .card-title a:hover { color: var(--cm-red); }
    .news-card a { color: inherit; text-decoration: none; }
    .news-card a:hover { color: var(--cm-red); }    
    .news-card .card-text {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
    }
    .section-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--cm-red);
      margin-bottom: 2px;
    }

    /* ── SIDEBAR WIDGETS ── */
    .widget {
      background: #fff;
      border: 1px solid var(--cm-border);
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 16px;
    }
    .widget-header {
      background: var(--cm-blue);
      color: #fff;
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 700;
      padding: 8px 14px;
    }
    .widget-body { padding: 12px 14px; }


    /* related articles */
    .related-item {
      display: flex;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid #f0f0f0;
      text-decoration: none;
      color: inherit;
      transition: background .15s;
    }
    .related-item:last-child { border-bottom: none; }
    .related-item:hover { background: #f8f9fa; }
    .related-item img {
      width: 70px; height: 52px;
      object-fit: cover;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .related-item .ri-title {
      font-size: 12px;
      font-weight: 600;
      color: #111;
      line-height: 1.35;
      margin-bottom: 3px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .related-item .ri-meta { font-size: 10px; color: #999; }


    /* media player */
    .media-player {
      background: #fff;
      border: 1px solid var(--cm-border);
      border-radius: 6px;
      padding: 10px 12px;
      margin-bottom: 12px;
    }
    .player-controls { display: flex; align-items: center; gap: 8px; }
    .play-btn {
      background: var(--cm-red);
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px;
    }
    .volume-slider { flex: 1; accent-color: var(--cm-red); }
    .channel-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      font-weight: 600;
      color: var(--cm-blue);
    }
    .channel-row:last-child { border-bottom: none; }
    .channel-icon { color: var(--cm-red); font-size: 14px; }

    /* events */
    .event-item {
      display: flex;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    .event-item:last-child { border-bottom: none; }
    .event-date {
      background: var(--cm-blue);
      color: #fff;
      border-radius: 4px;
      text-align: center;
      min-width: 38px;
      padding: 4px 6px;
      font-size: 11px;
      line-height: 1.2;
    }
    .event-date .day { font-size: 16px; font-weight: 700; line-height: 1; }
    .event-info .title { font-size: 14px; font-weight: 600; color: #222; line-height: 1.3; margin-bottom: 2px; }
    .event-info .meta { font-size: 11px; color: #999; }
    .more-events {
      display: block;
      text-align: center;
      font-size: 12px;
      color: var(--cm-blue);
      padding: 8px;
      border-top: 1px solid var(--cm-border);
      text-decoration: none;
      font-weight: 600;
    }
    .more-events:hover { background: var(--cm-blue); color: #fff; }

    /* ── PAGINATION ── */
    .pagination .page-link {
      color: var(--cm-blue);
      border-color: var(--cm-border);
      font-size: 13px;
    }
    .pagination .page-item.active .page-link {
      background: var(--cm-red);
      border-color: var(--cm-red);
      color: #fff;
    }

    /* ── AD PLACEHOLDER ── */
    .ad-placeholder {
      background: #e9ecef;
      border: 1px dashed #bbb;
      border-radius: 4px;
      text-align: center;
      color: #aaa;
      font-size: 11px;
      padding: 10px;
      margin-bottom: 12px;
    }

    /* ── FOOTER ── */
    footer {
      background: var(--cm-blue);
      color: #c5d3e8;
      padding: 28px 0 14px;
      font-size: 13px;
    }
    footer h6 { color: #fff; font-weight: 700; margin-bottom: 10px; }
    footer a { color: #c5d3e8; text-decoration: none; }
    footer a:hover { color: #fff; }
    footer .footer-bottom { border-top: 1px solid #2a5090; margin-top: 20px; padding-top: 12px; font-size: 11px; color: #ffffff; }

    .logo {
      max-height: 80px;
      position: relative;
      top: 20px;
      margin-bottom: 20px;
    }

    .nieuws {

    width: 100% !important;

}



.articles a {

    color:var(--main-color);

    font-weight: bold;

    text-decoration: none;

}

.articles a:hover {

    text-decoration: underline;

}



#article_ad img {

    max-width: 100% !important;

}



.articles iframe {

    max-width: 100% !important;

}

    .events-container {
        /* max-width: 700px; */
        margin: 0 auto;
        background: #ffffff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .events-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 0px;
    }

    .event {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .event:last-child {
        border-bottom: none;
    }

    .event-date {
        width: 70px;
        text-align: center;
        margin-right: 20px;
        flex-shrink: 0;
    }

    .event-date .month {
        font-size: 12px;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: 1px;
    }

    .event-date .day {
        font-size: 20px;
        font-weight: bold;
        color: #000;
        margin-top: 4px;
    }

    .event-details {
        flex-grow: 1!important;
        padding-left: 20px!important;
    }

    .event-time {
        font-size: 12px;
        color: #666;
        margin-bottom: 6px;
    }

    .event-title {
        font-size: 18px;
        font-weight: 600;
        color: #111;
    }

    /* Hover effect */
    .event:hover {
        background-color: #fafafa;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .event-content {
        font-size: 16px;
        color: #555;
        margin-top: 6px;
        line-height: 1.4;
    }

    .event-image {
        width: 140px;
        height: 90px;
        flex-shrink: 0!important;
        border-radius: 6px!important;
        overflow: hidden!important;
    }

    .event-image img {
        width: 100%;
        height: 100%;
        object-fit: cover!important;
        display: block!important;
    }

    /* Responsive */
    @media (max-width: 500px) {
        .event {
            flex-direction: column;
            align-items: flex-start;
        }

        .event-date {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 10px;
        }

        .event-date .day {
            font-size: 22px;
        }
    }

    .event-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.img-responsive {
    max-width:100%;
    height:auto;
    display:block;
}