/* DirtyOnline - 2026
 *
 * Written against the class names the templates already use, so the markup
 * stays put and only the appearance changes. The old stylesheet was the 2016
 * theme with new colours; this is a different layout: a grid that fills wide
 * screens instead of a fixed four columns, cards that lift, a header that
 * stays put while you scroll, and a menu that actually opens.
 *
 * No web fonts, no icon font, no framework. Everything here is one file.
 */

:root {
  --bg:        #0a0a0d;
  --bg-op:     #101014;
  --kaart:     #15151b;
  --kaart-op:  #1c1c24;
  --rand:      #26262f;
  --rand-fel:  #34343f;
  --tekst:     #ecedf1;
  --zacht:     #9b9baa;
  --zachter:   #6e6e7d;
  --accent:    #ff8a00;
  --accent-op: #ffa733;
  --accent-diep:#e05d00;
  --goed:      #37d67a;
  --r:         14px;
  --r-klein:   8px;
  --schaduw:   0 6px 24px rgba(0,0,0,.45);
  --overgang:  .18s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--bg);
  /* A very slight warmth at the top so the page is not a flat black slab. */
  background-image: radial-gradient(1200px 400px at 50% -180px, rgba(255,138,0,.10), transparent 70%);
  background-repeat: no-repeat;
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--overgang); }
a:hover { color: var(--accent-op); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: #fff; }
h2 { font-size: 1.2rem;  font-weight: 700; letter-spacing: -.01em; color: #fff; }
h3 { font-size: 1.05rem; font-weight: 650; color: #fff; }
p  { color: var(--zacht); }

.wrapper { max-width: 1680px; margin: 0 auto; padding: 0 22px; }
.clear   { clear: both; }

/* ---------------------------------------------------------------- header */

#header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,10,13,.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rand);
}

#header > .wrapper {
  display: flex; align-items: center; gap: 18px;
  height: 66px;
}

#logo {
  background: transparent url(images/logo.svg) no-repeat left center / contain;
  width: 168px; height: 42px; display: block; flex: 0 0 auto;
}

/* The search field grows into the space left over, and gets an orange ring
   when it has focus so it is obvious where the typing goes. */
#header form {
  flex: 1 1 auto; max-width: 560px; position: relative;
  display: flex; align-items: center;
}
#header form input {
  width: 100%; height: 42px;
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: 999px; color: var(--tekst);
  padding: 0 48px 0 18px; font-size: 14px;
  transition: border-color var(--overgang), box-shadow var(--overgang), background var(--overgang);
}
#header form input::placeholder { color: var(--zachter); }
#header form input:focus {
  outline: none; background: var(--kaart-op);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,138,0,.14);
}
#header form button {
  position: absolute; right: 5px; top: 5px;
  width: 32px; height: 32px; border: 0; border-radius: 999px;
  background: var(--accent); color: #17110a;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--overgang), transform var(--overgang);
}
#header form button:hover { background: var(--accent-op); transform: scale(1.06); }
#header form button .ico { width: 15px; height: 15px; }

.header-actions { margin-left: auto; flex: 0 0 auto; }
.toolbar.top { list-style: none; display: flex; align-items: center; gap: 8px; }
.toolbar.top a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 15px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--tekst);
  border: 1px solid var(--rand); background: var(--kaart);
  transition: all var(--overgang); white-space: nowrap;
}
.toolbar.top a:hover { border-color: var(--rand-fel); background: var(--kaart-op); color: #fff; }
.toolbar.top li:last-child a {
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  border-color: transparent; color: #1a1206;
}
.toolbar.top li:last-child a:hover { filter: brightness(1.08); color: #1a1206; }

/* --------------------------------------------------------------- navigatie */

#header .container { border-top: 1px solid var(--rand); }
#header .container > .wrapper { display: flex; align-items: center; gap: 10px; }

/* The hamburger only exists on narrow screens. */
.menu-knop {
  display: none; width: 40px; height: 40px; flex: 0 0 auto;
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r-klein); color: var(--tekst);
  cursor: pointer; place-items: center;
}
.menu-knop .balk { display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px; }
.menu-knop .balk + .balk { margin-top: 4px; }

ul#navigation {
  list-style: none; display: flex; align-items: center; gap: 4px;
  height: 52px; overflow: visible; flex: 1 1 auto;
}
ul#navigation > li > a {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  color: var(--zacht); font-size: 14px; font-weight: 600;
  white-space: nowrap; transition: all var(--overgang);
}
ul#navigation > li > a:hover { color: #fff; background: var(--kaart-op); }
ul#navigation > li.current > a { color: #fff; background: var(--kaart-op); }
ul#navigation .ico { width: 15px; height: 15px; }

/* "Browse" opens the category list. It is a real button now: the old one was
   href="javascript:void(0)" with nothing behind it, so it did nothing at all. */
li.menu { position: relative; }
li.menu > a {
  background: linear-gradient(180deg, rgba(255,138,0,.16), rgba(255,138,0,.07));
  border: 1px solid rgba(255,138,0,.30); color: var(--accent-op) !important;
}
li.menu > a:hover { background: rgba(255,138,0,.20); }
li.menu > a .ico { transition: transform var(--overgang); }
li.menu.open > a .ico { transform: rotate(180deg); }

