/* ---------------------------------------------------------------------------
   De zoekschermen van Tuchtrecht.online, WWFT-Poortwachter en Staatsbladen.

   Op 7 oktober 2026 omgezet naar de huisstijl van variascripta.nl en
   iustitiascripta.com, volgens het voorstel "Zoekschermen Scripta Media":

   - het formulier staat open; de velden die minder vaak nodig zijn staan
     onder "Meer zoekvelden" (een <details>, dat vanzelf openstaat als er
     iets in is ingevuld);
   - elk veld heeft een label boven het veld in plaats van alleen grijze
     tekst erin;
   - de resultaten staan als lijst, met datum en instantie links;
   - geen afgeronde hoeken, geen schaduwen, dunne lijnen. De dubbele lijn
     boven het zoekpaneel is dezelfde als boven de berichten op Varia en
     Iustitia.

   Voorouders en de feedbackpagina's gebruiken nog shared/search.css. Dat
   bestand is daarom blijven staan.

   Alles hangt onder .zk, zodat niets hiervan buiten de zoekschermen lekt.
   --------------------------------------------------------------------------- */

.zk {
    --zk-donker: #004c4c;       /* accent onder de muis, als op iustitiascripta.com */
    --zk-vlak: #e5f0ef;         /* lichte vlakken en meldingen */
    --zk-tekst: #2d3432;
    color: var(--zk-tekst);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.65;
}

.zk b, .zk strong { font-weight: 500; }

.zk-omhulsel {
    max-width: var(--sm-breedte);
    margin: 0 auto;
    padding: 0 24px;
}

/* Een smallere kolom, voor de feedbackpagina's. */
.zk-omhulsel.zk-smal { max-width: 720px; }

/* --- De kop van de pagina ---------------------------------------------- */

.zk-kop { padding: 44px 0 24px; }

.zk-etiket {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 400;
    color: var(--sm-grijs);
    margin-bottom: 8px;
}

.zk h1, .zk h2, .zk h3 {
    font-family: var(--sm-schreef);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.zk-kop h1 {
    font-size: 2.3rem;
    letter-spacing: -.01em;
    color: var(--sm-accent);
    margin: 0 0 .35em;
}

.zk-kop p { max-width: 62ch; margin: 0; }

/* --- Het zoekpaneel ---------------------------------------------------- */

.zk-paneel {
    border: 1px solid var(--sm-lijn);
    border-top: 4px double var(--sm-inkt);
    background: var(--sm-wit);
    padding: 26px 30px 24px;
    display: grid;
    gap: 18px;
}

.zk-label {
    display: block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 400;
    color: var(--sm-grijs);
    margin: 0 0 5px;
}

.zk-veld { position: relative; min-width: 0; }

.zk input[type="text"],
.zk input[type="date"],
.zk select,
.zk textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    font-weight: 300;
    color: var(--zk-tekst);
    background: var(--sm-wit);
    border: 1px solid var(--sm-lijn);
    border-radius: 0;
    padding: 10px 12px;
    height: 46px;
}

.zk textarea { height: auto; min-height: 110px; line-height: 1.6; }

.zk input::placeholder,
.zk textarea::placeholder { color: var(--sm-grijs-licht); }

.zk input:focus,
.zk select:focus,
.zk textarea:focus {
    outline: 2px solid var(--sm-accent);
    outline-offset: 1px;
    border-color: var(--sm-accent);
}

.zk select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background: var(--sm-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b6459' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
}

/* Velden met een keuzelijst houden ruimte vrij voor het pijltje. */
.zk-veld.met-lijst input[type="text"] { padding-right: 40px; }

