.opening { display: grid; gap: 2.25rem; padding-top: 2.5rem; padding-bottom: 1rem; }
.opening-tekst { min-width: 0; }
.oog { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.oog .ik { color: var(--azul); }
.opening h1 { font: 500 clamp(34px, 8.6vw, 52px)/1.08 var(--font-heading); letter-spacing: -.025em; color: var(--inkt); overflow-wrap: break-word; }
.opening .lede { margin-top: 1.5rem; }
.knoppen { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.feiten { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 14px; line-height: 1.4; color: var(--zacht); }
.feiten li { display: inline-flex; align-items: center; gap: .5rem; }
.feiten .ik { color: var(--accent-zacht); }

@media (min-width: 768px) {
  .opening { padding-top: 3.5rem; }
  .opening h1 { font-size: clamp(40px, 6vw, 52px); }
}
@media (min-width: 1024px) {
  .opening { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 3rem; padding-top: 3rem; padding-bottom: 2rem; }
  .opening h1 { font-size: clamp(40px, 3.6vw, 52px); }
  .opening .lede { font-size: 18px; }
}
@media (max-width: 480px) { .knoppen .knop { flex: 1 1 100%; justify-content: center; } }

.raat-wrap, .stuk-raat { --tint-1: var(--veld); --tint-2: var(--veld); --tint-3: var(--veld); --tint-hover: var(--veld); --rand-gepland: var(--stil); min-width: 0; }
@supports (background: color-mix(in srgb, red, blue)) {
  .raat-wrap, .stuk-raat {
    --tint-1: color-mix(in srgb, var(--azul) 6%, var(--papier));
    --tint-2: color-mix(in srgb, var(--accent-zacht) 22%, var(--papier));
    --tint-3: color-mix(in srgb, var(--balk-bg) 85%, var(--papier));
    --tint-hover: color-mix(in srgb, var(--azul) 12%, var(--papier));
  }
}
.raat { max-width: 44rem; margin: 0 auto; }
.raat-svg { display: block; width: 100%; height: auto; overflow: visible; }
.raat-breed { display: none; }
@media (min-width: 768px) { .raat-smal { display: none; } .raat-breed { display: block; } }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; justify-content: center; margin-top: 1rem; font: 500 11px/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .08em; color: var(--zacht); }
.legenda li { display: inline-flex; align-items: center; gap: .45rem; }
.legenda .vlak { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--lijn); }
.vlak.deel-1 { background: var(--tint-1); } .vlak.deel-2 { background: var(--tint-2); } .vlak.deel-3 { background: var(--tint-3); }
@media (min-width: 768px) { .legenda { display: none; } }
.raat-noot { margin-top: 1rem; text-align: center; font-size: 14px; line-height: 1.4; color: var(--zacht); }

.halo { stroke: none; }
.halo.deel-1 { fill: var(--tint-1); } .halo.deel-2 { fill: var(--tint-2); } .halo.deel-3 { fill: var(--tint-3); }
.raat-lijn { fill: none; stroke: var(--accent-zacht); stroke-width: 1.5; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; }
.raat-label { font: 500 12px/1 var(--font-label); text-transform: uppercase; letter-spacing: .1em; fill: var(--zacht); }

