/* Top Vijf — opmaak van de informatiepagina's (bovenop app.css). */
.info { min-height: 100vh; display: flex; flex-direction: column; }
.info-kop { background: var(--inkt); color: var(--wit); }
.info-balk { max-width: 960px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.info-balk .logo { text-decoration: none; color: var(--wit); }
.info-nav { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.info-nav a { color: var(--opdonker); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.info-nav a:hover, .info-nav a[aria-current="page"] { color: var(--geel); }
.info-held { max-width: 960px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.info-held h1 { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 9vw, 72px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; }
.info-held .lead { font-size: 19px; line-height: 1.45; color: var(--opdonker); max-width: 640px; }
.info-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.info-knoppen .knop { width: auto; padding: 0 22px; }
.info-knoppen .knop.rand { border-color: var(--gedempt); color: var(--wit); background: transparent; }
.info-voordelen { display: flex; gap: 8px 18px; flex-wrap: wrap; font-weight: 700; color: var(--geel); font-size: 15px; }
.info-main { max-width: 760px; width: 100%; margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 34px; flex: 1; }
.info-main section { display: flex; flex-direction: column; gap: 12px; }
.info-main h2 { font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; }
.info-main h3 { font-size: 18px; font-weight: 700; }
.info-main p, .info-main li { font-size: 17px; line-height: 1.6; color: #2A2925; }
.info-main ul, .info-main ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.info-main a { font-weight: 600; }
.info-stappen { list-style: none; padding: 0 !important; counter-reset: stap; gap: 12px !important; }
.info-stappen li { counter-increment: stap; display: flex; gap: 14px; align-items: flex-start; background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 14px 16px; }
.info-stappen li::before { content: counter(stap); flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--geel); font-family: var(--display); font-weight: 900; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.info-blok { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.info-blok.geel { background: var(--zachtgeel); border-color: var(--zachtgeel); }
.info-tabel { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: 16px; overflow: hidden; border: 1px solid var(--lijn); font-size: 16px; }
.info-tabel th, .info-tabel td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--lijn); vertical-align: top; }
.info-tabel thead th { border-top: 0; background: var(--inkt); color: var(--wit); font-size: 14px; }
.info-vraag { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 0 16px; }
.info-vraag summary { cursor: pointer; font-weight: 700; font-size: 17px; min-height: 52px; display: flex; align-items: center; }
.info-vraag p { padding-bottom: 14px; }
.info-slot { background: var(--inkt); color: var(--wit); border-radius: 20px; padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.info-slot h2 { color: var(--wit); }
.info-slot p { color: var(--opdonker); }
.info-voet { background: var(--inkt); color: var(--opdonker); }
.info-voet .info-balk { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 16px 32px; }
.info-voet a { color: var(--wit); }
.info-voet .info-nav a { color: var(--opdonker); }
.info-voet p { font-size: 14px; }
/* Uitleg onder het formulier op de startpagina (alleen voor wie niet is ingelogd) */
.start-info { max-width: 520px; margin: 0 auto; padding: 8px 20px 40px; display: flex; flex-direction: column; gap: 12px; }
.start-info h2 { font-family: var(--display); font-weight: 900; font-size: 28px; text-transform: uppercase; line-height: 1; }
.start-info p { font-size: 16px; line-height: 1.55; color: #2A2925; }
.start-info ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.start-info a { font-weight: 600; }
@media (min-width: 900px) {
  .start-info { max-width: 960px; padding: 16px 32px 56px; }
}