/* De bovenste rij: hoofdveld en de knop Zoeken. */
.zk-hoofd {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.zk-hoofd.zonder-keuze { grid-template-columns: minmax(0, 1fr) auto; }
.zk-hoofd.staatsblad { grid-template-columns: 120px 120px minmax(0, 1fr) auto; }

.zk-hoofd .zk-groot input[type="text"] { height: 54px; font-size: 1.1rem; }
.zk-hoofd select,
.zk-hoofd input[type="text"] { height: 54px; }

/* Knoppen ------------------------------------------------------------- */

.zk-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    height: 54px;
    padding: 0 34px;
    background: var(--sm-accent);
    border: 1px solid var(--sm-accent);
    border-radius: 0;
    color: var(--sm-wit);
    font-size: .78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.zk-knop:hover {
    background: var(--zk-donker);
    border-color: var(--zk-donker);
    color: var(--sm-wit);
    text-decoration: none;
}

.zk-knop.klein { height: 40px; padding: 0 20px; font-size: .74rem; }

.zk-knop.leeg { background: transparent; color: var(--sm-accent); }
.zk-knop.leeg:hover { background: var(--sm-accent); color: var(--sm-wit); }

.zk-knop:disabled,
.zk-knop:disabled:hover {
    background: transparent;
    border-color: var(--sm-lijn);
    color: var(--sm-grijs-licht);
    cursor: default;
}

.zk-knop:focus-visible,
.zk-link:focus-visible,
.zk-klein:focus-visible,
.zk summary:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
}

/* Een kleine omlijnde knop, zoals .deel op variascripta.nl. */
.zk-klein {
    display: inline-block;
    border: 1px solid var(--sm-lijn);
    background: var(--sm-wit);
    padding: 6px 12px;
    font-size: .7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--zk-tekst);
    border-radius: 0;
    cursor: pointer;
}

.zk-klein:hover {
    border-color: var(--sm-accent);
    color: var(--sm-accent);
    text-decoration: none;
}

/* Een link in kleine kapitalen, voor "Uitspraak lezen" en dergelijke. */
.zk-link {
    font-size: .74rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--sm-accent);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.zk-link:hover { color: var(--zk-donker); }

/* --- Opties onder het hoofdveld ----------------------------------------- */

.zk-opties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
    font-size: .95rem;
}

/* Alle woorden / een van de woorden. Twee keuzerondjes die eruitzien als
   een tweedelige schakelaar. Het eerste rondje heeft het oude id (checkAnd),
   zodat het script dat de keuzelijsten vult er nog steeds .checked op leest. */
.zk-schakel {
    display: inline-flex;
    border: 1px solid var(--sm-lijn);
    margin: 0;
    padding: 0;
    min-width: 0;
}

.zk-schakel legend {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.zk-schakel input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}

.zk-schakel label {
    font-size: .7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 6px 12px;
    color: var(--zk-tekst);
    cursor: pointer;
    margin: 0;
    line-height: 1.5;
}

.zk-schakel label + input + label { border-left: 1px solid var(--sm-lijn); }
.zk-schakel input:checked + label { background: var(--zk-vlak); color: var(--sm-accent); }
.zk-schakel input:focus-visible + label { outline: 2px solid var(--sm-accent); outline-offset: -2px; }

.zk-schakel.klein label { padding: 3px 9px; font-size: .64rem; }

.zk-vink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    margin: 0;
}

.zk-vink input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--sm-accent);
    flex: none;
}

.zk-hulp {
    font-size: .85rem;
    color: var(--sm-grijs);
    margin: 4px 0 0;
}

/* --- Meer zoekvelden ------------------------------------------------------ */

.zk-rooster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 22px;
}

.zk-meer { border-top: 1px solid var(--sm-lijn-fijn); padding-top: 14px; }

.zk-meer summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .74rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--sm-accent);
}

.zk-meer summary::-webkit-details-marker { display: none; }

.zk-meer summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}

.zk-meer[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.zk-meer[open] > .zk-rooster { margin-top: 16px; }

.zk-periode {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.zk-periode > span { font-size: .9rem; color: var(--sm-grijs); }

/* Een label met rechts een kleine schakelaar ernaast. */
.zk-label-rij {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 5px;
}

.zk-label-rij .zk-label { margin: 0; }

.zk-onder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.zk-redactie {
    background: var(--zk-vlak);
    border-left: 2px solid var(--sm-accent);
    padding: 16px 18px 18px;
    margin-top: 16px;
}

.zk-redactie h3 {
    font-size: 1rem;
    color: var(--sm-inkt);
    margin: 0 0 12px;
}

/* --- Keuzelijsten bij een veld ------------------------------------------
   De klassen en id's (dd-N, down-N, up-N) komen uit pages.js en zijn
   ongewijzigd. Bootstrap zet d-none; de lijst gaat open met
   .search-dropdown-active. */

.zk .search-dropdown-button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sm-grijs);
    font-size: 18px;
    cursor: pointer;
    z-index: 3;
}