.uitklap {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 80;
  min-width: 520px; padding: 14px;
  background: var(--bg-op); border: 1px solid var(--rand);
  border-radius: var(--r); box-shadow: var(--schaduw);
  display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--overgang), transform var(--overgang), visibility var(--overgang);
}
li.menu.open .uitklap,
li.menu:focus-within .uitklap { opacity: 1; visibility: visible; transform: none; }
.uitklap a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px; border-radius: var(--r-klein);
  color: var(--tekst); font-size: 14px; font-weight: 500;
}
.uitklap a:hover { background: var(--kaart-op); color: #fff; }
.uitklap a .telling { color: var(--zachter); font-size: 12px; font-variant-numeric: tabular-nums; }
.uitklap .alles { grid-column: 1 / -1; margin-top: 6px; border-top: 1px solid var(--rand); padding-top: 12px; color: var(--accent); font-weight: 650; }

/* ------------------------------------------------------------------ inhoud */

body > .container > .wrapper { padding-top: 24px; padding-bottom: 48px; }

.breadcrumbs {
  font-size: 13px; color: var(--zachter); margin-bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.breadcrumbs a { color: var(--zacht); }
.breadcrumbs a:hover { color: var(--accent); }

h1 { margin-bottom: 6px; }
.do-intro { margin-bottom: 18px; max-width: 90ch; color: var(--zacht); }
.do-aantal { color: var(--zachter); font-size: 13px; margin-bottom: 14px; }

/* A heading with an orange bar in front of it, and "view all" on the right. */
.block-title {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0 16px;
}
.block-title h2 {
  display: flex; align-items: center; gap: 11px; margin: 0;
}
.block-title h2::before {
  content: ""; width: 4px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
}
.block-title .more {
  margin-left: auto; font-size: 13px; font-weight: 650; color: var(--zacht);
  padding: 7px 13px; border: 1px solid var(--rand); border-radius: 999px;
  transition: all var(--overgang);
}
.block-title .more:hover { color: #fff; border-color: var(--rand-fel); background: var(--kaart); }
.block-title .clear { display: none; }

/* ------------------------------------------------------------------- rooster */

/* Fills whatever width there is instead of stopping at four columns: on a
   wide monitor the old grid left half the screen empty. */
.content-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 22px 18px;
}

.col-item {
  display: flex; flex-direction: column;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}
.col-item .clear { display: none; }
.col-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255,138,0,.42);
  box-shadow: var(--schaduw);
}
.col-item > a { display: block; color: inherit; }

.col-item .image {
  display: block; position: relative;
  aspect-ratio: 16 / 10; background: #000; overflow: hidden;
}
.col-item .image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity var(--overgang);
}
.col-item:hover .image img { transform: scale(1.045); }

/* A play badge that fades in on hover - it reads as a video, not a photo. */
.col-item .image::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px; border-radius: 999px;
  background: rgba(10,10,13,.55) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 22px;
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.22);
  opacity: 0; transform: scale(.85);
  transition: opacity var(--overgang), transform var(--overgang);
  pointer-events: none;
}
.col-item:hover .image::after { opacity: 1; transform: scale(1); }

.col-item .time {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(6,6,9,.82); color: #fff;
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 6px;
  backdrop-filter: blur(4px);
}

.col-item .title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
  padding: 11px 13px 8px; font-size: 14px; font-weight: 620;
  line-height: 1.38; color: var(--tekst); min-height: 3.1em;
  transition: color var(--overgang);
}
.col-item:hover .title { color: #fff; }

.col-item .col-left {
  display: flex; align-items: center; gap: 12px;
  padding: 0 13px 12px; margin-top: auto;
  font-size: 12.5px; color: var(--zachter);
}
.col-item .col-left .rating { display: inline-flex; align-items: center; gap: 5px; color: var(--goed); }
.col-item .col-left .rating .ico { width: 13px; height: 13px; }
.col-item .col-right { display: none; }

.ico { width: 16px; height: 16px; fill: currentColor; vertical-align: -2px; }

/* ------------------------------------------------------- sorteren en bladeren */

.sorteer {
  display: inline-flex; gap: 3px; margin: 4px 0 20px;
  padding: 4px; background: var(--kaart); border: 1px solid var(--rand);
  border-radius: 999px; flex-wrap: wrap;
}
.sorteer a {
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--zacht); transition: all var(--overgang);
}
.sorteer a:hover { color: #fff; background: var(--kaart-op); }
.sorteer a.nu {
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  color: #1a1206;
}

.pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 34px 0 8px; list-style: none;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 13px;
  border: 1px solid var(--rand); border-radius: var(--r-klein);
  background: var(--kaart); color: var(--zacht);
  font-size: 14px; font-weight: 620; transition: all var(--overgang);
}
.pagination a:hover { color: #fff; border-color: var(--rand-fel); background: var(--kaart-op); }
.pagination .huidig, .pagination .active, .pagination span.nu {
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  border-color: transparent; color: #1a1206;
}

/* ------------------------------------------------------------------ etiketten */

.trending-searches { display: flex; flex-wrap: wrap; gap: 9px; }
.trending-searches .clear { display: none; }
.trending-searches__tag {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 999px;
  background: var(--kaart); border: 1px solid var(--rand);
  color: var(--tekst); font-size: 14px; font-weight: 600;
  transition: all var(--overgang);
}
.trending-searches__tag:hover {
  color: #1a1206; border-color: transparent;
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  transform: translateY(-2px);
}

.seo-text {
  margin-top: 40px; padding: 22px 24px;
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r);
  color: var(--zacht); font-size: 14px; max-width: 100ch;
}
.seo-text h2, .seo-text h3 { margin-bottom: 10px; }
.seo-text p + p { margin-top: 12px; }

