/* Stijl van het spel op tickets.php (ticketverkoopGesloten.php), voor andere pagina's: lineup.php, fotos.php.
   Geel, roze en donkerblauw, schuine hoofdletters, witte kaarten met diepe schaduw, ronde knoppen met harde schaduw.
   (helperslijst.php heeft dezelfde stijl met eigen klassen.) */

.cs { --cs-geel: #ffde00; --cs-geel-rand: #c9a800; --cs-roze: #e7447b; --cs-blauw: #120f3a; --cs-tekst: #1f2433; --cs-zacht: #5d6475;
    max-width: 1240px; margin: 0 auto; padding: 50px 15px 80px; color: #fff; }

/* Kop van de pagina: gele, schuine badge met een korte tekst */
.cs-kop { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.cs-badge { display: inline-block; background: var(--cs-geel); color: #111; font-size: 30px; line-height: 1.1; font-weight: 900; font-style: italic;
    text-transform: uppercase; padding: 12px 28px; border-radius: 16px; transform: rotate(-2deg); box-shadow: 0 8px 0 var(--cs-geel-rand), 0 18px 40px rgba(18,15,58,.3); }
.cs-kop p { color: #fff; font-size: 18px; margin: 26px 0 0; }

/* Kaarten */
.cs-kaart { background: #fff; color: var(--cs-tekst); border-radius: 18px; padding: 24px; box-shadow: 0 14px 40px rgba(18,15,58,.25); }
.cs-dagnaam { display: inline-block; background: var(--cs-blauw); color: #fff; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .5px;
    font-size: 14px; padding: 6px 16px; border-radius: 999px; }
.cs-titel { font-size: 30px; line-height: 1.15; font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff; margin: 10px 0 0; }
.cs-binnenkort { background: #fff8c2; border: 2px dashed var(--cs-geel); border-radius: 16px; padding: 22px; color: #3b4252; font-size: 17px; font-weight: 700; text-align: center; }

/* Knoppen */
.cs-knop { display: inline-block; border: 0; border-radius: 999px; padding: 13px 30px; font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase;
    background: var(--cs-geel); color: #111 !important; cursor: pointer; box-shadow: 0 6px 0 var(--cs-geel-rand); text-decoration: none; transition: transform .05s, box-shadow .05s; }
.cs-knop:hover { color: #111; transform: translateY(-1px); }
.cs-knop:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--cs-geel-rand); }
.cs-knop-roze { background: var(--cs-roze); color: #fff !important; box-shadow: 0 6px 0 #b8325f; }

/* Oproep onderaan een pagina */
.cs-oproep { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 50px; }
.cs-oproep h3 { margin: 0; font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--cs-blauw); }
.cs-oproep p { margin: 4px 0 0; color: var(--cs-zacht); }

@media (max-width: 767px) {
    .cs { padding-top: 34px; }
    .cs-badge { font-size: 22px; padding: 9px 18px; }
    .cs-kop p { font-size: 16px; }
    .cs-titel { font-size: 22px; }
    .cs-kaart { padding: 18px; }
    .cs-oproep .cs-knop { width: 100%; text-align: center; }
}