.zk-hoofd .search-dropdown-button { height: 54px; }

.zk .search-dropdown-button:hover { color: var(--sm-accent); }

.zk .search-dropdown {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--sm-wit);
    max-height: 0;
    overflow: auto;
    font-size: .95rem;
}

.zk .search-dropdown-active {
    max-height: 240px;
    border: 1px solid var(--sm-accent);
    border-top: 0;
}

.zk .search-dropdown li {
    padding: 7px 12px;
    border-bottom: 1px solid var(--sm-lijn-fijn);
    cursor: pointer;
}

.zk .search-dropdown li:last-child { border-bottom: 0; }
.zk .search-dropdown li:hover { background: var(--sm-papier); color: var(--sm-accent); }

/* --- Uitleg en blokken (het open voorbeeld van Tuchtrecht) ------------------
   Lopende tekst boven een zoekscherm, in de kolombreedte van een tekstpagina
   maar links uitgelijnd met het zoekpaneel; en een kop boven elk blok. */

.zk-uitleg { max-width: 760px; }
.zk-uitleg h2 { font-size: 1.4rem; color: var(--sm-accent); margin: 1.6em 0 .5em; }
.zk-uitleg p { margin: 0 0 1em; }
.zk-uitleg ul { padding-left: 1.3em; margin: 0 0 1.2em; }
.zk-uitleg li { margin-bottom: .4em; }
.zk-uitleg li::marker { color: var(--sm-grijs-licht); }
.zk-uitleg a:not([class]) { color: var(--sm-accent); text-decoration: underline; text-underline-offset: 3px; }

.zk-blokkop {
    font-size: 1.45rem;
    color: var(--sm-inkt);
    margin: 48px 0 14px;
    scroll-margin-top: 24px;
}

.zk-blokkop + p { max-width: 62ch; }

/* De afsluitende alinea onder aan de pagina. */
.zk-slot { padding: 40px 0 56px; }

/* --- De resultaten ------------------------------------------------------- */

.zk-resultaten { padding: 36px 0 8px; scroll-margin-top: 90px; }

.zk-reskop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 20px;
    border-bottom: 1px solid var(--sm-inkt);
    padding-bottom: 10px;
}

.zk-reskop h2 { font-size: 1.45rem; color: var(--sm-inkt); margin: 0; }
.zk-reskop span { font-size: .88rem; color: var(--sm-grijs); }

/* Volgorde van de resultaten: nieuwste, oudste of relevantie. */
.zk-sorteer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: .88rem;
    color: var(--sm-grijs);
}

.zk-sorteer > span {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 400;
}

.zk .zk-sorteer select {
    width: auto;
    height: 36px;
    padding: 4px 34px 4px 10px;
    font-size: .9rem;
    background-position: right 12px center;
}

.zk-melding {
    background: var(--zk-vlak);
    border-left: 2px solid var(--sm-accent);
    padding: 12px 16px;
    font-size: .95rem;
    margin: 16px 0 0;
}

.zk-lijst { list-style: none; margin: 0; padding: 0; }

.zk-rij {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 28px;
    padding: 22px 0;
    border-bottom: 1px solid var(--sm-lijn);
}

.zk-wanneer {
    font-family: var(--sm-schreef);
    font-weight: 700;
    color: var(--sm-inkt);
    font-variant-numeric: tabular-nums;
}

.zk-wie {
    font-size: .74rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sm-grijs);
    line-height: 1.45;
    margin-top: 4px;
    overflow-wrap: anywhere;
}

.zk-titel {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.zk-titel a {
    font-family: var(--sm-schreef);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--sm-accent);
    overflow-wrap: anywhere;
}

.zk-titel a:hover { color: var(--zk-donker); }

.zk-titel small {
    font-size: .74rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sm-grijs);
}

