/**
 * Opbouw van een pagina: menubalk, kop, titelbalk, inhoudsvlak en voet.
 *
 * De indeling volgt de huidige site: een donkere menubalk bovenaan, daaronder
 * een witte balk met de naam van de site en het zoekvak, dan een donkere
 * titelbalk met het kruimelpad en de paginatitel, en daaronder het witte
 * inhoudsvlak op een grijze achtergrond.
 */

/* De inhoud staat overal binnen dezelfde breedte. */
.dwt-wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 10px;
}

/* ------------------------------------------------------------------- kop */

/* Eén kopblok in plaats van een losse strook boven een balk. De links stonden
   eerst in een eigen donkere strook bóven de kopbalk; nu zitten ze erin, op
   dezelfde grond, met alleen een lijntje ertussen. Er stond ook een losse
   HOME-knop naast het zoekvak: die was dubbelop, want HOME is het eerste
   menu-onderdeel. */

.dwt-kopbalk {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.dwt-kop__boven {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 14px;
}

/* --- merk --- */

.dwt-merk {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--accent);
}

.dwt-merk:hover,
.dwt-merk:focus-visible {
    text-decoration: none;
}

/* Het uitje draagt de twee kleuren van het systeem: de buitenste schil in het
   accent, de kern in Tor-groen. */
.dwt-merk__ui {
    width: 24px;
    height: 30px;
    flex: none;
}

.dwt-merk__naam {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--heading);
    text-decoration: none;
}

.dwt-merk:hover .dwt-merk__naam,
.dwt-merk:focus-visible .dwt-merk__naam {
    color: var(--accent);
}

/* De onderregel telt 66 tekens waar die van IACA er 26 heeft, dus hij staat op
   .12em in plaats van .26em; anders is de kop alleen aan dit regeltje ruim
   500px kwijt. Onder 760px valt hij weg en blijft de naam staan. */