/* -------------------------------------------------------------- videopagina */

#player, .player-wrapper {
  background: #000; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--rand); margin-bottom: 18px;
}
#player video, .player-wrapper video { width: 100%; height: auto; display: block; }

.description {
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 18px 20px; margin-bottom: 22px;
  color: var(--zacht);
}
.description h1 { margin-bottom: 10px; }

/* ------------------------------------------------------------------- blog */

.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;
}
.blog-card {
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 20px 22px;
  transition: transform var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}
.blog-card:hover { transform: translateY(-3px); border-color: var(--rand-fel); box-shadow: var(--schaduw); }
.blog-card h2, .blog-card h3 { margin-bottom: 8px; font-size: 1.08rem; }
.blog-meta, .blog-back-meta { color: var(--zachter); font-size: 12.5px; margin-bottom: 10px; }
.blog-excerpt { color: var(--zacht); font-size: 14px; }
.blog-read-more { display: inline-block; margin-top: 12px; font-weight: 650; font-size: 13.5px; }
.blog-article { max-width: 80ch; }
.blog-article p { margin-bottom: 15px; }
.blog-article h2 { margin: 26px 0 10px; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.blog-tags a { font-size: 13px; padding: 6px 13px; background: var(--kaart); border: 1px solid var(--rand); border-radius: 999px; color: var(--zacht); }
.blog-tags a:hover { color: #fff; border-color: var(--rand-fel); }

/* ---------------------------------------------------------------- formulieren */

input, textarea, select {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r-klein);
  color: var(--tekst); font-size: 14px; padding: 11px 13px; width: 100%;
  font-family: inherit; transition: border-color var(--overgang), box-shadow var(--overgang);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,138,0,.13);
}
textarea { min-height: 130px; resize: vertical; }
label { display: block; font-weight: 620; margin-bottom: 7px; font-size: 14px; }

button, .button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  border: 0; border-radius: var(--r-klein); color: #1a1206;
  font-size: 14px; font-weight: 700; font-family: inherit;
  padding: 12px 24px; cursor: pointer; width: auto;
  transition: filter var(--overgang), transform var(--overgang);
}
button:hover, .button:hover, input[type="submit"]:hover { filter: brightness(1.09); transform: translateY(-1px); color: #1a1206; }

.formulier, .col-center form, form.doos {
  max-width: 460px; background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 26px;
}
.formulier p, form.doos p { margin-bottom: 15px; }

/* ------------------------------------------------------------------ voettekst */

#footer {
  border-top: 1px solid var(--rand); margin-top: 56px;
  padding: 30px 0 40px; background: var(--bg-op);
}
#footer .wrapper { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
#footer p { color: var(--zachter); font-size: 13px; margin: 0; }
#footer .links { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
#footer .links a { color: var(--zacht); font-size: 13px; }
#footer .links a:hover { color: var(--accent); }
#footer .clear { display: none; }

/* -------------------------------------------------------------- leeftijdsslot */

#leeftijd { display: none; position: fixed; inset: 0; z-index: 999; }
#leeftijd.toon { display: grid; place-items: center; background: rgba(4,4,6,.93); backdrop-filter: blur(8px); padding: 20px; }
#leeftijd .doos {
  max-width: 470px; width: 100%; text-align: center;
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: 18px; padding: 32px 30px; box-shadow: var(--schaduw);
}
#leeftijd h2 { margin-bottom: 14px; color: var(--accent); }
#leeftijd p { font-size: 14px; margin-bottom: 12px; }
#leeftijd .knoppen { display: flex; gap: 11px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
#leeftijd .nee {
  padding: 12px 24px; border-radius: var(--r-klein);
  border: 1px solid var(--rand); color: var(--zacht); font-weight: 650;
}
#leeftijd .nee:hover { color: #fff; border-color: var(--rand-fel); }

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

#omhoog {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--kaart); border: 1px solid var(--rand); color: var(--tekst);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--overgang);
}
#omhoog.toon { opacity: 1; visibility: visible; transform: none; }
#omhoog:hover { border-color: var(--accent); color: var(--accent); }
#omhoog .ico { transform: rotate(180deg); }

/* --------------------------------------------------------------- meldingen */