.zk-samenvatting {
    margin: 6px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zk-onderwerp { font-size: .88rem; color: var(--sm-grijs); margin: 0 0 10px; }
.zk-onderwerp b { font-weight: 400; color: var(--zk-tekst); }

.zk-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }

/* Bladeren. */
.zk-bladeren {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 22px 0 8px;
}

.zk-bladeren form { margin: 0; }
.zk-bladeren p { margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; }

/* --- Het samenvattingsvenster (WWFT) --------------------------------------
   pages.js zet .show op #popup en .overlay; de inhoud van
   .search-popup-content gaat ongewijzigd naar de pdf. */

.zk .overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 31, 30, .45);
    z-index: 1040;
}

.zk .search-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--sm-wit);
    border: 1px solid var(--sm-lijn);
    border-top: 4px double var(--sm-inkt);
    z-index: 1050;
}

.zk .overlay.show,
.zk .search-popup.show { display: block; }

.zk-venster-kop {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 28px 16px;
    border-bottom: 1px solid var(--sm-lijn);
}

.zk-venster-kop h2 {
    font-size: 1.5rem;
    color: var(--sm-accent);
    margin: 0;
    overflow-wrap: anywhere;
}

.zk-sluit {
    background: none;
    border: 0;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--sm-grijs);
    padding: 0 4px;
    cursor: pointer;
}

.zk-sluit:hover { color: var(--sm-accent); }

.zk-gegevens {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
    padding: 18px 28px;
    background: var(--sm-papier);
    border-bottom: 1px solid var(--sm-lijn);
}

.zk .search-popup-content h5,
.zk-gegevens h5 {
    font-family: var(--sm-schreefloos);
    font-size: .72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sm-grijs);
    margin: 0 0 2px;
}

.zk-gegevens p { margin: 0; color: var(--sm-inkt); font-size: .95rem; overflow-wrap: anywhere; }

.zk-venster-tekst { padding: 18px 28px 4px; }
.zk-venster-tekst p { margin: 0 0 16px; }

.zk-venster-voet {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 28px 22px;
}

body.overflow-hidden { overflow: hidden; }

/* --- De AI-zoekhulp ------------------------------------------------------ */

.zk-ai {
    margin: 44px 0 0;
    background: var(--sm-papier);
    border: 1px solid var(--sm-lijn);
}

.zk-ai-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 22px 30px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.zk-ai-titel {
    display: block;
    font-family: var(--sm-schreef);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.3;
    color: var(--sm-accent);
    margin-bottom: 2px;
}

.zk-ai-sub { display: block; font-size: .92rem; color: var(--sm-grijs); }

.zk-ai-kop:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: -2px; }

.zk-ai-pijl {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--sm-accent);
    border-bottom: 1.5px solid var(--sm-accent);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
}

.zk-ai-kop[aria-expanded="true"] .zk-ai-pijl { transform: translateY(3px) rotate(-135deg); }

.zk-ai-inhoud { padding: 0 30px 28px; display: grid; gap: 16px; }

.zk-ai-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .92rem; }
.zk-ai-links a { color: var(--sm-accent); text-decoration: underline; text-underline-offset: 3px; }

.zk-tegoed {
    border: 1px solid var(--sm-lijn);
    background: var(--sm-wit);
    padding: 10px 14px;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.zk-tegoed p { margin: 0 0 .4em; }

.zk-tegoed button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--sm-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.zk-bezig {
    display: none;
    border: 1px solid var(--sm-lijn);
    background: var(--sm-wit);
    padding: 22px 24px;
    text-align: center;
}

.zk-bezig p { margin: 14px auto 0; max-width: 60ch; font-size: .95rem; }

.zk-puls {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border: 2px solid var(--sm-accent);
    border-radius: 50%;
    animation: zk-puls 1.2s ease-in-out infinite alternate;
}

@keyframes zk-puls {
    from { transform: scale(.85); opacity: .4; }
    to   { transform: scale(1.05); opacity: 1; }
}

/* Het antwoord van de AI-zoekhulp. */
.zk-antwoord {
    margin: 32px 0 0;
    border: 1px solid var(--sm-lijn);
    border-top: 4px double var(--sm-inkt);
    background: var(--sm-wit);
    padding: 24px 30px 26px;
}

.zk-antwoord-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 14px;
}

