{"id":111,"date":"2026-06-08T17:18:43","date_gmt":"2026-06-08T17:18:43","guid":{"rendered":"https:\/\/lafbek.com\/?page_id=111"},"modified":"2026-06-08T18:58:41","modified_gmt":"2026-06-08T18:58:41","slug":"overons-html","status":"publish","type":"page","link":"https:\/\/lafbek.com\/?page_id=111","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Over Ons | Lafbek Universe Karakters<\/title>\n    \n    <meta name=\"description\" content=\"Lees alles over het merk Lafbek en de achtergrondverhalen van onze karakters zoals Jacob van de Beilmer, De Supplier, Nummer 6 en meer.\">\n    <link rel=\"icon\" type=\"image\/jpeg\" href=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/lafbek-smiley-v2.jpeg\">\n\n    <style>\n        \/* --- STREAMING_CHUNK: Basis Reset & Variabelen --- *\/\n        * { box-sizing: border-box; margin: 0; padding: 0; }\n        \n        :root {\n            --bg-color: #000000;\n            --card-bg: #0d0d0e;\n            --border-color: rgba(255, 255, 255, 0.1);\n            --text-color: #ffffff;\n            --text-muted: #88888b;\n            --lime-green: #ece164;\n        }\n\n        body, html {\n            background-color: var(--bg-color);\n            font-family: 'Helvetica Neue', Arial, sans-serif;\n            color: var(--text-color);\n            line-height: 1.6;\n            overflow-x: hidden;\n            \/* Zorgt dat we soepel scrollen naar ankers *\/\n            scroll-behavior: smooth;\n        }\n\n        body.modal-open {\n            overflow: hidden !important;\n            \/* Voorkom verspringing bij het verbergen van de scrollbar *\/\n            padding-right: 15px; \n        }\n\n        \/* --- STREAMING_CHUNK: Achtergrond Video Layout --- *\/\n        .video-background-wrapper {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100vw;\n            height: 100vh;\n            z-index: -1;\n            pointer-events: none;\n        }\n\n        .video-background-wrapper video {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            opacity: 0.8;\n        }\n\n        .fixed-bg-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            \/* Donkerdere gradient in plaats van een effen kleur voor meer diepte en een rauwere vibe *\/\n            background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.9) 100%); \n            backdrop-filter: blur(4px); \/* Iets meer blur *\/\n        }\n\n        \/* --- STREAMING_CHUNK: Header & Menu --- *\/\n        .lafbek-header {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            z-index: 100;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 14px 40px;\n            background-color: rgba(0, 0, 0, 0.85);\n            backdrop-filter: blur(10px);\n            border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .menu-trigger-container {\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: transparent !important;\n            border: none !important;\n            outline: none !important;\n        }\n\n        .lafbek-header-icon {\n            width: 55px; height: 55px; object-fit: contain;\n            \/* De border kwam door background en border properties. Door deze transparant te maken en de clip-path toe te passen verdwijnt het. *\/\n            background: transparent !important;\n            border: none !important;\n            outline: none !important;\n            box-shadow: none !important;\n            clip-path: inset(5px);\n            filter: url(#lafbek-smiley-filter) brightness(1.3);\n            transition: all 0.4s ease;\n        }\n        \n        .menu-trigger-container:hover .lafbek-header-icon {\n            transform: scale(1.1) rotate(-5deg);\n            filter: url(#lafbek-smiley-filter) brightness(1.8) drop-shadow(0 0 10px var(--lime-green));\n        }\n\n        .cta-button {\n            background-color: transparent;\n            color: var(--text-color);\n            border: 2px solid #ffffff;\n            padding: 8px 20px;\n            font-size: 0.8rem;\n            font-weight: 800;\n            text-transform: uppercase;\n            letter-spacing: 1.5px;\n            text-decoration: none;\n            border-radius: 50px;\n            transition: all 0.3s;\n        }\n\n        .cta-button:hover {\n            background-color: #ffffff; color: #000000;\n            box-shadow: 0 0 20px rgba(255,255,255,0.3);\n        }\n\n        \/* --- STREAMING_CHUNK: Sidebar Menu Componenten --- *\/\n        .lafbek-sidebar-menu {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 340px;\n            height: 100%;\n            background-color: var(--lime-green);\n            z-index: 2000; \/* Hoogste z-index *\/\n            transform: translateX(-100%);\n            transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            justify-content: space-between;\n            box-shadow: 10px 0 50px rgba(0, 0, 0, 0.5);\n        }\n\n        .lafbek-sidebar-menu.active {\n            transform: translateX(0);\n        }\n\n        .menu-header-mobile {\n            display: flex;\n            align-items: center;\n            justify-content: flex-start;\n            padding-bottom: 20px;\n            margin-bottom: 20px;\n            border-bottom: 1.5px solid rgba(0, 0, 0, 0.1);\n        }\n\n        .menu-back-btn {\n            background: transparent;\n            border: 1.5px solid rgba(0,0,0,0.15);\n            color: #000000;\n            font-size: 1rem;\n            font-weight: 900;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            cursor: pointer;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            padding: 8px 16px;\n            border-radius: 30px;\n            transition: all 0.2s ease;\n        }\n\n        .menu-back-btn:hover {\n            background: rgba(0, 0, 0, 0.08);\n            transform: translateX(-3px);\n        }\n\n        .menu-links {\n            list-style: none;\n            display: flex;\n            flex-direction: column;\n            gap: 25px;\n        }\n\n        .menu-item-link {\n            font-size: 2rem;\n            font-weight: 900;\n            color: #000000;\n            text-transform: uppercase;\n            text-decoration: none;\n            letter-spacing: 1px;\n            display: inline-block;\n            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        }\n\n        .menu-item-link:hover {\n            transform: translateX(10px) scale(1.05);\n        }\n\n        .menu-footer {\n            border-top: 2px solid rgba(0, 0, 0, 0.1);\n            padding-top: 25px;\n        }\n\n        .menu-socials { display: flex; gap: 15px; list-style: none; }\n        \n        .social-link {\n            font-size: 0.95rem; font-weight: 800; color: #000000;\n            text-transform: uppercase; text-decoration: none;\n            border: 1.5px solid #000000; padding: 8px 16px;\n            border-radius: 30px; transition: all 0.3s ease;\n        }\n\n        .social-link:hover { background-color: #000000; color: var(--lime-green); }\n\n        .sidebar-overlay {\n            position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n            background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);\n            z-index: 1999; opacity: 0; pointer-events: none;\n            transition: opacity 0.4s ease;\n        }\n\n        .sidebar-overlay.active { opacity: 1; pointer-events: auto; }\n\n        \/* --- STREAMING_CHUNK: Pagina Layout & Intro --- *\/\n        .page-container {\n            position: relative;\n            z-index: 10;\n            max-width: 1400px;\n            margin: 120px auto 60px auto;\n            padding: 0 40px;\n        }\n\n        .seo-intro-section {\n            text-align: center;\n            margin-bottom: 80px;\n            padding: 60px 40px;\n            background: rgba(13, 13, 14, 0.85); \/* Licht transparant om video erdoor te laten *\/\n            border: 1px solid var(--border-color);\n            border-radius: 24px;\n            backdrop-filter: blur(10px);\n            box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n        }\n\n        .seo-intro-section h1 {\n            color: var(--lime-green);\n            font-size: 2.8rem;\n            font-weight: 900;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            margin-bottom: 24px;\n        }\n\n        .seo-intro-section p {\n            color: #d1d1d6;\n            font-size: 1.15rem;\n            margin-bottom: 20px;\n            max-width: 900px;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        \/* --- STREAMING_CHUNK: Karakter Grid (Originele Look) --- *\/\n        .gallery-header {\n            margin-bottom: 40px;\n            border-left: 4px solid var(--lime-green);\n            padding-left: 20px;\n            width: 100%;\n        }\n\n        .gallery-header h2 {\n            font-size: 2.2rem;\n            font-weight: 900;\n            letter-spacing: 2px;\n            text-transform: uppercase;\n        }\n\n        .characters-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 24px;\n            width: 100%;\n        }\n\n        .character-card {\n            position: relative;\n            border-radius: 16px;\n            overflow: hidden;\n            aspect-ratio: 3 \/ 4;\n            background-color: var(--card-bg);\n            border: 1px solid var(--border-color);\n            cursor: pointer;\n            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n            box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n        }\n\n        .character-card:hover {\n            transform: translateY(-8px);\n            border-color: var(--lime-green);\n            box-shadow: 0 12px 30px rgba(236, 225, 100, 0.2);\n        }\n\n        .card-image-bg {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;\n            filter: grayscale(40%) contrast(1.1); \n            position: absolute;\n            top: 0;\n            left: 0;\n            z-index: 1;\n        }\n\n        .character-card:hover .card-image-bg {\n            transform: scale(1.05);\n            filter: grayscale(0%) contrast(1.1); \n        }\n\n        .card-overlay {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            padding: 24px;\n            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 100%);\n            z-index: 2;\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n\n        .card-role {\n            font-size: 0.75rem;\n            font-weight: 800;\n            color: var(--lime-green);\n            text-transform: uppercase;\n            letter-spacing: 1.5px;\n        }\n\n        .card-name {\n            font-size: 1.2rem;\n            font-weight: 900;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            color: #fff;\n        }\n\n        \/* SEO Hidden Content - Verbergt de ruwe text in de kaart, we tonen dit in de modal! *\/\n        .seo-hidden-content {\n            display: none; \n        }\n\n        \/* --- STREAMING_CHUNK: Interactieve Karakter Pop-up (Modal) --- *\/\n        .character-modal {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 1000;\n            display: none;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n        }\n\n        .character-modal.active {\n            display: flex;\n        }\n\n        .char-modal-backdrop {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.85);\n            backdrop-filter: blur(8px);\n        }\n\n        .char-modal-content {\n            position: relative;\n            background-color: #0d0d0e;\n            border: 1.5px solid var(--border-color);\n            border-radius: 24px;\n            width: 100%;\n            max-width: 900px;\n            z-index: 1010;\n            overflow: hidden;\n            animation: modalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n            display: flex;\n            flex-direction: column;\n            \/* Zorg dat de modal een vaste hoogte heeft op desktop zodat erin gescrolld kan worden *\/\n            max-height: 85vh; \n        }\n\n        @keyframes modalFadeIn {\n            from { opacity: 0; transform: scale(0.95) translateY(10px); }\n            to { opacity: 1; transform: scale(1) translateY(0); }\n        }\n\n        .char-modal-close-btn {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            background: rgba(255, 255, 255, 0.05);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            color: #fff;\n            width: 44px; height: 44px;\n            border-radius: 50%;\n            font-size: 1.5rem;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 1020;\n            transition: all 0.3s;\n        }\n\n        .char-modal-close-btn:hover {\n            background: rgba(255, 255, 255, 0.15);\n            color: var(--lime-green);\n            transform: rotate(90deg);\n        }\n\n        .char-modal-grid {\n            display: grid;\n            grid-template-columns: 350px 1fr;\n            flex-grow: 1;\n            \/* Zorg dat de inhoud scrollbaar is als het niet past *\/\n            overflow: hidden; \n        }\n\n        .char-modal-image-col {\n            background: radial-gradient(circle at center, #141416 0%, #050505 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-right: 1px solid var(--border-color);\n            position: relative;\n        }\n\n        .char-modal-image-col img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            position: absolute;\n        }\n\n        .char-modal-info-col {\n            padding: 40px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            \/* Nu kan je hier soepel scrollen als de tekst erg lang is! *\/\n            overflow-y: auto; \n        }\n\n        \/* Aangepaste scrollbar voor de tekstkolom *\/\n        .char-modal-info-col::-webkit-scrollbar {\n            width: 8px;\n        }\n        .char-modal-info-col::-webkit-scrollbar-track {\n            background: rgba(255, 255, 255, 0.02);\n            border-radius: 10px;\n        }\n        .char-modal-info-col::-webkit-scrollbar-thumb {\n            background: rgba(255, 255, 255, 0.1);\n            border-radius: 10px;\n        }\n        .char-modal-info-col::-webkit-scrollbar-thumb:hover {\n            background: var(--lime-green);\n        }\n\n        .char-modal-title {\n            font-size: 2.2rem;\n            font-weight: 900;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            color: #ffffff;\n            line-height: 1.1;\n        }\n\n        .char-modal-subtitle {\n            font-size: 0.85rem;\n            font-weight: 800;\n            text-transform: uppercase;\n            letter-spacing: 1.5px;\n            color: var(--lime-green);\n            display: block;\n            border-bottom: 1.5px solid rgba(255, 255, 255, 0.05);\n            padding-bottom: 16px;\n            margin-bottom: 8px;\n        }\n\n        \/* --- STREAMING_CHUNK: Spannende Typografie voor in de Modals --- *\/\n        .char-modal-text-content {\n            font-size: 1rem;\n            color: var(--text-muted);\n            line-height: 1.8;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n        }\n\n        \/* Dynamische subheaders binnen de biografie\u00ebn *\/\n        .bio-subheader {\n            color: #ffffff;\n            font-size: 1.15rem;\n            font-weight: 900;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            margin-top: 10px;\n            border-left: 3px solid var(--lime-green);\n            padding-left: 12px;\n        }\n\n        \/* Spanning-opbouwende status blokken (bv. bij Nummer 6 of Jacob) *\/\n        .status-block {\n            background: rgba(236, 225, 100, 0.05);\n            border: 1px dashed var(--lime-green);\n            padding: 16px;\n            border-radius: 8px;\n            color: #fff;\n            font-style: italic;\n            font-size: 0.95rem;\n            margin-top: 10px;\n        }\n\n        \/* Highlight text binnen paragrafen *\/\n        .highlight-text {\n            color: var(--lime-green);\n            font-weight: 800;\n        }\n\n        \/* Interactieve Links in de tekst *\/\n        .internal-link {\n            color: var(--lime-green);\n            font-weight: 800;\n            text-decoration: underline;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .internal-link:hover {\n            color: #ffffff;\n            text-shadow: 0 0 10px var(--lime-green);\n        }\n\n        \/* --- STREAMING_CHUNK: Footer --- *\/\n        .lafbek-seo-footer {\n            background-color: #000000;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n            padding: 60px 40px 40px 40px;\n            color: var(--text-muted);\n            position: relative;\n            z-index: 10;\n        }\n\n        .footer-grid {\n            max-width: 1400px; margin: 0 auto;\n            display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;\n        }\n\n        .footer-col h4 {\n            color: #ffffff; font-size: 1.1rem; font-weight: 800;\n            text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;\n        }\n\n        .footer-col p, .footer-col a {\n            font-size: 0.9rem; line-height: 1.6; color: var(--text-muted);\n            text-decoration: none; display: block; margin-bottom: 10px;\n        }\n\n        .footer-col a:hover { color: var(--lime-green); }\n\n        .footer-bottom {\n            max-width: 1400px; margin: 40px auto 0 auto; padding-top: 30px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n            display: flex; justify-content: space-between; font-size: 0.85rem;\n        }\n\n        \/* --- STREAMING_CHUNK: Responsiveness (100% Mobile Proof) --- *\/\n        @media (max-width: 1200px) {\n            .characters-grid { grid-template-columns: repeat(3, 1fr); }\n        }\n\n        @media (max-width: 992px) {\n            .lafbek-sidebar-menu {\n                width: 290px !important; \n                padding-top: 30px !important;\n                text-align: left !important;\n            }\n            .characters-grid { grid-template-columns: repeat(2, 1fr); }\n            .char-modal-grid { grid-template-columns: 1fr; }\n            .char-modal-image-col { border-right: none; border-bottom: 1px solid var(--border-color); aspect-ratio: 16\/9; }\n            .char-modal-image-col img { position: relative; }\n        }\n\n        @media (max-width: 768px) {\n            .page-container { padding: 0 20px; margin-top: 100px; }\n            .seo-intro-section { padding: 40px 20px; }\n            .seo-intro-section h1 { font-size: 2rem; }\n            .gallery-header h2 { font-size: 1.8rem; }\n            .lafbek-header { padding: 12px 20px; }\n            .characters-grid { grid-template-columns: 1fr; } \/* 1 kolom op telefoon *\/\n            \n            \/* Modal aanpassen voor mobile: bottom sheet stijl *\/\n            .char-modal-content {\n                width: 100% !important; max-width: 100% !important;\n                max-height: 92vh !important;\n                border-radius: 24px 24px 0 0 !important;\n                position: fixed !important; bottom: 0 !important; top: auto !important;\n                border: none !important;\n                animation: bottomSheetSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;\n            }\n            @keyframes bottomSheetSlide {\n                from { transform: translateY(100%); }\n                to { transform: translateY(0); }\n            }\n            .char-modal-info-col { padding: 24px 20px 40px 20px !important; }\n            .char-modal-title { font-size: 1.6rem; }\n            .footer-grid { grid-template-columns: 1fr; }\n            .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }\n        }\n    <\/style>\n\n    <!-- Filter voor het Logo -->\n    <svg width=\"0\" height=\"0\" style=\"position: absolute; display: none;\">\n        <defs>\n            <filter id=\"lafbek-smiley-filter\">\n                <feColorMatrix type=\"matrix\" values=\"-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  -1 -1 -1 0 3\"><\/feColorMatrix>\n            <\/filter>\n        <\/defs>\n    <\/svg>\n\n\n\n    <!-- --- STREAMING_CHUNK: Vaste Achtergrond Video --- -->\n    <div class=\"video-background-wrapper\">\n        <video autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\">\n            <!-- Gebruik exact dezelfde video als de mainpage -->\n            <source src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/distorted-lafbek-v1.mp4\" type=\"video\/mp4\">\n        <\/video>\n        <div class=\"fixed-bg-overlay\"><\/div>\n    <\/div>\n\n    <!-- --- STREAMING_CHUNK: Navigatie & Menus --- -->\n    <header class=\"lafbek-header\">\n        <div class=\"menu-trigger-container\" id=\"menuTrigger\" title=\"Open Menu\">\n            <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/lafbek-smiley-v2.jpeg\" alt=\"Lafbek Menu\" class=\"lafbek-header-icon\">\n        <\/div>\n        <a href=\"https:\/\/lafbek.com\/#shopify-section\" class=\"cta-button\">Shop Nu<\/a>\n    <\/header>\n\n    <div class=\"sidebar-overlay\" id=\"sidebarOverlay\"><\/div>\n\n    <nav class=\"lafbek-sidebar-menu\" id=\"sidebarMenu\">\n        <div class=\"menu-header-mobile\">\n            <button class=\"menu-back-btn\" id=\"menuBackBtn\" title=\"Sluit Menu\">\n                <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <line x1=\"19\" y1=\"12\" x2=\"5\" y2=\"12\"><\/line>\n                    <polyline points=\"12 19 5 12 12 5\"><\/polyline>\n                <\/svg>\n                <span>Terug<\/span>\n            <\/button>\n        <\/div>\n        <ul class=\"menu-links\">\n            <li><a href=\"index.html#shopify-section\" class=\"menu-item-link\">Merch<\/a><\/li>\n            <li><a href=\"https:\/\/www.youtube.com\/@LAF-BEK\" target=\"_blank\" class=\"menu-item-link\">YouTube<\/a><\/li>\n            <li><a href=\"index.html#contact-block\" class=\"menu-item-link\">Contact<\/a><\/li>\n        <\/ul>\n        <div class=\"menu-footer\">\n            <ul class=\"menu-socials\">\n                <li><a href=\"https:\/\/www.tiktok.com\/@lafbek0\" target=\"_blank\" class=\"social-link\">Instagram<\/a><\/li>\n                <li><a href=\"https:\/\/www.tiktok.com\/@lafbek0\" target=\"_blank\" class=\"social-link\">TikTok<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/nav>\n\n    <!-- --- STREAMING_CHUNK: Hoofd Content --- -->\n    <main class=\"page-container\">\n        \n        <section class=\"seo-intro-section\">\n            <h1>Over het Merk Lafbek<\/h1>\n            <p>\n                Lafbek is niet zomaar een YouTube-kanaal, het is een lifestyle. Geboren op de straten en grootgebracht in de underground cultuur, brengen we de ultieme mix van hiphop, skateboarding en street vibes naar je scherm.\n            <\/p>\n            <p>\n                Onze exclusieve merchandise is ontworpen voor en door de community. Van hoogwaardige hoodies tot rolling trays; elk item draagt trots de kenmerkende Lafbek smiley. Stay raw, stay tuned, en word lid van de crew.\n            <\/p>\n        <\/section>\n\n        <div class=\"gallery-header\">\n            <h2>Lafbek Universe \ud83c\udfac<\/h2>\n        <\/div>\n\n        <!-- --- STREAMING_CHUNK: Het SEO & HTML Karakter Grid --- -->\n        <!-- Dit Grid fungeert als Data-bron voor de Modal. Elk article heeft hidden-content met de SEO tekst. -->\n        <section class=\"characters-grid\">\n\n            <!-- 1. Jacob van de Beilmer -->\n            <article class=\"character-card\" id=\"card-jacob\" onclick=\"openCharModal('card-jacob')\">\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/Schermafbeelding-2026-06-01-191817.png\" alt=\"Jacob van de Beilmer\" class=\"card-image-bg\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">Straatdealer \/ Rapper<\/span>\n                    <h2 class=\"card-name\">Jacob van de Beilmer<\/h2>\n                <\/div>\n                \n                <!-- Deze tekst wordt door Google gelezen en in de popup getoond -->\n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">Introductie<\/div>\n                    <p>Jacob van de Beilmer is te zien in: <span class=\"highlight-text\">Overspannen Dealer<\/span> en <span class=\"highlight-text\">Gangster Rapper<\/span>.<\/p>\n                    <p>Jacob is een straatdealer in Nederland. Hij verkoopt eigenlijk alles wat je high kan maken. Jacob komt uit een normaal gezin en is het echte zwarte schaap van de familie. Hij is een loopjongen van een van de grootste suppliers van Nederland, namelijk <a class=\"internal-link\" onclick=\"openCharModal('card-supplier')\">De Supplier<\/a>. Maar hierdoor komt hij vaak in de problemen, omdat Jacob niet helemaal gemaakt is voor deze bizarre wereld.<\/p>\n                    \n                    <div class=\"bio-subheader\">De Straat-Reality<\/div>\n                    <p>Jacob is namelijk helemaal niet zo \u201cgangster\u201d als hij zichzelf voordoet en wordt regelmatig te kakken gezet door zijn \u201copps\u201d. Dit is allemaal te zien omdat <a class=\"internal-link\" onclick=\"openCharModal('card-docu')\">De Documentairemaker<\/a> in het eerste seizoen een documentaire maakt over zijn leven.<\/p>\n                    \n                    <div class=\"bio-subheader\">Meme naar de Top<\/div>\n                    <p>In het tweede seizoen heeft Jacob met de roem en fame van de documentaire een rapcarri\u00e8re kunnen opzetten. Hij zit bij een groot recordlabel genaamd Qlewies Records. De eigenaar van het label is dan ook de welbekende <a class=\"internal-link\" onclick=\"openCharModal('card-quantavius')\">Papandreo Quantavius<\/a>. Helaas wordt hij gezien door zijn management en mede-artiesten als een flop die alleen populair is geworden als meme.<\/p>\n                    <p>Jacob heeft samen met zijn rechterhand Lil Doekie de Ziggo Dome uitverkocht, maar helaas is hij zelf nooit komen opdagen en is hij dezelfde nacht volgens de politie spoorloos verdwenen.<\/p>\n\n                    <div class=\"status-block\">\n                        Huidige Status: Wat Jacob nu aan het doen is, is echter onbekend bij Team-Lafbek. Hij heeft meermaals contact gezocht, maar wij hebben dit tot dusver afgewezen.\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <!-- 2. Neek-O -->\n            <article class=\"character-card\" id=\"card-neeko\" onclick=\"openCharModal('card-neeko')\">\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/Schermafbeelding-2026-06-01-194807.png\" alt=\"Neek-O\" class=\"card-image-bg\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">Oude Vriend<\/span>\n                    <h2 class=\"card-name\">Neek-O<\/h2>\n                <\/div>\n                \n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">Introductie<\/div>\n                    <p>Neek-O is te zien in: <span class=\"highlight-text\">Overspannen Dealer<\/span> en <span class=\"highlight-text\">Gangster Rapper<\/span>.<\/p>\n                    <p>Neek-O is de vroegere beste vriend van <a class=\"internal-link\" onclick=\"openCharModal('card-jacob')\">Jacob van de Beilmer<\/a>. Hij kende Jacob nog toen hij helemaal niet \u201cgangster\u201d was, en ergert zich kapot aan zijn nieuwe persona. Neek-O is zelf hard bezig om niet in het straatleven te belanden: Hij focust zich op muziek.<\/p>\n                    \n                    <div class=\"bio-subheader\">Verraad &amp; Schulden<\/div>\n                    <p>Jacob heeft veel verpest bij Neek-O. Hij is disrespectful, neemt Neek-O niet serieus en staat nog steeds <strong>3000 euro<\/strong> in de schulden bij hem.<\/p>\n                    \n                    <div class=\"bio-subheader\">De Escalatie<\/div>\n                    <p>Tussen seizoen 1 en seizoen 2 hebben Neek-O en Jacob elkaar niet gesproken. In de tussentijd is Neek-O toch meer in het straatleven beland door zijn coca\u00efneverslaving. Wanneer Jacob in seizoen 2 weer op bezoek kwam, was Neek-O erg boos en eist hij direct zijn geld terug. Wanneer dit niet gebeurt, laat Neek-O zien hoe erg hij veranderd is: Hij belt zijn vrienden op en slaat Jacob in elkaar.<\/p>\n\n                    <div class=\"status-block\">\n                        Huidige Status: Hoe het nu met Neek-O gaat? Dit is niet helemaal bekend. Wel weten we dat hij uit zijn huis is gezet, omdat hij zijn huur al twee maanden niet betaald had. Volgens de huisbaas is er geklaagd over de geur van illegale middelen.\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <!-- 3. De Supplier -->\n            <article class=\"character-card\" id=\"card-supplier\" onclick=\"openCharModal('card-supplier')\">\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/Schermafbeelding-2026-06-01-195046.png\" alt=\"De Supplier\" class=\"card-image-bg\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">Maffia Baas<\/span>\n                    <h2 class=\"card-name\">De Supplier<\/h2>\n                <\/div>\n                \n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">Introductie<\/div>\n                    <p>De Supplier is te zien in: <span class=\"highlight-text\">Overspannen Dealer<\/span> en <span class=\"highlight-text\">Gangster Rapper<\/span>.<\/p>\n                    <p>De Supplier is een van de grootste gangsters van Nederland. Hij is een van de grootste spelers in het verkopen van soft- en harddrugs, en is lid van de beruchte Loosdrechtse Mafia. Hij heeft verschillende mensen onder zich werken, waaronder <a class=\"internal-link\" onclick=\"openCharModal('card-jacob')\">Jacob van de Beilmer<\/a>.<\/p>\n                    \n                    <div class=\"bio-subheader\">De Loopjongen<\/div>\n                    <p>Jacob is in Overspannen Dealer de loopjongen van de Supplier. De Supplier heeft hem al langer in dienst, maar Jacob zorgt voor veel problemen. Zo heeft hij geld in zijn eigen zak gestoken, te weinig drugs verkocht en te veel zelf gebruikt, heeft hij klanten zich onveilig laten voelen en houdt hij zich vaker niet aan afspraken.<\/p>\n                    \n                    <div class=\"bio-subheader\">Vergelding<\/div>\n                    <p>De Supplier en zijn rechterhand, <a class=\"internal-link\" onclick=\"openCharModal('card-nummer6')\">Nummer 6<\/a>, hebben samen Jacob bestolen, vernederd en in elkaar geslagen. In Gangster Rapper komen ze erachter dat Jacob een disstrack over hen heeft gemaakt en daarmee de Ziggo Dome heeft uitverkocht.<\/p>\n                    <p>Tot hun verbazing liep Jacob echter v\u00f3\u00f3r de show al terug naar zijn auto, waardoor ze hem daar al te grazen namen.<\/p>\n\n                    <div class=\"status-block\">\n                        Huidige Status: Volgens betrouwbare bronnen is de Supplier nog steeds actief in het illegale circuit, en groeit hij harder dan ooit. Hij wordt gezocht door meerdere instanties, onder wie de AIVD en de FBI.\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <!-- 4. Nummer 6 -->\n            <article class=\"character-card\" id=\"card-nummer6\" onclick=\"openCharModal('card-nummer6')\">\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-02-at-00.21.55.jpeg\" alt=\"Nummer 6\" class=\"card-image-bg\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">Gangster \/ Rechterhand<\/span>\n                    <h2 class=\"card-name\">Nummer 6<\/h2>\n                <\/div>\n                \n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">De Meedogenloze Handlanger<\/div>\n                    <p>Nummer 6 is te zien in: <span class=\"highlight-text\">Overspannen Dealer<\/span> en <span class=\"highlight-text\">Gangster Rapper<\/span>.<\/p>\n                    <p>Nummer 6 is een van de gevaarlijkste gangsters in Nederland en wordt gezien als een van de meest chaotische leiders in de onderwereld. Hij kent geen genade en wordt vaak ingehuurd als huurmoordenaar of bodyguard in het illegale circuit. In zijn jonge jaren werkte hij veel samen met de beruchte Ezra Dequero, een lid van de maffiafamilie Dequero. Helaas is Ezra omgekomen tijdens een klus samen met 6.<\/p>\n                    \n                    <div class=\"bio-subheader\">Loyaliteit aan de Supplier<\/div>\n                    <p><a class=\"internal-link\" onclick=\"openCharModal('card-supplier')\">De Supplier<\/a> is zijn beste klant en hij wordt vaak gezien als zijn rechterhand. In Overspannen Dealer heeft hij samen met de Supplier Jacob bestolen, vernederd en in elkaar geslagen. Ook heeft de Supplier vaker mensen op Jacob afgestuurd om hem bang te maken.<\/p>\n                    \n                    <div class=\"status-block\">\n                        Huidige Status: 6 bevindt zich nu in het Pieter Baan Centrum voor het rijden onder invloed, witwassen, valsheid in geschrifte, meerdere mishandelingen en het taseren van een bejaarde man. Daarnaast is hij veroordeeld voor: Medeplichtigheid aan meer dan 300 overvallen, chantage, 29 moorden en verdenking van medeplichtigheid aan meer dan 500 dodelijke delicten.\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <!-- 5. De gebroeders Quantavius -->\n            <article class=\"character-card\" id=\"card-quantavius\" onclick=\"openCharModal('card-quantavius')\">\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/Schermafbeelding-2026-06-02-001035.png\" alt=\"De gebroeders Quantavius\" class=\"card-image-bg\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">CEO en Manager<\/span>\n                    <h2 class=\"card-name\">Gebroeders Quantavius<\/h2>\n                <\/div>\n                \n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">Introductie<\/div>\n                    <p>De gebroeders Quantavius zijn te zien in: <span class=\"highlight-text\">#LAF<\/span> en <span class=\"highlight-text\">Gangster Rapper<\/span>.<\/p>\n                    <p>Jamairo en Papandreo Quantavius zijn bekend van hun beruchte cursus: de Hosselaarsschool. Hier leren ze jonge mannen hoe ze geld moeten verdienen, maar vooral hoe ze over vrouwen moeten denken. Ze kwamen in de spotlight toen het journalistieke programma #LAF een item over hen maakte, gepresenteerd door <a class=\"internal-link\" onclick=\"openCharModal('card-hivman')\">Tom Hivman<\/a>. Daarin werd onthuld dat er illegale stoffen in hun pre-workout zaten en dat ze mannelijke prostituees hadden ingehuurd in Dubai.<\/p>\n                    \n                    <div class=\"bio-subheader\">Jamairo Quantavius (Oudste)<\/div>\n                    <p>Jamairo is de oudste van de twee en is officieel bekend geworden door de MMA, waarin hij onverslagen was met een record van 32-0-0. Hij is acht jaar lang wereldkampioen geweest. Nu bezit hij verschillende bedrijven (FlyAnamalavius, QuanRoad) waardoor hij multimiljardair is geworden.<\/p>\n                    \n                    <div class=\"bio-subheader\">Papandreo Quantavius (Jongste)<\/div>\n                    <p>Papandreo is de jongste en runt nu een platenmaatschappij genaamd Qlewies Records. Zo heeft hij in Gangster Rapper ook <a class=\"internal-link\" onclick=\"openCharModal('card-jacob')\">Jacob van de Beilmer<\/a> aangenomen. Jacob is helaas nooit komen opdagen bij zijn grootste show, waardoor Papandreo veel geld is kwijtgeraakt en Jacob ontsloeg.<\/p>\n\n                    <div class=\"status-block\">\n                        Huidige Status: De broers zijn nog volop business aan het doen. Jamairo is vooral bezig met ondernemingen in een juridisch grijs gebied, terwijl Papandreo zich richt op de entertainmentindustrie.\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <!-- 6. Tom Hivman -->\n            <article class=\"character-card\" id=\"card-hivman\" onclick=\"openCharModal('card-hivman')\">\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/Schermafbeelding-2026-06-02-001221.png\" alt=\"Tom Hivman\" class=\"card-image-bg\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">Presentator<\/span>\n                    <h2 class=\"card-name\">Tom Hivman<\/h2>\n                <\/div>\n                \n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">Introductie<\/div>\n                    <p>Tom Hivman is te zien in: <span class=\"highlight-text\">#LAF<\/span>.<\/p>\n                    <p>Tom Hivman is de presentator van het bekende journalistieke programma #LAF. In dit programma trekt hij ten strijde tegen laffe mensen, om het op te nemen voor degenen die zijn opgelicht of onrechtvaardig zijn behandeld. Dit doet hij met een flinke dosis brutaliteit en humor, al is hij stiekem ook een beetje angstig voor de confrontatie.<\/p>\n                    \n                    <div class=\"bio-subheader\">De Confronterende Klap<\/div>\n                    <p>Toen hij in een aflevering van #LAF achter <a class=\"internal-link\" onclick=\"openCharModal('card-quantavius')\">de gebroeders Quantavius<\/a> aanging, ging dit voor hem helemaal mis: Hij werd vernederd, vreselijk te kakken gezet en hij kreeg een harde klap op zijn neus waardoor hij een bloedneus opliep.<\/p>\n                    \n                    <div class=\"bio-subheader\">De Onthullingen<\/div>\n                    <p>Uiteindelijk is hij door gedegen journalistiek onderzoek wel achter de waarheid gekomen en heeft hij hun illegale praktijken blootgelegd.<\/p>\n\n                    <div class=\"status-block\">\n                        Huidige Status: Tom Hivman is op dit moment nog steeds werkzaam voor het programma #LAF.\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <!-- 7. De Documentairemaker -->\n            <article class=\"character-card\" id=\"card-docu\" onclick=\"openCharModal('card-docu')\">\n                <!-- Geen foto beschikbaar, we tonen de placeholder layout -->\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/Lafbek-logo-wit.png\" alt=\"Placeholder Lafbek\" class=\"card-image-bg\" style=\"opacity: 0.1; object-fit: contain; transform: scale(0.6);\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">De Cameraman<\/span>\n                    <h2 class=\"card-name\">Documentairemaker<\/h2>\n                <\/div>\n                \n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">Achter de Schermen<\/div>\n                    <p>De Documentairemaker is te zien in: <span class=\"highlight-text\">Overspannen Dealer<\/span> en <span class=\"highlight-text\">Gangster Rapper<\/span>.<\/p>\n                    <p>Hij is degene die <a class=\"internal-link\" onclick=\"openCharModal('card-jacob')\">Jacob van de Beilmer<\/a> volgt en zijn bizarre leven vastlegt op camera. Alles wat we Jacob ooit hebben zien doen, is gefilmd door deze gast. Hoewel hij het er zeker niet altijd mee eens was, heeft hij er vaak toch voor gekozen om het zo objectief mogelijk te registreren.<\/p>\n                    \n                    <div class=\"bio-subheader\">De Meesterbrein<\/div>\n                    <p>Ook heeft hij Jacob geholpen om bekend te worden; het was namelijk zijn idee om een disstrack te schrijven over <a class=\"internal-link\" onclick=\"openCharModal('card-supplier')\">De Supplier<\/a> en <a class=\"internal-link\" onclick=\"openCharModal('card-nummer6')\">Nummer 6<\/a>.<\/p>\n\n                    <div class=\"status-block\">\n                        Huidige Status: Er is helaas niet veel bekend over de Documentairemaker. Niemand weet eigenlijk wie hij is en wat hij in het dagelijks leven doet.\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <!-- 8. De Gebroeders Dequero -->\n            <article class=\"character-card\" id=\"card-dequero\" onclick=\"openCharModal('card-dequero')\">\n                <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/Lafbek-logo-wit.png\" alt=\"Placeholder Lafbek\" class=\"card-image-bg\" style=\"opacity: 0.1; object-fit: contain; transform: scale(0.6);\">\n                <div class=\"card-overlay\">\n                    <span class=\"card-role\">Maffia Familie<\/span>\n                    <h2 class=\"card-name\">Gebroeders Dequero<\/h2>\n                <\/div>\n                \n                <div class=\"seo-hidden-content\">\n                    <div class=\"bio-subheader\">Introductie<\/div>\n                    <p>De gebroeders Dequero zijn te zien in: <span class=\"highlight-text\">Lafbek Universe Episode 1<\/span>.<\/p>\n                    <p>De gebroeders Dequero zijn jonge leden van de Dequero familie, een maffiafamilie die veel samenwerkt met de Loosdrechtse maffia van <a class=\"internal-link\" onclick=\"openCharModal('card-supplier')\">De Supplier<\/a>. De Dequero&#8217;s zijn een van de meest beruchte families van heel Nederland en staan bekend om het treiteren van mensen.<\/p>\n                    \n                    <div class=\"bio-subheader\">Ricardo Dequero (Oudere broer)<\/div>\n                    <p>Ricardo wordt door zijn familie niet al te serieus genomen; hij wordt gezien als een nietsnut die vaak dingen verpest. Daarom wordt hij niet vertrouwd met moeilijke klussen of gevoelige informatie. Hij is niet de slimste en maakt voortdurend domme fouten die hem in de problemen brengen.<\/p>\n                    \n                    <div class=\"bio-subheader\">Luciano Dequero (Jongere broer)<\/div>\n                    <p>Luciano is een van de meest gerespecteerde leden van de familie; hij wordt vaker gevraagd voor klussen en hij kan meedogenloos zijn. Luciano houdt van zijn familie en zou er alles aan doen om hen te beschermen. Hij kan wel gek van Ricardo worden, maar zorgt er altijd voor dat Ricardo veilig is.<\/p>\n                <\/div>\n            <\/article>\n\n        <\/section>\n\n    <\/main>\n\n    <!-- --- STREAMING_CHUNK: Footer --- -->\n    <footer class=\"lafbek-seo-footer\">\n        <div class=\"footer-grid\">\n            <div class=\"footer-col\">\n                <h4>Lafbek Official<\/h4>\n                <p>De offici\u00eble hub voor Lafbek streetwear, merchandise en wekelijkse content.<\/p>\n                <p>KVK: 12345678 (Demo)<\/p>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Contact &amp; Adres<\/h4>\n                <p>Lafbekstraat 101<\/p>\n                <p>1011 AB, Amsterdam, Nederland<\/p>\n                <p>Tel: +31 6 12345678<\/p>\n                <p>Email: <a href=\"mailto:info@lafbek.com\">info@lafbek.com<\/a><\/p>\n            <\/div>\n            <div class=\"footer-col\">\n                <h4>Social Media<\/h4>\n                <a href=\"https:\/\/www.youtube.com\/@LAF-BEK\" target=\"_blank\">YouTube Kanaal<\/a>\n                <a href=\"https:\/\/www.tiktok.com\/@lafbek0\" target=\"_blank\">TikTok Account<\/a>\n                <a href=\"https:\/\/www.tiktok.com\/@lafbek0\" target=\"_blank\">Instagram Profile<\/a>\n            <\/div>\n        <\/div>\n        <div class=\"footer-bottom\">\n            <p>\u00a9 2026 Lafbek. Alle rechten voorbehouden.<\/p>\n            <p>Ontworpen voor maximale PageSpeed en SEO prestaties.<\/p>\n        <\/div>\n    <\/footer>\n\n    <!-- --- STREAMING_CHUNK: De Interactieve Pop-up (Modal) HTML --- -->\n    <div class=\"character-modal\" id=\"characterModal\">\n        <div class=\"char-modal-backdrop\" id=\"charModalBackdrop\"><\/div>\n        <div class=\"char-modal-content\">\n            <button class=\"char-modal-close-btn\" id=\"charModalCloseBtn\">\u00d7<\/button>\n            <div class=\"char-modal-grid\">\n                <!-- Foto sectie in modal -->\n                <div class=\"char-modal-image-col\">\n                    <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"Karakter\">\n                <\/div>\n                <!-- Tekst sectie in modal (met eigen scrollbar via CSS) -->\n                <div class=\"char-modal-info-col\">\n                    <span class=\"char-modal-subtitle\" id=\"modalRole\">Rol<\/span>\n                    <h2 class=\"char-modal-title\" id=\"modalName\">Naam<\/h2>\n                    <div class=\"char-modal-text-content\" id=\"modalBio\">\n                        <!-- De SEO hidden content wordt hier via JS ingeladen -->\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- --- STREAMING_CHUNK: JavaScript Functionaliteiten --- -->\n    <script>\n        \/\/ --- STREAMING_CHUNK: WordPress REST API Integratie ---\n        \/\/ Functie om karakters op te halen uit WordPress en dynamisch toe te voegen\n        async function fetchWordPressCharacters() {\n            const grid = document.querySelector('.characters-grid');\n            if (!grid) return;\n\n            \/\/ LET OP: Vervang dit door de daadwerkelijke URL van je WordPress REST API\n            \/\/ Bijvoorbeeld: https:\/\/lafbek.com\/wp-json\/wp\/v2\/karakters (als je een custom post type hebt genaamd 'karakters')\n            \/\/ Of: https:\/\/lafbek.com\/wp-json\/wp\/v2\/posts?category=karakters (als je een categorie 'karakters' gebruikt)\n            const apiUrl = 'https:\/\/lafbek.com\/wp-json\/wp\/v2\/posts?categories=KARAKTER_CATEGORIE_ID&_embed'; \n\n            try {\n                \/\/ Haal de data op\n                const response = await fetch(apiUrl);\n                if (!response.ok) {\n                    throw new Error(`HTTP error! status: ${response.status}`);\n                }\n                const posts = await response.json();\n\n                \/\/ Loop door elk WordPress bericht\n                posts.forEach(post => {\n                    \/\/ Maak een unieke ID aan op basis van de post ID\n                    const cardId = `card-wp-${post.id}`;\n                    \n                    \/\/ Haal de titel op\n                    const name = post.title.rendered;\n                    \n                    \/\/ Probeer een uitgelichte afbeelding (featured image) te vinden\n                    let imageUrl = '';\n                    if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n                        imageUrl = post._embedded['wp:featuredmedia'][0].source_url;\n                    }\n\n                    \/\/ Voor de rol, proberen we een custom field of excerpt te gebruiken.\n                    \/\/ Als dat er niet is, gebruiken we een default tag.\n                    let role = \"Nieuw Karakter\";\n                    \/\/ if(post.meta && post.meta.rol) { role = post.meta.rol; } \/\/ Voorbeeld met custom fields\n\n                    \/\/ De daadwerkelijke content uit WordPress\n                    const content = post.content.rendered;\n\n                    \/\/ Genereer de HTML structuur voor de kaart\n                    const card = document.createElement('article');\n                    card.classList.add('character-card');\n                    card.id = cardId;\n                    card.setAttribute('onclick', `openCharModal('${cardId}')`);\n\n                    let imageHtml = '';\n                    if (imageUrl) {\n                        imageHtml = `<img decoding=\"async\" src=\"${imageUrl}\" alt=\"${name}\" class=\"card-image-bg\">`;\n                    } else {\n                        \/\/ Fallback SVG als er geen foto is ingesteld\n                        imageHtml = `\n                            <img decoding=\"async\" src=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/Lafbek-logo-wit.png\" alt=\"Placeholder Lafbek\" class=\"card-image-bg\" style=\"opacity: 0.1; object-fit: contain; transform: scale(0.6);\">\n                        `;\n                    }\n\n                    card.innerHTML = `\n                        ${imageHtml}\n                        <div class=\"card-overlay\">\n                            <span class=\"card-role\">${role}<\/span>\n                            <h2 class=\"card-name\">${name}<\/h2>\n                        <\/div>\n                        <div class=\"seo-hidden-content\">\n                            <!-- Hier laden we de content uit WordPress in -->\n                            ${content}\n                            <div class=\"status-block\">\n                                Ge\u00efmporteerd via WordPress REST API.\n                            <\/div>\n                        <\/div>\n                    `;\n\n                    \/\/ Voeg de nieuwe kaart toe aan het grid\n                    grid.appendChild(card);\n                });\n\n            } catch (error) {\n                console.error(\"Fout bij het ophalen van WordPress karakters (of URL niet ingesteld):\", error);\n                \/\/ Als de API faalt (bv. omdat je hem nog niet hebt geconfigureerd), tonen we gewoon de HTML karakters.\n            }\n        }\n\n\n        \/\/ Menu Logica\n        const menuTrigger = document.getElementById('menuTrigger');\n        const sidebarMenu = document.getElementById('sidebarMenu');\n        const sidebarOverlay = document.getElementById('sidebarOverlay');\n        const menuBackBtn = document.getElementById('menuBackBtn');\n\n        function openMenu() {\n            sidebarMenu.classList.add('active');\n            sidebarOverlay.classList.add('active');\n            document.body.classList.add('modal-open');\n        }\n\n        function closeMenu() {\n            sidebarMenu.classList.remove('active');\n            sidebarOverlay.classList.remove('active');\n            document.body.classList.remove('modal-open');\n        }\n\n        menuTrigger.addEventListener('click', openMenu);\n        menuBackBtn.addEventListener('click', closeMenu);\n        sidebarOverlay.addEventListener('click', closeMenu);\n\n        \/\/ --- Modal Logica (Leest data uit HTML inclusief WordPress data) ---\n        const modal = document.getElementById('characterModal');\n        const modalCloseBtn = document.getElementById('charModalCloseBtn');\n        const modalBackdrop = document.getElementById('charModalBackdrop');\n        const modalImage = document.getElementById('modalImage');\n        const modalName = document.getElementById('modalName');\n        const modalRole = document.getElementById('modalRole');\n        const modalBio = document.getElementById('modalBio');\n\n        window.openCharModal = function(cardId) {\n            const card = document.getElementById(cardId);\n            if (!card) return;\n\n            \/\/ Extraheer data uit de kaart\n            const name = card.querySelector('.card-name').innerText;\n            const role = card.querySelector('.card-role').innerText;\n            const imageSrc = card.querySelector('.card-image-bg').src;\n            const bioHtml = card.querySelector('.seo-hidden-content').innerHTML;\n\n            \/\/ Vul de modal\n            modalName.innerText = name;\n            modalRole.innerText = role;\n            modalImage.src = imageSrc;\n            modalBio.innerHTML = bioHtml;\n\n            \/\/ Laat modal zien\n            modal.classList.add('active');\n            document.body.classList.add('modal-open');\n            \n            \/\/ Scroll de tekst in de modal weer netjes naar boven\n            document.querySelector('.char-modal-info-col').scrollTop = 0;\n        };\n\n        function closeCharModal() {\n            modal.classList.remove('active');\n            document.body.classList.remove('modal-open');\n        }\n\n        modalCloseBtn.addEventListener('click', closeCharModal);\n        modalBackdrop.addEventListener('click', closeCharModal);\n\n        document.addEventListener('keydown', (e) => {\n            if (e.key === 'Escape') closeCharModal();\n        });\n\n        \/\/ Initialize WordPress Fetch on Load\n        document.addEventListener(\"DOMContentLoaded\", () => {\n             \/\/ Uncomment de onderstaande regel wanneer je de API URL correct hebt ingesteld.\n             \/\/ fetchWordPressCharacters();\n        });\n    <\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over Ons | Lafbek Universe Karakters Shop Nu Terug Merch YouTube Contact Instagram TikTok Over het Merk Lafbek Lafbek is niet zomaar een YouTube-kanaal, het is een lifestyle. Geboren op de straten en grootgebracht in de underground cultuur, brengen we de ultieme mix van hiphop, skateboarding en street vibes naar je scherm. Onze exclusieve merchandise [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-111","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>-<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lafbek.com\/?page_id=111\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"-\" \/>\n<meta property=\"og:description\" content=\"Over Ons | Lafbek Universe Karakters Shop Nu Terug Merch YouTube Contact Instagram TikTok Over het Merk Lafbek Lafbek is niet zomaar een YouTube-kanaal, het is een lifestyle. Geboren op de straten en grootgebracht in de underground cultuur, brengen we de ultieme mix van hiphop, skateboarding en street vibes naar je scherm. Onze exclusieve merchandise [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lafbek.com\/?page_id=111\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-08T18:58:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/lafbek-smiley-v2.jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/lafbek.com\\\/?page_id=111\",\"url\":\"https:\\\/\\\/lafbek.com\\\/?page_id=111\",\"name\":\"-\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/lafbek.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/lafbek.com\\\/?page_id=111#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/lafbek.com\\\/?page_id=111#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/lafbek.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/lafbek-smiley-v2.jpeg\",\"datePublished\":\"2026-06-08T17:18:43+00:00\",\"dateModified\":\"2026-06-08T18:58:41+00:00\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/lafbek.com\\\/?page_id=111\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/lafbek.com\\\/?page_id=111#primaryimage\",\"url\":\"https:\\\/\\\/lafbek.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/lafbek-smiley-v2.jpeg\",\"contentUrl\":\"https:\\\/\\\/lafbek.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/lafbek-smiley-v2.jpeg\",\"width\":652,\"height\":652},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/lafbek.com\\\/#website\",\"url\":\"https:\\\/\\\/lafbek.com\\\/\",\"name\":\"Lafbek\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/lafbek.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/lafbek.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/lafbek.com\\\/#organization\",\"name\":\"Lafbek\",\"url\":\"https:\\\/\\\/lafbek.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/lafbek.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/lafbek.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Lafbek-logo-wit.png\",\"contentUrl\":\"https:\\\/\\\/lafbek.com\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Lafbek-logo-wit.png\",\"width\":2500,\"height\":2000,\"caption\":\"Lafbek\"},\"image\":{\"@id\":\"https:\\\/\\\/lafbek.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/@LAF-BEK\",\"https:\\\/\\\/www.instagram.com\\\/lafbek_\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@lafbek0\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"-","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lafbek.com\/?page_id=111","og_locale":"nl_NL","og_type":"article","og_title":"-","og_description":"Over Ons | Lafbek Universe Karakters Shop Nu Terug Merch YouTube Contact Instagram TikTok Over het Merk Lafbek Lafbek is niet zomaar een YouTube-kanaal, het is een lifestyle. Geboren op de straten en grootgebracht in de underground cultuur, brengen we de ultieme mix van hiphop, skateboarding en street vibes naar je scherm. Onze exclusieve merchandise [&hellip;]","og_url":"https:\/\/lafbek.com\/?page_id=111","article_modified_time":"2026-06-08T18:58:41+00:00","og_image":[{"url":"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/lafbek-smiley-v2.jpeg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"11 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/lafbek.com\/?page_id=111","url":"https:\/\/lafbek.com\/?page_id=111","name":"-","isPartOf":{"@id":"https:\/\/lafbek.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lafbek.com\/?page_id=111#primaryimage"},"image":{"@id":"https:\/\/lafbek.com\/?page_id=111#primaryimage"},"thumbnailUrl":"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/lafbek-smiley-v2.jpeg","datePublished":"2026-06-08T17:18:43+00:00","dateModified":"2026-06-08T18:58:41+00:00","inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lafbek.com\/?page_id=111"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/lafbek.com\/?page_id=111#primaryimage","url":"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/lafbek-smiley-v2.jpeg","contentUrl":"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/05\/lafbek-smiley-v2.jpeg","width":652,"height":652},{"@type":"WebSite","@id":"https:\/\/lafbek.com\/#website","url":"https:\/\/lafbek.com\/","name":"Lafbek","description":"","publisher":{"@id":"https:\/\/lafbek.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lafbek.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/lafbek.com\/#organization","name":"Lafbek","url":"https:\/\/lafbek.com\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/lafbek.com\/#\/schema\/logo\/image\/","url":"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/Lafbek-logo-wit.png","contentUrl":"https:\/\/lafbek.com\/wp-content\/uploads\/2026\/06\/Lafbek-logo-wit.png","width":2500,"height":2000,"caption":"Lafbek"},"image":{"@id":"https:\/\/lafbek.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/@LAF-BEK","https:\/\/www.instagram.com\/lafbek_\/","https:\/\/www.tiktok.com\/@lafbek0"]}]}},"_links":{"self":[{"href":"https:\/\/lafbek.com\/index.php?rest_route=\/wp\/v2\/pages\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lafbek.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lafbek.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lafbek.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lafbek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=111"}],"version-history":[{"count":6,"href":"https:\/\/lafbek.com\/index.php?rest_route=\/wp\/v2\/pages\/111\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/lafbek.com\/index.php?rest_route=\/wp\/v2\/pages\/111\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/lafbek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}