.dwt-merk__onder {
    display: block;
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* --- zoekvak en licht/donker --- */

.dwt-kop__rechts {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dwt-kop__zoek {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Zonder JavaScript kan het zoekvak niets, dus dan staat het er niet. De
   display hierboven zou het attribuut hidden anders overrulen. */
.dwt-kop__zoek[hidden] {
    display: none;
}

/* Het kruisje staat in het veld, tegen de knop aan. */
.dwt-kop__wis {
    padding: 0 10px;
    border: 1px solid var(--border-2);
    border-left: 0;
    border-right: 0;
    background: var(--surface);
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.dwt-kop__wis[hidden] {
    display: none;
}

.dwt-kop__wis:hover,
.dwt-kop__wis:focus-visible {
    color: var(--heading);
}

/* Het venster met resultaten, onder het zoekvak en rechts uitgelijnd. */
.dwt-zoekvenster {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 420px;
    max-width: calc(100vw - 20px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px 0;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
    text-align: left;
}

.dwt-zoekvenster[hidden] {
    display: none;
}

.dwt-zoekvenster__groep + .dwt-zoekvenster__groep {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 6px;
}

.dwt-zoekvenster__kop {
    margin: 4px 14px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.dwt-zoekvenster__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dwt-zoekvenster__item {
    padding: 6px 14px;
}

.dwt-zoekvenster__naam {
    display: block;
    font-weight: 600;
    color: var(--heading);
    overflow-wrap: anywhere;
}

.dwt-zoekvenster__uitleg {
    display: block;
    font-size: 14px;
    color: var(--steel);
}

.dwt-zoekvenster__melding,
.dwt-zoekvenster__meer {
    margin: 6px 14px;
    font-size: 14px;
    color: var(--text-dim);
}

.dwt-kop__zoek .dwt-veld {
    width: 210px;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    border-right: 0;
    font-size: 15px;
    padding: 9px 12px;
}

.dwt-kop__zoek .dwt-knop {
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* --- menu, nu binnen het kopblok --- */

.dwt-menubalk {
    border-top: 1px solid var(--border);
}

/* Vier onderdelen op een regel, links uitgelijnd. Negen stonden er maar net op
   en vielen bij de minste versmalling om; de vier groepen laten ruimte over. */
.dwt-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dwt-menu a {
    display: block;
    padding: 11px 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .18s var(--ease), border-color .18s var(--ease);
    white-space: nowrap;
}

.dwt-menu a:hover,
.dwt-menu a:focus-visible,
.dwt-menu [aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-decoration: none;
}

/* --- uitklapmenu --- */

/* Negen onderdelen pasten maar net op een regel en vielen bij de minste
   versmalling om. Ze staan nu in vier groepen: Home, Search, Links (de
   verzamelingen onion-adressen) en Reference (het naslagmateriaal). Alle negen
   bestemmingen zijn er nog.

   Opent op zweven en op toetsenbordfocus, zonder JavaScript. :focus-within doet
   het werk voor wie met Tab navigeert. */

.dwt-heeft-sub {
    position: relative;
}

.dwt-menu__groep {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    cursor: default;
    white-space: nowrap;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}

.dwt-menu__groep[aria-current="true"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.dwt-heeft-sub:hover .dwt-menu__groep,
.dwt-heeft-sub:focus-within .dwt-menu__groep {
    color: var(--accent);
}

.dwt-chevron {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform .18s var(--ease);
}

.dwt-heeft-sub:hover .dwt-chevron,
.dwt-heeft-sub:focus-within .dwt-chevron {
    transform: rotate(180deg);
}

.dwt-submenu {
    position: absolute;
    top: 100%;
    left: -14px;
    z-index: 20;
    min-width: 250px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
}

.dwt-heeft-sub:hover .dwt-submenu,
.dwt-heeft-sub:focus-within .dwt-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dwt-submenu a {
    padding: 8px 12px;
    margin: 0;
    border-bottom: 0;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.dwt-submenu a:hover,
.dwt-submenu a:focus-visible,
.dwt-submenu [aria-current="page"] {
    background: var(--accent-soft);
    border-bottom-color: transparent;
}

/* De knop staat er alleen op smalle schermen; zie onderaan. */
.dwt-menuknop {
    display: none;
}

/* -------------------------------------------------------------- titelbalk */

.dwt-paginakop {
    padding: 35px 0;
    background: var(--navy);
    text-align: center;
}

.dwt-kruimel {
    margin-bottom: 8px;
    color: var(--heading);
    font-size: 12px;
    text-transform: uppercase;
}

.dwt-kruimel a {
    color: var(--accent);
    text-decoration: none;
}

.dwt-kruimel a:hover {
    text-decoration: underline;
}

.dwt-kruimel__scheiding {
    margin: 0 6px;
    color: var(--heading);
}

.dwt-paginatitel {
    margin: 0;
    padding-bottom: 15px;
    color: var(--heading);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Het blauwe streepje onder de titel. */
.dwt-paginatitel::after {
    content: "";
    display: block;
    width: 40px;
    margin: 15px auto 0;
    border-top: 3px solid var(--accent);
}

/* ---------------------------------------------------------- inhoudsvlak */

.dwt-inhoud {
    padding: 30px 0;
}

.dwt-paneel {
    padding: 20px;
    background: var(--surface);
}

/* Rechtsboven in het paneel, zoals "Suggestions for this page?" nu staat. */
.dwt-paneel__hoek {
    margin-bottom: 10px;
    text-align: right;
}

/* Een blok binnen het paneel, met een streep eronder als scheiding. */
.dwt-blok + .dwt-blok {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
}

/* De koppen binnen het paneel staan op de huidige site met een bolletje
   ervoor, als aftakking van een opsomming. */
.dwt-blok__kop {
    position: relative;
    margin: 0 0 20px 18px;
    color: var(--heading);
    font-size: 18px;
    font-weight: 700;
}

.dwt-blok__kop::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: -18px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border);
}

/* --------------------------------------------------------------- kaarten */

/* De drie blokken op de homepagina. */
.dwt-kaarten {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.dwt-kaart {
    padding: 20px;
    background: var(--surface);
}

.dwt-kaart img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.dwt-kaart__titel {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
}

.dwt-kaart p {
    margin-bottom: 20px;
}

/* ------------------------------------------------------------------ voet */

/* De voet staat onderaan het venster, ook als de pagina korter is dan het
   scherm: de inhoud rekt mee en duwt hem naar beneden. Op een lange pagina
   verandert er niets. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main {
    flex: 1 0 auto;
}

/* Stond op een kale #333 op een donker vlak: onleesbaar. Die ene waarde was bij
   de omzetting naar tokens blijven staan, want ik zocht op tokennamen en niet op
   hexwaarden. */
.dwt-voet {
    padding: 26px 0;
    background: var(--navy-900);
    color: var(--steel);
    font-size: 13px;
    border-top: 1px solid var(--border);
}

.dwt-voet p {
    margin: 0;
}

/* Copyright links, knoppen rechts. Op een smal scherm onder elkaar. */
.dwt-voet__rij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
}

.dwt-voet__tekst {
    letter-spacing: .04em;
}

.dwt-voet__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Slanker dan .dwt-knop: dit zijn bijzaken, geen oproep om te klikken. De
   link en de knop krijgen dezelfde vorm, want het zijn twee ingangen tot
   hetzelfde onderwerp. */
.dwt-voet__knop {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}

/* De cookieknop staat op hidden tot het script draait; zonder deze regel wint
   display: inline-flex het van het attribuut. */
.dwt-voet__knop[hidden] {
    display: none;
}

.dwt-voet__knop:hover,
.dwt-voet__knop:focus-visible {
    border-color: var(--success);
    color: var(--success);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .dwt-voet__knop { transition: none; }
}

/* ------------------------------------------------------- terug naar boven */

.dwt-omhoog {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--navy);
    color: var(--heading);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}

.dwt-omhoog:hover,
.dwt-omhoog:focus-visible {
    background: var(--brand);
    color: var(--heading);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
    .dwt-kaarten {
        grid-template-columns: repeat(2, 1fr);
    }

    .dwt-menu a {
        padding: 0 10px;
    }
}

@media (max-width: 700px) {
    /* Het menu klapt open met een aankruisvakje, zodat er geen JavaScript
       nodig is voor iets wat ook zonder moet werken. */
    .dwt-menuknop {
        display: block;
        padding: 16px 10px;
        color: var(--heading);
        font-weight: 300;
        cursor: pointer;
        user-select: none;
    }

    .dwt-menuknop::before {
        content: "\2630\00a0\00a0";
    }

    .dwt-menu {
        display: none;
        flex-direction: column;
    }

    .dwt-menu-schakelaar:checked ~ .dwt-menu {
        display: flex;
    }

    /* Uitgeklapt menu: elk onderdeel op een eigen regel, met een lijn ertussen
       in plaats van de onderstreping die op breed scherm de huidige pagina
       aanwijst. */
    .dwt-menu a {
        padding: 0 2px;
        margin-right: 0;
        line-height: 38px;
        border-bottom: 0;
        border-top: 1px solid var(--border);
    }

    .dwt-menu a:hover,
    .dwt-menu a:focus-visible,
    .dwt-menu [aria-current="page"] {
        border-bottom-color: transparent;
    }

    /* Op een telefoon is er geen zweven en geen ruimte om te laten uitklappen,
       dus staat alles gewoon onder elkaar. De groepsnaam wordt een tussenkopje. */
    .dwt-menu__groep {
        padding: 12px 2px 4px;
        border-top: 1px solid var(--border);
        border-bottom: 0;
        color: var(--accent);
        font-size: 11px;
        letter-spacing: .16em;
    }

    .dwt-chevron {
        display: none;
    }

    .dwt-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .dwt-submenu a {
        border-top: 0;
        padding: 0 12px;
    }

    .dwt-kop__boven {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* De onderregel van het merk telt 66 tekens; op een telefoon vult die twee
       regels en duwt hij het zoekvak weg. */
    .dwt-merk__onder {
        display: none;
    }

    .dwt-kop__rechts {
        width: 100%;
    }

    .dwt-kop__zoek {
        flex: 1 1 auto;
        width: 100%;
    }

    .dwt-kop__zoek .dwt-veld {
        flex: 1 1 auto;
        width: auto;
    }

    .dwt-zoekvenster {
        width: 100%;
        max-width: none;
    }

    .dwt-kaarten {
        grid-template-columns: 1fr;
    }

    .dwt-paginatitel {
        font-size: 20px;
    }

    .dwt-paneel {
        padding: 15px;
    }
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* De oude homepage was een neon-stockfoto met daaronder drie kaarten met
   AI-plaatjes en een lange kolom tekstblokken. De plaatjes zeiden niets over
   deze site en de kolom liet niet zien wat er te halen valt. De tekst is
   ongewijzigd; alleen de indeling en het beeld zijn nieuw. */

.dwt-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 68px;
    background: var(--navy);
    border-bottom: 1px solid var(--border);
}

/* Uienringen in plaats van een foto: het motief van Tor, in CSS, dus geen
   bestand en geen verzoek naar buiten. Ze staan rechts en lopen deels buiten
   beeld, zodat het achtergrond blijft en geen plaatje wordt. */
.dwt-ringen {
    position: absolute;
    top: 50%;
    right: -60px;
    width: 520px;
    height: 520px;
    transform: translateY(-50%);
    pointer-events: none;
}

.dwt-ringen i {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid var(--accent);
    border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
    transform: translate(-50%, -50%);
}

.dwt-ringen i:nth-child(1) { width: 500px; height: 500px; opacity: .10; }
.dwt-ringen i:nth-child(2) { width: 380px; height: 380px; opacity: .14; }
.dwt-ringen i:nth-child(3) { width: 260px; height: 260px; opacity: .18; }
.dwt-ringen i:nth-child(4) { width: 140px; height: 140px; opacity: .30; border-color: var(--success); }

.dwt-hero .dwt-wrap {
    position: relative;
}

.dwt-hero h1 {
    margin: 14px 0 0;
    max-width: 24ch;
}

.dwt-hero .dwt-inleiding {
    margin-top: 16px;
}

.dwt-hero__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

/* --- de drie ingangen --- */

/* Eerst waren dit drie kaarten met een accentrandje bovenaan. Dat is het
   patroon dat op elke willekeurige site staat en het zei niets over dit
   onderwerp. Nu is het een lijst met routes: per ingang drie relaisstippen en
   een pijl, hetzelfde beeld als de cursor en als een Tor-circuit. Bij het
   zweven lichten de stippen na elkaar op, alsof de verbinding wordt opgebouwd. */

.dwt-ingangen {
    /* auto in de zijkanten, anders overschrijft dit de centrering uit .dwt-wrap */
    margin: 44px auto 56px;
    border-top: 1px solid var(--border);
}

.dwt-ingang {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 26px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .18s var(--ease), padding-left .18s var(--ease);
}

.dwt-ingang:hover,
.dwt-ingang:focus-visible {
    background: var(--surface);
    padding-left: 14px;
    text-decoration: none;
}

/* Het circuit: drie stippen op een lijn. */
.dwt-ingang__route {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 10px;
}

.dwt-ingang__route::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 1px;
    background: var(--border-2);
}

.dwt-ingang__route i {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--accent);
    transition: background .2s var(--ease), border-color .2s var(--ease);
}

.dwt-ingang:hover .dwt-ingang__route i,
.dwt-ingang:focus-visible .dwt-ingang__route i {
    background: var(--success);
    border-color: var(--success);
}

/* Na elkaar, zodat het lijkt alsof de verbinding wordt opgebouwd. */
.dwt-ingang:hover .dwt-ingang__route i:nth-child(2) { transition-delay: .07s; }
.dwt-ingang:hover .dwt-ingang__route i:nth-child(3) { transition-delay: .14s; }

.dwt-ingang__kop {
    display: block;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--heading);
    transition: color .18s var(--ease);
}

.dwt-ingang:hover .dwt-ingang__kop,
.dwt-ingang:focus-visible .dwt-ingang__kop {
    color: var(--accent);
}

.dwt-ingang__tekst {
    display: block;
    margin-top: 2px;
    color: var(--steel);
}

.dwt-ingang__actie {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
    transition: transform .18s var(--ease);
}

.dwt-ingang:hover .dwt-ingang__actie,
.dwt-ingang:focus-visible .dwt-ingang__actie {
    transform: translateX(4px);
}

/* --- de tekstblokken --- */

.dwt-home__raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-bottom: 76px;
}

.dwt-blok {
    padding: 24px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.dwt-blok--breed {
    grid-column: 1 / -1;
}

.dwt-blok h2 {
    margin: 0 0 14px;
    font-size: 16px;
    letter-spacing: .05em;
}

.dwt-blok p:last-child {
    margin-bottom: 0;
}

/* De belofte dat er niets wordt gelogd is waar deze site zich mee onderscheidt,
   dus die staat er niet als zomaar een alinea bij. */
.dwt-blok--belofte {
    border-left: 2px solid var(--success);
}

.dwt-blok--belofte h2 {
    color: var(--success);
}

/* Veiligheidsinformatie: hoort eruit te springen, want wie dit overslaat loopt
   een risico. */
.dwt-blok--letop {
    border-left: 2px solid var(--amber);
}

.dwt-blok--letop h2 {
    color: var(--amber);
}

.dwt-blok--boek {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 22px;
    align-items: start;
}

.dwt-blok--boek h2 {
    grid-column: 1 / -1;
}

.dwt-blok--boek img {
    border-radius: var(--r-sm);
}

@media (max-width: 900px) {
    .dwt-ingang {
        grid-template-columns: 1fr auto;
        gap: 8px 16px;
    }

    /* Het circuitje valt weg op een telefoon: daar is geen zweven, dus het zou
       een stilstaand plaatje zijn dat alleen ruimte kost. */
    .dwt-ingang__route {
        display: none;
    }

    .dwt-home__raster {
        grid-template-columns: 1fr;
    }

    .dwt-blok--boek {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dwt-hero {
        padding: 48px 0 44px;
    }

    /* De ringen zijn achtergrond; op een telefoon zouden ze de tekst kruisen. */
    .dwt-ringen {
        display: none;
    }
}

/* --- de voortgangsbalk --- */

/* Het enige sierverloop van de huisstijl, van accentpaars naar Tor-groen, op
   dezelfde plek en in dezelfde rol als bij IACA. Zet er nooit tekst in. */
.dwt-voortgang {
    height: 2px;
    background: var(--surface-2);
}

.dwt-voortgang i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    transform: scaleX(0);
    transform-origin: left center;
}

/* --- de stand van de lijst --- */

.dwt-stand-plek:empty {
    display: none;
}

.dwt-stand {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.dwt-stand__vak {
    flex: 1 1 130px;
    padding: 15px 20px;
    border-right: 1px solid var(--border);
}

.dwt-stand__vak:last-child {
    border-right: 0;
}

.dwt-stand__vak b {
    display: block;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--heading);
    font-variant-numeric: tabular-nums;
}

.dwt-stand__vak.is-op b    { color: var(--success); }
.dwt-stand__vak.is-neer b  { color: var(--danger); }

.dwt-stand__vak span {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

@media (max-width: 760px) {
    .dwt-stand__vak {
        flex: 1 1 50%;
        border-bottom: 1px solid var(--border);
    }
}