.zk-antwoord-kop h2 { font-size: 1.45rem; color: var(--sm-inkt); margin: 0; }
.zk-antwoord-kop span { font-size: .88rem; color: var(--sm-grijs); font-variant-numeric: tabular-nums; }

.zk-vraag {
    background: var(--zk-vlak);
    border-left: 2px solid var(--sm-accent);
    padding: 12px 16px;
    margin-bottom: 20px;
}

.zk .result-answer { line-height: 1.7; margin-bottom: 22px; }
.zk .result-answer a { color: var(--sm-accent); font-weight: 500; text-decoration: underline; }

.zk-antwoord-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    border-top: 1px solid var(--sm-lijn);
    padding-top: 18px;
    font-size: .9rem;
    color: var(--sm-grijs);
}

.zk-antwoord-voet a.zk-link-tekst { color: var(--sm-accent); text-decoration: underline; text-underline-offset: 3px; }

/* De disclaimer die eenmalig verschijnt (cookie ai_disclaimer_accepted). */
.zk-disclaimer {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 31, 30, .55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.zk-disclaimer-venster {
    background: var(--sm-wit);
    border-top: 4px double var(--sm-inkt);
    max-width: 640px;
    width: 100%;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

.zk-disclaimer-venster h2 {
    font-size: 1.25rem;
    color: var(--sm-accent);
    margin: 0;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--sm-lijn);
}

.zk-disclaimer-tekst { padding: 16px 24px; overflow-y: auto; font-size: .95rem; }
.zk-disclaimer-tekst ul { padding-left: 1.2rem; }

.zk-disclaimer-voet {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--sm-lijn);
    text-align: right;
}

.zk-disclaimer-voet .zk-knop { white-space: normal; height: auto; min-height: 44px; padding: 10px 22px; }

/* Wachten op de redactionele noot (Tuchtrecht, knop "Redactionele noot"). */
#loadingScreen {
    position: fixed;
    inset: 0;
    background: rgba(26, 31, 30, .75);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 18px;
    color: var(--sm-wit);
    font-size: 1.1rem;
    z-index: 2000;
}

#loadingScreen.d-none { display: none !important; }

.zk-draaier {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: var(--sm-wit);
    border-radius: 50%;
    animation: zk-draai 1s linear infinite;
}

@keyframes zk-draai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .zk-puls, .zk-draaier { animation-duration: 3s; }
}

/* --- Smalle schermen ------------------------------------------------------ */

@media (max-width: 860px) {
    .zk-rooster,
    .zk-gegevens { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .zk-hoofd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .zk-hoofd .zk-groot { grid-column: 1 / -1; }
    .zk-hoofd .zk-knop { grid-column: 1 / -1; }
    .zk-hoofd.zonder-keuze { grid-template-columns: minmax(0, 1fr); }
    .zk-hoofd.staatsblad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .zk-omhulsel { padding: 0 16px; }
    .zk-kop { padding: 28px 0 18px; }
    .zk-kop h1 { font-size: 1.8rem; }
    .zk-paneel { padding: 20px 16px; }
    .zk-hoofd,
    .zk-hoofd.staatsblad { grid-template-columns: minmax(0, 1fr); }
    .zk-hoofd.staatsblad .zk-veld:nth-child(-n+2) { grid-column: auto; }
    .zk-rooster,
    .zk-gegevens { grid-template-columns: minmax(0, 1fr); }
    .zk-rij { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
    .zk-wanneer, .zk-wie { display: inline; }
    .zk-wie::before { content: " · "; }
    .zk-venster-kop, .zk-gegevens, .zk-venster-tekst, .zk-venster-voet { padding-left: 18px; padding-right: 18px; }
    .zk-ai-kop { padding: 18px 16px; }
    .zk-ai-inhoud { padding: 0 16px 22px; }
    .zk-antwoord { padding: 20px 16px; }
    .zk-bladeren .zk-knop { padding: 0 14px; }
}