.notification, .melding {
  padding: 13px 16px; border-radius: var(--r-klein); margin-bottom: 16px;
  border: 1px solid var(--rand); background: var(--kaart); font-size: 14px;
}
.melding.fout { border-color: rgba(255,90,90,.4); color: #ffb0b0; background: rgba(255,90,90,.07); }
.melding.goed { border-color: rgba(55,214,122,.4); color: #a8f0c6; background: rgba(55,214,122,.07); }

/* ------------------------------------------------------------------- beheer */

.beheer-cijfers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 16px; margin-bottom: 26px; }
.beheer-cijfer { background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r); padding: 18px 20px; }
.beheer-cijfer strong { display: block; font-size: 1.8rem; color: #fff; font-variant-numeric: tabular-nums; }
.beheer-cijfer span { color: var(--zachter); font-size: 13px; }
.beheer-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.beheer-tabel th, .beheer-tabel td { padding: 11px 13px; border-bottom: 1px solid var(--rand); text-align: left; }
.beheer-tabel th { color: var(--zachter); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------------------------------------------ smaller */

@media (max-width: 1100px) {
  .uitklap { min-width: 400px; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  #header > .wrapper { height: auto; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
  #logo { width: 140px; height: 36px; }
  #header form { order: 3; flex-basis: 100%; max-width: none; }
  .header-actions { margin-left: auto; }

  .menu-knop { display: grid; }
  /* Off-canvas: the row of pills becomes a panel that slides down. */
  ul#navigation {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; height: auto;
    background: var(--bg-op); border-bottom: 1px solid var(--rand);
    padding: 10px 22px 16px; gap: 2px;
    display: none; box-shadow: var(--schaduw);
  }
  ul#navigation.open { display: flex; }
  ul#navigation > li > a { height: 44px; border-radius: var(--r-klein); justify-content: flex-start; }
  #header .container { position: relative; }
  #header .container > .wrapper { height: 54px; }
  .uitklap { position: static; min-width: 0; grid-template-columns: repeat(2,1fr); box-shadow: none; background: transparent; border: 0; padding: 4px 0 8px; }
  li.menu .uitklap { display: none; }
  li.menu.open .uitklap { display: grid; opacity: 1; visibility: visible; transform: none; }
}

@media (max-width: 640px) {
  .wrapper { padding: 0 14px; }
  .content-list { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 16px 12px; }
  .col-item .title { font-size: 13px; padding: 9px 10px 6px; }
  .col-item .col-left { padding: 0 10px 10px; font-size: 11.5px; gap: 9px; }
  h1 { font-size: 1.3rem; }
  .block-title { margin: 24px 0 13px; }
  .uitklap { grid-template-columns: 1fr; }
  #footer .links { margin-left: 0; }
}

/* Someone who asked for less motion gets less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .col-item:hover { transform: none; }
  .col-item:hover .image img { transform: none; }
}

/* ==========================================================================
   The template classes
   --------------------------------------------------------------------------
   Everything above styles the shell. These are the names the page templates
   actually use (do-*), which the first draft of this stylesheet missed: the
   video page, the comments, the blog, the forms and the pagination were
   rendering unstyled.
   ========================================================================== */

/* ---------------------------------------------------------------- bladeren */

.do-paginering {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 36px 0 8px;
}
.do-paginering a,
.do-paginering span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  border: 1px solid var(--rand); border-radius: var(--r-klein);
  background: var(--kaart); color: var(--zacht);
  font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums;
  transition: all var(--overgang);
}
.do-paginering a:hover { color: #fff; border-color: var(--rand-fel); background: var(--kaart-op); }
.do-paginering span.nu {
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  border-color: transparent; color: #1a1206;
}

/* -------------------------------------------------------------- videopagina */

.do-video { margin-bottom: 34px; }
.do-video h1 { font-size: 1.4rem; margin-bottom: 14px; }

.do-speler {
  background: #000; border: 1px solid var(--rand);
  border-radius: var(--r); overflow: hidden; margin-bottom: 16px;
  box-shadow: var(--schaduw);
}
.do-speler video { width: 100%; height: auto; max-height: 78vh; display: block; background: #000; }

.do-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r);
  color: var(--zacht); font-size: 13.5px;
}
.do-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.do-meta time { color: var(--zachter); }

/* The like button is the one thing on a video page that talks back. */
.do-like {
  margin-left: auto; width: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; font-size: 14px; font-weight: 650;
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  color: #1a1206; border: 0; border-radius: 999px; cursor: pointer;
}
.do-like:disabled { opacity: .6; cursor: default; transform: none; filter: none; }
.do-likes { font-variant-numeric: tabular-nums; }

.do-tekst {
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 17px 20px; margin-bottom: 18px;
  color: var(--zacht); font-size: 14.5px; line-height: 1.65;
}

/* Categories read as buttons; tags as quieter chips, so they are not
   mistaken for the same thing. */
.do-cats, .do-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.do-cats a {
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 620;
  background: rgba(255,138,0,.12); border: 1px solid rgba(255,138,0,.32);
  color: var(--accent-op); transition: all var(--overgang);
}
.do-cats a:hover { background: var(--accent); border-color: transparent; color: #1a1206; }
.do-tags a {
  padding: 6px 13px; border-radius: 999px; font-size: 13px;
  background: var(--kaart); border: 1px solid var(--rand); color: var(--zacht);
  transition: all var(--overgang);
}
.do-tags a:hover { color: #fff; border-color: var(--rand-fel); background: var(--kaart-op); }

/* ---------------------------------------------------------------- reacties */

.do-reacties { margin-top: 40px; }
.do-reacties h2 { margin-bottom: 16px; }

.do-reactieform {
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 18px 20px; margin-bottom: 22px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.do-reactieform input[type="text"] { max-width: 320px; }
.do-reactieform textarea { min-height: 96px; }

.do-reactie {
  padding: 15px 18px; margin-bottom: 12px;
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r);
}
.do-reactie strong { color: #fff; font-size: 14px; font-weight: 650; }
.do-reactie time { color: var(--zachter); font-size: 12.5px; margin-left: 10px; }
.do-reactie p { margin-top: 8px; color: var(--zacht); font-size: 14px; }

.do-gerelateerd { margin-top: 44px; }
.do-gerelateerd h2 { margin-bottom: 16px; }

/* ------------------------------------------------------------- meldingen */

.do-fout, .do-goed {
  padding: 13px 17px; border-radius: var(--r-klein);
  margin-bottom: 16px; font-size: 14px;
}
.do-fout { background: rgba(255,86,86,.08); border: 1px solid rgba(255,86,86,.36); color: #ffb3b3; }
.do-goed { background: rgba(55,214,122,.08); border: 1px solid rgba(55,214,122,.36); color: #a9f0c7; }
.rood { color: #ff7a7a; }
.reden { color: var(--zachter); font-size: 13px; }

/* ------------------------------------------------------------ formulieren */

.do-formulier {
  max-width: 440px;
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 26px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.do-formulier label { display: block; font-weight: 620; font-size: 13.5px; color: var(--zacht); }
.do-formulier label input { margin-top: 7px; }
.do-formulier button { align-self: flex-start; margin-top: 4px; }

/* ------------------------------------------------------------- categorieen */

.do-kanalen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
}
.do-kanaal {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 18px; border-radius: var(--r);
  background: var(--kaart); border: 1px solid var(--rand);
  color: var(--tekst); font-size: 15px; font-weight: 650;
  transition: all var(--overgang);
}
.do-kanaal::after {
  content: "›"; color: var(--zachter); font-size: 19px; line-height: 1;
  transition: transform var(--overgang), color var(--overgang);
}
.do-kanaal:hover {
  color: #fff; border-color: rgba(255,138,0,.45);
  background: var(--kaart-op); transform: translateY(-2px);
}
.do-kanaal:hover::after { color: var(--accent); transform: translateX(3px); }

/* ---------------------------------------------------------------- modellen */

.do-modellen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px;
}
.do-model {
  display: flex; align-items: center; padding: 15px 17px;
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--r);
  color: var(--tekst); font-weight: 620; font-size: 14.5px;
  transition: all var(--overgang);
}
.do-model:hover { color: #fff; border-color: var(--rand-fel); background: var(--kaart-op); transform: translateY(-2px); }
.do-modelpagina, .do-profiel { margin-bottom: 28px; }
.do-modelpagina h1, .do-profiel h1 { margin-bottom: 8px; }

/* -------------------------------------------------------------------- blog */

.do-bloglijst {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px;
}
.do-blogkaart {
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); padding: 22px 24px;
  transition: transform var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}
.do-blogkaart:hover { transform: translateY(-3px); border-color: rgba(255,138,0,.38); box-shadow: var(--schaduw); }
.do-blogkaart h2 { font-size: 1.08rem; margin-bottom: 9px; line-height: 1.35; }
.do-blogkaart h2 a { color: #fff; }
.do-blogkaart h2 a:hover { color: var(--accent); }
.do-blogkaart time { display: block; color: var(--zachter); font-size: 12.5px; margin-bottom: 10px; }
.do-blogkaart p { font-size: 14px; color: var(--zacht); }

.do-blogbericht { max-width: 82ch; }
.do-blogbericht h1 { font-size: 1.7rem; margin-bottom: 10px; line-height: 1.25; }
.do-blogtekst { font-size: 15.5px; line-height: 1.72; color: var(--zacht); }
.do-blogtekst p { margin-bottom: 17px; }
.do-blogtekst h2 { margin: 30px 0 12px; font-size: 1.25rem; }
.do-blogtekst h3 { margin: 24px 0 10px; }
.do-blogtekst ul, .do-blogtekst ol { margin: 0 0 17px 22px; }
.do-blogtekst li { margin-bottom: 7px; }
.do-blogtekst img { border-radius: var(--r); margin: 18px 0; }
.do-blogtekst a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .do-meta { padding: 12px 14px; }
  .do-like { margin-left: 0; }
  .do-speler video { max-height: 56vh; }
  .do-kanalen { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .do-modellen { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .do-bloglijst { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The additions
   --------------------------------------------------------------------------
   Category covers, a wider video page, the HD badge, the save button and the
   larger first row on the front page.
   ========================================================================== */

/* ------------------------------------------------------------- HD-teken */

.col-item .hd {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: linear-gradient(180deg, var(--accent-op), var(--accent-diep));
  color: #17110a; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 5px;
}

/* ------------------------------------------------------- grotere eerste rij */

/* The row people actually look at gets more room than the two below it. */
.do-hero .content-list {
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px 20px;
}
.do-hero .col-item .title { font-size: 15px; min-height: 2.9em; }

@media (max-width: 640px) {
  .do-hero .content-list { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 16px 12px; }
  .do-hero .col-item .title { font-size: 13px; }
}

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

.do-kanalen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px 16px;
}
.do-kanalen.klein { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* The plain row this used to be is replaced entirely, arrow and all. */
.do-kanaal {
  display: block; padding: 0; position: relative;
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); overflow: hidden;
  color: var(--tekst); font-weight: 600;
  transition: transform var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}
.do-kanaal::after { content: none; }
.do-kanaal:hover {
  transform: translateY(-4px);
  border-color: rgba(255,138,0,.42);
  box-shadow: var(--schaduw);
  background: var(--kaart);
}

.do-kanaal .beeld {
  display: block; position: relative;
  aspect-ratio: 16 / 10; background: #0d0d11; overflow: hidden;
}
.do-kanaal .beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: .82; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity var(--overgang);
}
.do-kanaal:hover .beeld img { transform: scale(1.06); opacity: 1; }

/* A gradient so the name stays readable over whatever the cover happens to be. */
.do-kanaal .beeld::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,11,.92) 0%, rgba(8,8,11,.35) 45%, transparent 75%);
}

.do-kanaal .naam {
  position: absolute; left: 14px; right: 14px; bottom: 26px; z-index: 2;
  font-size: 15.5px; font-weight: 700; color: #fff; line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.do-kanaal .telling {
  position: absolute; left: 14px; bottom: 9px; z-index: 2;
  font-size: 12px; font-weight: 600; color: var(--accent-op);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .do-kanalen, .do-kanalen.klein { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px 12px; }
  .do-kanaal .naam { font-size: 13.5px; bottom: 24px; left: 10px; right: 10px; }
  .do-kanaal .telling { font-size: 11px; left: 10px; }
}

/* ------------------------------------------------------- videopagina breed */

/* Two columns where there is room. The related videos used to sit below the
   comments, which on a wide screen is a long way down with half the window
   empty beside the player. */
.do-videopagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 26px;
  align-items: start;
}
.do-hoofd { min-width: 0; }

.do-zijkant { position: sticky; top: 132px; }
.do-zijkant h2 { font-size: 1.05rem; margin-bottom: 13px; }

@media (max-width: 1200px) {
  .do-videopagina { grid-template-columns: 1fr; }
  .do-zijkant { position: static; }
}

/* -------------------------------------------------- lijstje naast de speler */

.do-naast {
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 190px); overflow-y: auto;
  padding-right: 4px;
}
/* A quiet scrollbar; the default one is a bright slab against this palette. */
.do-naast::-webkit-scrollbar { width: 8px; }
.do-naast::-webkit-scrollbar-thumb { background: var(--rand-fel); border-radius: 4px; }
.do-naast::-webkit-scrollbar-track { background: transparent; }
.do-naast { scrollbar-width: thin; scrollbar-color: var(--rand-fel) transparent; }

.do-naastitem {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 11px;
  padding: 7px; border-radius: 10px;
  color: var(--tekst); transition: background var(--overgang);
}
.do-naastitem:hover { background: var(--kaart-op); color: #fff; }

.do-naastitem .beeld {
  position: relative; border-radius: 7px; overflow: hidden;
  aspect-ratio: 16 / 10; background: #000;
}
.do-naastitem .beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.do-naastitem .time {
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(6,6,9,.85); color: #fff;
  font-size: 11px; font-weight: 650; padding: 2px 5px; border-radius: 4px;
}
.do-naastitem .tekst { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.do-naastitem .titel {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3; overflow: hidden;
  font-size: 13px; font-weight: 620; line-height: 1.36;
}
.do-naastitem .meta { font-size: 11.5px; color: var(--zachter); }

@media (max-width: 1200px) {
  .do-naast {
    max-height: none; overflow: visible;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
@media (max-width: 640px) {
  .do-naast { grid-template-columns: 1fr; }
  .do-naastitem { grid-template-columns: 130px minmax(0, 1fr); }
}

/* ------------------------------------------------------------ bewaarknop */

.do-fav {
  width: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 650;
  background: var(--kaart-op); border: 1px solid var(--rand); color: var(--zacht);
  cursor: pointer; transition: all var(--overgang);
}
.do-fav:hover { color: #fff; border-color: var(--rand-fel); filter: none; transform: none; }
.do-fav .ster { font-size: 15px; line-height: 1; }
.do-fav.aan {
  background: rgba(255,138,0,.14); border-color: rgba(255,138,0,.45);
  color: var(--accent-op);
}
.do-fav.aan .ster { color: var(--accent); }

/* The meta row now holds two buttons, so they sit together on the right. */
.do-meta .do-like { margin-left: auto; }
.do-meta .do-fav { margin-left: 0; }

@media (max-width: 640px) {
  .do-meta .do-like, .do-meta .do-fav { margin-left: 0; }
}

/* Where a page would otherwise be empty: something to click. */
.do-zoekhulp { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 8px; }

/* A video whose file is missing: say so plainly. */
.do-speler.leeg { display: grid; place-items: center; text-align: center;
  aspect-ratio: 16 / 9; padding: 30px; background: var(--kaart); }
.do-speler.leeg p { margin-bottom: 8px; }
.do-speler.leeg strong { color: var(--tekst); font-size: 15px; }

/* The stand-in offered where a video is gone. Big enough to be the obvious
   next click, and clearly a different video rather than a replacement. */
.do-kandidaat {
  display: grid; grid-template-columns: 274px minmax(0, 1fr); gap: 18px;
  align-items: center; margin-bottom: 20px; padding: 14px;
  background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--r); color: var(--tekst);
  transition: transform var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}
.do-kandidaat:hover {
  transform: translateY(-3px); border-color: rgba(255,138,0,.45);
  box-shadow: var(--schaduw); color: #fff;
}
.do-kandidaat .beeld {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 10; background: #000;
}
.do-kandidaat .beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.do-kandidaat .time {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(6,6,9,.85); color: #fff;
  font-size: 12px; font-weight: 650; padding: 2px 6px; border-radius: 5px;
}
.do-kandidaat .tekst { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.do-kandidaat .kop {
  font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
}
.do-kandidaat .titel { font-size: 17px; font-weight: 700; line-height: 1.3; color: #fff; }
.do-kandidaat .meta { font-size: 13px; color: var(--zachter); }

@media (max-width: 640px) {
  .do-kandidaat { grid-template-columns: 1fr; gap: 12px; }
  .do-kandidaat .titel { font-size: 15px; }
}
/* ==========================================================================
   Rendering on a real screen
   --------------------------------------------------------------------------
   The layout was written against three widths. These are the things that go
   wrong in between them, on a phone in the hand, and on a monitor wider than
   the grid was ever asked about.
   ========================================================================== */

/* Long words in a title - a filename, a run-on - must not push the card wider
   than its column and give the whole page a horizontal scrollbar. */
.col-item .title,
.do-naastitem .titel,
.do-kandidaat .titel,
.do-kanaal .naam,
.do-reactie p,
.do-tekst,
h1, h2, h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Text rendered thin on dark backgrounds is what makes a dark theme look
   muddy on a Mac; this is the one place it is worth asking for. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cards far below the fold are not laid out until they are near. On a listing
   of forty-eight this is the difference between one long layout pass and
   several short ones. contain-intrinsic-size keeps the scrollbar honest. */
.content-list > .col-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

/* A thumbnail that has not arrived yet should be the card's own colour, not a
   white flash. */
.col-item .image,
.do-naastitem .beeld,
.do-kandidaat .beeld,
.do-kanaal .beeld { background-color: #0d0d11; }

/* -------------------------------------------------------------- brede schermen */

/* Above about 1900 the grid stopped adding columns and simply stretched the
   cards, which makes a 32-inch monitor show the same twelve videos as a
   laptop, only blurrier. */
@media (min-width: 1900px) {
  .wrapper { max-width: 1880px; }
  .content-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .do-hero .content-list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  .do-videopagina { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* --------------------------------------------------------------- tussenmaten */

/* Between a laptop and a tablet the video page went to one column at 1200,
   which wastes the width a 1024-wide tablet in landscape actually has. */
@media (max-width: 1200px) and (min-width: 1000px) {
  .do-videopagina { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
  .do-naastitem { grid-template-columns: 120px minmax(0, 1fr); }
  .do-naastitem .titel { font-size: 12.5px; -webkit-line-clamp: 2; line-clamp: 2; }
}

@media (max-width: 999px) {
  .do-videopagina { grid-template-columns: 1fr; }
  .do-zijkant { position: static; }
  .do-naast { max-height: none; overflow: visible;
              display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

/* ------------------------------------------------------------------ telefoon */

@media (max-width: 900px) {
  /* Anything that gets tapped needs to be reachable with a thumb. The toolbar
     buttons were 38 pixels high, which is below what a phone can hit reliably. */
  .toolbar.top a { height: 44px; padding: 0 16px; }
  .menu-knop { width: 44px; height: 44px; }
  #header form input { height: 44px; }
  #header form button { width: 36px; height: 36px; top: 4px; right: 4px; }

  .sorteer a { padding: 10px 16px; }
  .do-paginering a, .do-paginering span { min-width: 44px; height: 44px; }
  .do-tags a, .do-cats a { padding: 9px 14px; }
  .trending-searches__tag { padding: 11px 16px; }
}

@media (max-width: 640px) {
  /* Phones with a notch: keep the content clear of it in landscape. */
  .wrapper {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  /* The header took three rows on a phone - logo, buttons, search - which ate
     a third of the screen before any video appeared. Logo and buttons share a
     row, and the sticky header is allowed to scroll away. */
  #header { position: static; }
  #header > .wrapper { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  #logo { width: 124px; height: 32px; }
  .toolbar.top { gap: 6px; }
  .toolbar.top a { padding: 0 13px; font-size: 13.5px; }

  #header .container > .wrapper { height: 50px; }

  h1 { font-size: 1.22rem; line-height: 1.25; }
  h2 { font-size: 1.05rem; }

  .block-title { gap: 10px; }
  .block-title .more { padding: 6px 11px; font-size: 12.5px; }

  .col-item { border-radius: 11px; }
  .col-item .title { min-height: 2.9em; }
  /* The play badge is decoration; on a phone there is no hover to reveal it. */
  .col-item .image::after { display: none; }

  .do-speler video { max-height: 46vh; }
  .do-videopagina { gap: 18px; }
  .do-meta { gap: 8px 12px; font-size: 12.5px; }
  .do-like, .do-fav { padding: 10px 15px; }

  .do-naast { grid-template-columns: 1fr; }
  .do-naastitem { grid-template-columns: 132px minmax(0, 1fr); gap: 10px; padding: 6px; }
  .do-naastitem .titel { font-size: 12.5px; }

  #omhoog { right: 14px; bottom: 14px; width: 46px; height: 46px; }
  #footer { margin-top: 36px; padding: 24px 0 30px; }
  #footer .wrapper { gap: 12px; }
  #footer .links { gap: 14px; }
}

/* A phone held sideways has almost no height; a full-screen age gate that
   cannot be scrolled is a dead end there. */
@media (max-height: 480px) {
  #leeftijd.toon { align-items: start; overflow-y: auto; }
  #leeftijd .doos { padding: 20px 22px; margin: 12px 0; }
  #leeftijd h2 { font-size: 1.05rem; margin-bottom: 8px; }
  #leeftijd p { font-size: 13px; margin-bottom: 8px; }
}

/* Very narrow phones still get two columns rather than one enormous card. */
@media (max-width: 380px) {
  .content-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .col-item .title { font-size: 12px; padding: 8px 8px 5px; }
  .col-item .col-left { padding: 0 8px 8px; font-size: 11px; gap: 7px; }
}

/* Printing a page of a tube site is not a thing anyone does on purpose, but
   the header, the age gate and the sidebar have no business on paper. */
@media print {
  #header, #footer, #leeftijd, #omhoog, .do-zijkant, .sorteer, .do-paginering { display: none; }
  body { background: #fff; color: #000; }
}

/* The legal pages: long text, so it gets a readable measure and room to breathe. */
.do-tekstpagina { max-width: 78ch; }
.do-tekstpagina h1 { margin-bottom: 6px; }
.do-tekstpagina h2 { margin: 30px 0 10px; font-size: 1.1rem; }
.do-tekstpagina p { margin-bottom: 14px; line-height: 1.7; }
.do-tekstpagina ul { margin: 0 0 16px 22px; }
.do-tekstpagina li { margin-bottom: 9px; color: var(--zacht); line-height: 1.65; }
.do-tekstpagina strong { color: var(--tekst); }
.do-tekstpagina a { text-decoration: underline; text-underline-offset: 2px; }

.do-formulier.breed { max-width: 640px; margin-top: 18px; }
.do-formulier.breed textarea { min-height: 88px; }

/* A statement someone has to tick is not a field label; it is a sentence they
   have to read, so it is laid out as one. */
.do-vinkje {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px;
  align-items: start; font-weight: 400; font-size: 13.5px;
  color: var(--zacht); line-height: 1.55;
  padding: 13px 15px; border: 1px solid var(--rand); border-radius: var(--r-klein);
  background: var(--bg-op);
}
.do-vinkje input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent);
}
/* Text was capped at 90 characters a line, which on a desktop reads as a
   narrow column with half the window empty next to it. Wider, and wider still
   on a large screen - long enough to use the space, short enough to read. */
.do-intro,
.seo-text {
  max-width: 74rem;
  font-size: 15px;
  line-height: 1.7;
}
.do-tekstpagina { max-width: 62rem; }

/* breder op een groot scherm */
@media (min-width: 1500px) {
  .do-intro, .seo-text { max-width: 86rem; }
  .do-tekstpagina { max-width: 70rem; }
}
/* Search inside the admin panel. */
.do-zoekbeheer { display: flex; gap: 8px; margin-bottom: 16px; max-width: 460px; }
.do-zoekbeheer input { flex: 1 1 auto; }
.beheer-tabel form { display: flex; gap: 6px; }
.beheer-tabel button { padding: 7px 13px; font-size: 13px; }
.beheer-tabel button.rood {
  background: linear-gradient(180deg, #ff6b6b, #d63333); color: #fff;
}
.klaar-vink { color: var(--goed); font-size: 12.5px; font-weight: 650; }
.reden { color: var(--zachter); font-size: 12.5px; }