.cel-a { outline: none; cursor: default; }
a.cel-a { cursor: pointer; }
.cel .vorm { fill: var(--papier); stroke: var(--azul); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 150ms cubic-bezier(.4, 0, .2, 1); }
.cel .ring { fill: none; stroke: var(--azul); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; }
.cel-nr { font-family: var(--font-label); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .08em; fill: var(--accent-zacht); }
.raat-breed .cel-nr { font-size: 13px; } .raat-smal .cel-nr { font-size: 12px; }
.cel-ico, .vink { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cel-ico { color: var(--azul); }
.vink { color: var(--azul); stroke-width: 2; display: none; }
.cel.is-gelezen .vink { display: inline; }
a.cel-a:hover .vorm, a.cel-a:focus-visible .vorm, .cel.is-gekozen .vorm { fill: var(--tint-hover); }
a.cel-a:focus-visible .ring, .cel.is-gekozen .ring { opacity: 1; }
.cel.gepland .vorm { stroke: var(--rand-gepland); stroke-dasharray: 4 5; stroke-linecap: round; }
.cel.gepland .cel-nr { fill: var(--zacht); }
.cel.gepland .cel-ico { color: var(--stil); opacity: .7; }
.cel.gepland.is-gekozen .vorm { fill: var(--tint-hover); }
.cel.gepland.is-gekozen .ring { stroke: var(--stil); stroke-width: 1.5; stroke-dasharray: 4 5; }
.raat-actief .cel.gepland .cel-a { cursor: pointer; }

@keyframes cel-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes halo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lijn-teken { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.cel { transform-box: fill-box; transform-origin: center; animation: cel-in 520ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
.cel[data-i="0"] { --i: 0; } .cel[data-i="1"] { --i: 1; } .cel[data-i="2"] { --i: 2; } .cel[data-i="3"] { --i: 3; } .cel[data-i="4"] { --i: 4; } .cel[data-i="5"] { --i: 5; } .cel[data-i="6"] { --i: 6; } .cel[data-i="7"] { --i: 7; } .cel[data-i="8"] { --i: 8; } .cel[data-i="9"] { --i: 9; } .cel[data-i="10"] { --i: 10; } .cel[data-i="11"] { --i: 11; } .cel[data-i="12"] { --i: 12; } .cel[data-i="13"] { --i: 13; } .cel[data-i="14"] { --i: 14; } .cel[data-i="15"] { --i: 15; }
.raat-halos, .raat-labels { animation: halo-in 600ms ease-out both; }
.raat-lijn { stroke-dasharray: 1; animation: lijn-teken 900ms cubic-bezier(.4, 0, .2, 1) both; animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) {
  .cel, .raat-halos, .raat-labels, .raat-lijn, .fade-up { animation: none; }
  .raat-lijn { stroke-dasharray: none; }
}

.raat-kaartje { display: none; }
.raat-actief .raat-kaartje { display: block; margin: 1.25rem auto 0; max-width: 44rem; min-height: 22rem; padding: 1.25rem 1.5rem; background: var(--veld); border-radius: 0 6px 6px 6px; }
.kaartje-leeg { display: flex; align-items: center; gap: .6rem; height: 18rem; justify-content: center; color: var(--zacht); font-size: 15px; }
.kaartje-leeg .ik { color: var(--accent-zacht); }
.kaartje[hidden], .kaartje-leeg[hidden], .gelezen-stempel[hidden] { display: none; }
.kaartje-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.kaartje-top .stempel { margin-left: 0; }
.kaartje-titel { font: 600 clamp(19px, 3vw, 22px)/1.3 var(--font-heading); letter-spacing: -.01em; color: var(--inkt); overflow-wrap: anywhere; }
.kaartje-onder { margin-top: .4rem; color: var(--zacht); overflow-wrap: anywhere; }
.kaartje-chips { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.kaartje-actie { margin-top: 1rem; min-height: 40px; display: flex; align-items: center; }
.in-voorbereiding { font: 500 14px/1.3 var(--font-sans); color: var(--zacht); border: 1px dashed var(--lijn); border-radius: 99px; padding: .4rem .9rem; }
[data-theme="dark"] .raat-kaartje, [data-theme="dark"] .kaartje { color-scheme: dark; }
@media (min-width: 480px) { .raat-actief .raat-kaartje { min-height: 20rem; } .kaartje-leeg { height: 17rem; } }
@media (min-width: 768px) { .raat-actief .raat-kaartje { min-height: 16.5rem; } .kaartje-leeg { height: 13.5rem; } }