/* "Over deze tool": inklapbare achtergrondtekst onder een tool.
   Bedoeld voor leerlingen die meer willen weten, en voor zoekmachines.
   Gebruikt de themavariabelen van de pagina, met terugvalwaarden. */
.about{margin-top:56px;background:var(--bg-card);border:1.5px solid var(--border-solid);border-radius:var(--radius,14px);position:relative;z-index:1}
.about summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;align-items:center;gap:10px}
.about summary::-webkit-details-marker{display:none}
.about summary::before{content:'▸';color:var(--accent);font-size:14px;transition:transform .2s}
.about details[open] summary::before{transform:rotate(90deg)}
.about summary h2{font-size:16px;font-weight:600;color:var(--text,var(--text-primary));margin:0;letter-spacing:0}
.about summary:hover h2{color:var(--accent)}
.about-body{padding:0 22px 22px 46px;font-size:14.5px;line-height:1.75;color:var(--text-secondary);text-align:left}
.about-body h3{font-size:14.5px;font-weight:700;color:var(--text,var(--text-primary));margin:20px 0 6px}
.about-body p{margin:0 0 10px}
.about-body ul{margin:0 0 10px 18px;padding:0}
.about-body li{margin-bottom:4px}
.about-body a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent-border,rgba(11,181,200,0.2))}
.about-body a:hover{border-bottom-color:var(--accent)}
@media (max-width:600px){.about-body{padding:0 16px 18px 16px}.about summary{padding:16px}}
@media print{.about{display:none}}