/* ============================================================
   publiek/tekst.css - een pagina met alleen tekst, zoals
   /privacy. Hoort bij templates/public/privacy.html.

   Smalle kolom, zodat de regels prettig lezen. Elke <section>
   is een eigen vak met een kopje.
   ============================================================ */

.tekst {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 34px;
    font-size: 16px;
    line-height: 1.6;
    color: #e3e6ff;
}

/* ------------------------------------------------- de titel */
.tekst-kop { margin-bottom: 20px; }
.tekst-kop h1 {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -.5px;
}
.tekst-kop h1 span {
    display: inline-block;
    padding-bottom: .12em;   /* ruimte voor de staart van de p */
    background: linear-gradient(90deg, #8b3dff 0%, #4f6bff 48%, #38bdf8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.tekst-datum {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--tekst-zacht);
}

/* --------------------------------- de korte versie bovenaan */
.tekst-kort {
    margin: 0 0 18px;
    padding: 16px 20px;
    border: 1px solid var(--rand-neon);
    border-radius: var(--rond);
    background: linear-gradient(180deg, #121748 0%, #0b0f30 100%);
    box-shadow: var(--gloed);
    color: var(--tekst);
}

/* ------------------------------------------------ de vakken */
.tekst section {
    margin-bottom: 14px;
    padding: 18px 20px 6px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: rgba(11, 15, 46, .72);
}
.tekst h2 {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--tekst);
}
.tekst p { margin: 0 0 12px; }
.tekst ul { margin: 0 0 12px; padding-left: 22px; }
.tekst li { margin-bottom: 7px; }
.tekst li::marker { color: var(--paars-licht); }
.tekst strong { color: var(--tekst); }
.tekst a { color: #b9a4ff; text-underline-offset: 3px; }
.tekst a:hover { color: #fff; }

@media (max-width: 640px) {
    .tekst { padding-top: 22px; font-size: 15.5px; }
    .tekst section { padding: 15px 15px 4px; }
    .tekst-kort { padding: 14px 15px; }
}