.schema { position: relative; background: var(--scherm); color: var(--op-scherm); border-radius: 30px; padding: 26px 18px; overflow: hidden; }
@media (min-width: 900px) { .schema { padding: 48px; } }
.schema::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%); mask-image: radial-gradient(ellipse at center, #000, transparent 75%); pointer-events: none; }
.schema > * { position: relative; }
.eu { border: 1.5px dashed rgba(255,255,255,.34); border-radius: 26px; padding: 40px 14px 16px; position: relative; display: grid; gap: 16px; }
@media (min-width: 900px) { .eu { padding: 48px 28px 28px; } }
.eu > .tag { position: absolute; top: 14px; left: 18px; font-size: 12.5px; font-weight: 800; color: var(--scherm-zacht); display: inline-flex; gap: 6px; align-items: center; }
.tag .lucide { width: 14px; height: 14px; }
.omgeving { border: 1.5px solid #fff; border-radius: 20px; padding: 38px 14px 14px; position: relative; background: rgba(255,255,255,.04); display: grid; gap: 12px; }
@media (min-width: 900px) { .omgeving { padding: 42px 22px 22px; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; } }
.omgeving > .tag { position: absolute; top: 12px; left: 16px; font-size: 12.5px; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.blok { background: var(--scherm-vlak); border: 1px solid var(--scherm-lijn); border-radius: 16px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.blok .lucide { width: 22px; height: 22px; }
.blok b { font-size: 17px; font-weight: 900; letter-spacing: -0.02em; }
.blok p { font-size: 13.5px; color: var(--scherm-zacht); }
.verbind { display: grid; place-items: center; color: var(--scherm-zacht); }
.verbind .lucide { width: 22px; height: 22px; }
@media (max-width: 899px) { .verbind .lucide { transform: rotate(90deg); } .verbind { height: 20px; } }
.rondom { display: grid; gap: 12px; }
@media (min-width: 900px) { .rondom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mens { background: #fff; color: #141417; border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.mens .ikon { width: 40px; height: 40px; border-radius: 50%; background: #141417; color: #fff; display: grid; place-items: center; grid-row: span 2; }
.mens b { font-weight: 900; font-size: 16px; }
.mens span { font-size: 13.5px; color: #55535B; }
.anderen { border: 1px dashed var(--scherm-lijn); border-radius: 16px; padding: 14px 16px; font-size: 13.5px; color: var(--scherm-zacht); display: flex; gap: 12px; align-items: center; }
.anderen .lucide { width: 20px; height: 20px; }
.anderen i { display: inline-block; width: 26px; height: 18px; border: 1px solid var(--scherm-lijn); border-radius: 5px; margin-right: 4px; }
.schema .onder { color: var(--scherm-zacht); margin-top: 18px; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .schema.aan .eu { animation: tekenrand .9s var(--gemak) both; }
  .schema.aan .omgeving { animation: verschijn .7s var(--gemak) .35s both; }
  .schema.aan .blok:nth-of-type(1) { animation: verschijn .6s var(--gemak) .7s both; }
  .schema.aan .verbind { animation: verschijn .6s var(--gemak) .9s both; }
  .schema.aan .blok:nth-of-type(2) { animation: verschijn .6s var(--gemak) 1.05s both; }
  .schema.aan .rondom > * { animation: verschijn .6s var(--gemak) 1.35s both; }
  @keyframes tekenrand { from { opacity: .2; transform: scale(.985); } to { opacity: 1; transform: none; } }
}
.groepen { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .groepen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.groepen .tkaart h3 { font-size: 22px; }
.groepen .tkaart .label { margin-bottom: -4px; }
.mensblok { display: grid; gap: 22px; align-items: center; }
@media (min-width: 940px) { .mensblok { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.mensblok h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.03; }
.mensblok .tekst > p { color: var(--zacht); font-size: 17px; margin-top: 14px; max-width: 52ch; }
.keten { display: grid; gap: 8px; }
.keten div { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 16px; padding: 14px 16px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.keten .nr { width: 34px; height: 34px; border-radius: 10px; background: var(--vlak); display: grid; place-items: center; font-weight: 900; grid-row: span 2; }
.keten div.mensstap .nr { background: var(--donker); color: var(--op-donker); }
.keten b { font-weight: 800; }
.keten span { color: var(--zacht); font-size: 14px; }

.bronnen { display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: 14px; }
.bronnen .bk { font-size: 12.5px; font-weight: 800; color: var(--scherm-zacht); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips span { display: inline-flex; gap: 7px; align-items: center; background: var(--scherm-vlak); border: 1px solid var(--scherm-lijn); border-radius: 99px; padding: 8px 14px; font-size: 14px; font-weight: 700; }
.chips .lucide { width: 16px; height: 16px; }
.koppel { display: flex; gap: 8px; align-items: center; color: var(--scherm-zacht); font-size: 13px; font-weight: 700; }
.koppel .lucide { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) { .schema.aan .bronnen { animation: verschijn .6s var(--gemak) .1s both; } }
.model { margin-top: 14px; border: 1px dashed var(--scherm-lijn); border-radius: 16px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--scherm-zacht); }
.model > .lucide { width: 22px; height: 22px; flex: none; }
.model b { display: block; color: var(--op-scherm); font-size: 15px; font-weight: 900; margin-bottom: 2px; }
@media (prefers-reduced-motion: no-preference) { .schema.aan .model { animation: verschijn .6s var(--gemak) 1.5s both; } }