/* ============================================================
   OffRio 2040 · eventer/assets/eventer.css
   ------------------------------------------------------------
   Alleen de omlijsting van de publieke offertezoeker: kop,
   hero, naam- en e-mailvelden, voettekst.

   De zoeker zelf gebruikt portal.css en offertegrid.css, precies
   zoals in het klantportaal — dat is bewust, zodat een wijziging
   daar niet op twee plekken hoeft.

   Voorvoegsel .ev- (eventer), botst met niets.
   ============================================================ */

.ev-body {
    margin: 0;
    min-height: 100vh;
}

/* ── KOPBALK ───────────────────────────────────────────────── */

.ev-top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 8, 24, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ev-top-binnen {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ev-merk {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--cream, #f5f0e6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-talen {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.ev-taal {
    padding: 4px 9px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.ev-taal.actief {
    background: rgba(212, 175, 55, .15);
    border-color: rgba(212, 175, 55, .35);
    color: #d4af37;
}

/* ── HERO ──────────────────────────────────────────────────── */
/* De belofte staat hier bewust groot: echte prijzen in plaats van
   een lijstje bedrijven dat misschien terugbelt. Dat is het enige
   dat deze pagina onderscheidt van elke andere offertesite. */

.ev-hero {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 20px 26px;
    text-align: center;
}

.ev-hero-titel {
    margin: 0 0 14px;
    font-family: 'Syne', sans-serif;
    font-size: clamp(27px, 6vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: var(--cream, #f5f0e6);
}

.ev-hero-titel span { color: #d4af37; }

.ev-hero-sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .55);
}

/* ── INHOUD ────────────────────────────────────────────────── */

.ev-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 14px 50px;
}

/* ── NAAM EN E-MAIL ────────────────────────────────────────── */
/* Pas gevraagd op het moment van versturen, als de bezoeker zijn
   resultaten al heeft gezien. Vooraf om gegevens vragen kost
   bezoekers die anders gewoon even hadden rondgekeken. */

.ev-velden {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.ev-velden > * { min-width: 0; }

.ev-akkoord {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
}

.ev-akkoord input {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: #d4af37;
}

/* ── VOET ──────────────────────────────────────────────────── */

.ev-voet {
    padding: 26px 16px 40px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.ev-voet strong { color: rgba(255, 255, 255, .55); }
.ev-voet a { color: #d4af37; text-decoration: none; }

@media (max-width: 520px) {
    .ev-velden { grid-template-columns: 1fr; }
    .ev-hero { padding: 28px 18px 20px; }
}


/* ── AANBIEDER ZONDER HISTORIE ──────────────────────────────
   Wie nog geen event via OffRio heeft gedaan kreeg eerst
   "— / 0% / 0x / 10 van 100" te zien. Dat leest als een slecht
   bedrijf terwijl het gewoon een nieuw bedrijf is, en het maakt
   de hele lijst leeg. Hier staat in plaats daarvan waarom hij
   in de lijst staat. */

.tg-nieuw {
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tg-nieuw-kop {
    display: inline-block;
    margin-bottom: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(201, 168, 76, .13);
    border: 1px solid rgba(201, 168, 76, .3);
    color: #C9A84C;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tg-nieuw-tekst {
    font-size: 11px;
    line-height: 1.55;
    color: rgba(245, 242, 237, .45);
}

.tg-nieuw-lijst {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.tg-nieuw-lijst li {
    font-size: 11px;
    line-height: 1.9;
    color: rgba(245, 242, 237, .6);
}

/* ── NIET-GECLAIMD BEDRIJFSPROFIEL ──────────────────────────
   Een openbaar bedrijfsgegeven dat de gids vult, zoals bij Google
   Bedrijfsprofiel en Yelp. Moet er duidelijk anders uitzien dan
   een aangesloten aanbieder: zonder dat verschil denkt een
   bezoeker dat hij kan boeken, en dat kan hij niet.

   Bewust gedempt en niet in de gouden accentkleur — het is geen
   aanbeveling maar een uitnodiging. */

.ev-claim {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    border: 1px dashed rgba(255, 255, 255, .18);
}

.ev-claim-kop {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: rgba(245, 242, 237, .55);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ev-claim-tekst {
    font-size: 11px;
    line-height: 1.55;
    color: rgba(245, 242, 237, .45);
    margin-bottom: 9px;
}

.ev-claim-knop {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(201, 168, 76, .35);
    background: rgba(201, 168, 76, .10);
    color: #C9A84C;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.ev-claim-knop:hover {
    background: rgba(201, 168, 76, .2);
    border-color: #C9A84C;
}

/* ═══════════════════════════════════════════════════════════
   KOPBALK, MENU EN VENSTERS
   Toegevoegd bij de omzetting naar OffRio Multi Search.
   ═══════════════════════════════════════════════════════════ */

/* ── MERKNAAM ─────────────────────────────────────────────── */

.ev-merk {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.ev-merk-vonk {
    font-size: 17px;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(201, 168, 76, .5));
}

.ev-merk-naam {
    font-family: 'Syne', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--cream, #f5f0e6);
    white-space: nowrap;
}

.ev-merk-naam em {
    font-style: normal;
    color: #d4af37;
}

/* ── MENU ─────────────────────────────────────────────────── */

.ev-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ev-nav-knop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(245, 240, 230, .72);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.ev-nav-knop:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--cream, #f5f0e6);
}

.ev-nav-ic { font-size: 13px; line-height: 1; }

/* Investeren mag opvallen zonder te schreeuwen: dit is niet de
   knop waar de meeste bezoekers voor komen, maar wel degene die
   je niet wilt verstoppen. */
.ev-nav-invest {
    border-color: rgba(201, 168, 76, .3);
    color: #d4af37;
}

.ev-nav-invest:hover {
    background: rgba(201, 168, 76, .12);
    border-color: rgba(201, 168, 76, .55);
    color: #e5c158;
}

/* De enige knop met een volle achtergrond. Er is er maar één,
   en dat is precies waarom hij werkt. */
.ev-nav-hoofd {
    background: linear-gradient(135deg, #d4af37, #b8942c);
    color: #0d0b1a !important;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(201, 168, 76, .22);
}

.ev-nav-hoofd:hover {
    background: linear-gradient(135deg, #e5c158, #d4af37);
    color: #0d0b1a !important;
    transform: translateY(-1px);
}

.ev-hamburger { display: none; }

/* ── HERO ─────────────────────────────────────────────────── */

.ev-hero-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(201, 168, 76, .1);
    border: 1px solid rgba(201, 168, 76, .28);
    color: #d4af37;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ev-hero-punten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin-top: 24px;
}

.ev-hero-punten span {
    font-size: 12.5px;
    color: rgba(245, 242, 237, .45);
}

.ev-hero-punten span::before {
    content: '✓';
    color: #d4af37;
    font-weight: 800;
    margin-right: 7px;
}

/* ── VENSTERS ─────────────────────────────────────────────── */

.ev-venster {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6, 5, 14, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 20px;
    overflow-y: auto;
}

.ev-venster.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-venster-doos {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 34px 28px 30px;
    border-radius: 20px;
    background: linear-gradient(160deg, #1a1730, #12101f);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    text-align: center;
    animation: evOmhoog .22s ease;
}

@keyframes evOmhoog {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ev-venster-x {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: rgba(245, 242, 237, .4);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.ev-venster-x:hover { color: var(--cream, #f5f0e6); }

.ev-venster-ic { font-size: 40px; margin-bottom: 12px; line-height: 1; }

.ev-venster-doos h3 {
    margin: 0 0 10px;
    font-family: 'Syne', sans-serif;
    font-size: 21px;
    font-weight: 800;
    color: var(--cream, #f5f0e6);
}

.ev-venster-doos p {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(245, 242, 237, .5);
}

.ev-invest-lead {
    color: #d4af37 !important;
    font-size: 15px !important;
    font-weight: 700;
    margin-bottom: 10px !important;
}

.ev-venster-knop {
    display: block;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #d4af37, #b8942c);
    color: #0d0b1a;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.ev-venster-knop:hover { background: linear-gradient(135deg, #e5c158, #d4af37); }

/* ── STAPPEN VOOR IPHONE EN ANDROID ───────────────────────── */

.ev-stap-kop {
    margin: 16px 0 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d4af37;
    text-align: left;
}

.ev-stappen {
    margin: 0;
    padding-left: 20px;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.9;
    color: rgba(245, 242, 237, .55);
}

.ev-stappen strong { color: var(--cream, #f5f0e6); }

/* ── DELEN ────────────────────────────────────────────────── */

.ev-deel-rooster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.ev-deel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 13px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    color: rgba(245, 242, 237, .72);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ev-deel span { font-size: 19px; line-height: 1; }
.ev-deel:hover { background: rgba(255, 255, 255, .09); color: var(--cream, #f5f0e6); }

.ev-kopieer-rij { display: flex; gap: 7px; }

.ev-kopieer-veld {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .28);
    color: rgba(245, 242, 237, .6);
    font-size: 11.5px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    outline: none;
}

.ev-kopieer-knop {
    flex-shrink: 0;
    padding: 10px 17px;
    border-radius: 10px;
    border: 1px solid rgba(201, 168, 76, .35);
    background: rgba(201, 168, 76, .12);
    color: #d4af37;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ev-kopieer-knop:hover { background: rgba(201, 168, 76, .22); }

/* ── MOBIEL ───────────────────────────────────────────────── */
/* Onder de 820px past het menu niet meer naast het logo en de
   taalknoppen. Dan klapt het open onder de balk in plaats van te
   verdwijnen — een menu dat je niet kunt vinden is erger dan een
   menu dat een regel extra kost. */

@media (max-width: 820px) {
    .ev-top-binnen { flex-wrap: wrap; }

    .ev-nav {
        display: none;
        order: 3;
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .07);
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .ev-nav.open { display: flex; }

    .ev-nav-knop { justify-content: center; padding: 11px 14px; font-size: 13.5px; }

    .ev-talen { margin-left: auto; margin-right: 8px; }

    .ev-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 38px;
        height: 34px;
        padding: 0 8px;
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .04);
        cursor: pointer;
        flex-shrink: 0;
    }

    .ev-hamburger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: rgba(245, 242, 237, .75);
    }

    .ev-merk-naam { font-size: 13.5px; }
    .ev-venster-doos { padding: 30px 20px 26px; }
    .ev-deel-rooster { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

@media (max-width: 380px) {
    .ev-merk-naam em { display: none; }
}




/* ═════════════════════════════════════════════════════════════
   TOEVOEGINGEN VOOR EVENTER V4.0
   ═════════════════════════════════════════════════════════════
   Deze stijlen horen bij de nieuwe hero, 2-koloms layout en
   advertentieblokken. Ze zijn apart gezet zodat ze later vanuit
   een database gestuurd kunnen worden.
   ═════════════════════════════════════════════════════════════ */

/* ══ NIEUWE HERO — GROOT, OVERTUIGEND ════════════════════════ */
.ev-hero-v4 {
    padding: 50px 0 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ev-hero-v4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

.ev-hero-v4 .ev-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 6px 18px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.ev-hero-v4 h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(38px, 7vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 8px;
    letter-spacing: -1px;
    color: #fff;
}

.ev-hero-v4 h1 .goud {
    color: #d4af37;
    display: inline-block;
    position: relative;
}

.ev-hero-v4 h1 .goud::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(212, 175, 55, 0.3);
    border-radius: 2px;
}

.ev-hero-v4 .sub {
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255, 255, 255, 0.6);
    max-width: 560px;
    margin: 12px auto 0;
    line-height: 1.6;
    font-weight: 400;
}

.ev-hero-v4 .sub strong {
    color: #fff;
    font-weight: 600;
}

/* ══ 2-KOLOMS LAYOUT ══════════════════════════════════════════ */
.ev-grid-2 {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 14px 40px;
}

@media (max-width: 820px) {
    .ev-grid-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ══ ADVERTENTIE BLOKKEN (rechts) ════════════════════════════ */
.ev-advertenties {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ev-advertentie {
    background: linear-gradient(160deg, #141118, #1a1522);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px 18px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ev-advertentie:hover {
    transform: translateY(-2px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.ev-advertentie .ic {
    font-size: 28px;
    margin-bottom: 6px;
}

.ev-advertentie .titel {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.ev-advertentie .subtitel {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin-bottom: 10px;
}

.ev-advertentie .cta {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.15);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.25);
    text-decoration: none;
    transition: all 0.15s ease;
}

.ev-advertentie .cta:hover {
    background: rgba(212, 175, 55, 0.25);
}

.ev-advertentie.aanbevolen {
    border-color: rgba(212, 175, 55, 0.3);
    background: linear-gradient(160deg, #1c1712, #141118);
}

.ev-advertentie.aanbevolen .badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d4af37;
    background: rgba(212, 175, 55, 0.15);
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

/* ══ TICKER — GROTER, KORTER ═════════════════════════════════ */
.ev-band-v4 {
    overflow: hidden;
    padding: 16px 0;
    margin: 0 14px 10px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ev-band-v4 .spoor {
    display: flex;
    width: max-content;
    animation: evBandLoop 45s linear infinite;
    gap: 16px;
}

.ev-band-v4:hover .spoor {
    animation-play-state: paused;
}

.ev-band-v4 .helft {
    display: flex;
    gap: 16px;
    padding-right: 16px;
}

@keyframes evBandLoop {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ev-band-v4 .spoor { animation: none; }
    .ev-band-v4 { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

.ev-band-v4 .kaart {
    flex: 0 0 auto;
    width: 200px;
    min-height: 70px;
    background: linear-gradient(160deg, #1a1522, #141118);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ev-band-v4 .kaart.aan {
    border-color: rgba(212, 175, 55, 0.2);
    background: linear-gradient(160deg, #1c1712, #141118);
}

.ev-band-v4 .kaart .logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
    padding: 3px;
    flex-shrink: 0;
}

.ev-band-v4 .kaart .letter {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.12);
    color: #d9b45f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.ev-band-v4 .kaart .info {
    min-width: 0;
}

.ev-band-v4 .kaart .naam {
    font-size: 13px;
    font-weight: 700;
    color: #f6ece0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-band-v4 .kaart .meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══ FORMUUR — MEER RUIMTE ════════════════════════════════════ */
.ev-form-col {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    padding: 20px 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.ev-form-col .kp-kaart {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.ev-form-col .kp-kaart-body {
    padding: 0;
}

.ev-form-col .kp-kaart-kop {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
    color: #fff;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 620px) {
    .ev-band-v4 .kaart {
        width: 160px;
        min-height: 60px;
        padding: 10px 12px;
    }
    .ev-band-v4 .kaart .naam {
        font-size: 11px;
    }
    .ev-band-v4 .kaart .meta {
        font-size: 10px;
    }
    .ev-advertenties {
        gap: 10px;
    }
    .ev-advertentie {
        padding: 14px 14px;
    }
    .ev-form-col {
        padding: 14px 14px 18px;
    }
}

/* ══ ADVERTENTIE DATABASE READY ═══════════════════════════════
   Later kunnen deze stijlen vanuit de database worden gevuld
   met een tabel eventer_advertenties. De CSS-klassen blijven
   hetzelfde, de inhoud komt uit de database.
   ═══════════════════════════════════════════════════════════ */
.ev-advertentie .kleur-goud { color: #d4af37; }
.ev-advertentie .kleur-groen { color: #6ee79b; }
.ev-advertentie .kleur-blauw { color: #60a5fa; }
.ev-advertentie .kleur-roze { color: #f472b6; }
.ev-advertentie .kleur-paars { color: #a78bfa; }