/*
 * Buiten het spel: de openbare pagina's op perkament, met dezelfde knoppen, velden en iconen als in de stad.
 * Alles staat onder body.buiten, want het spel laadt elk stad-*.css-bestand en mag hier niets van merken.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

/* Kop van een pagina: een regel boven, de titel in de koppenletter, een inleiding en een gouden streep. */
.buiten .bt-kop { display: grid; gap: 6px; margin-bottom: 18px; }
.buiten .bt-kop::after { content: ""; display: block; width: 132px; height: 2px; margin-top: 6px; background: linear-gradient(90deg, #c99a48, transparent); }
.buiten .bt-kicker { margin: 0; font: 800 11.5px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8a5a1c; }
.buiten .m-body .bt-kop h1 { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 34px/1.05 var(--display); color: var(--inkt); overflow-wrap: anywhere; }
.buiten .bt-kop h1 img { width: 46px; height: 46px; flex-shrink: 0; margin: -6px 0; filter: drop-shadow(0 2px 2px rgb(80 50 20 / 0.25)); }
.buiten .bt-kop > p:not(.bt-kicker) { margin: 0; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--inkt-zacht); }
.buiten .bt-kop b { color: var(--inkt); }

/* Kruimelpad boven een gidspagina of bericht. */
.buiten .bt-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: 12.5px; color: var(--inkt-zacht); }
.buiten .bt-kruimel svg { width: 14px; height: 14px; opacity: 0.6; }
.buiten .bt-kruimel a { font-weight: 700; text-decoration: none; }
.buiten .bt-kruimel a:hover { text-decoration: underline; }

/* Firman: de uitnodiging van de Sultan, perkament met een dubbele gouden rand en een lakzegel. */
.buiten .bt-firman { position: relative; display: grid; gap: 12px; padding: 24px 26px 22px; border-radius: var(--r-groot); background: radial-gradient(ellipse 70% 110% at 0% 0%, rgb(255 240 200 / 0.75), transparent 60%), linear-gradient(180deg, #fffaf0, #f1e2bd); box-shadow: 0 0 0 1px #d9bd83, 0 0 0 5px rgb(255 250 240 / 0.7), 0 0 0 6.5px #c99a48, 0 8px 22px rgb(80 50 20 / 0.2); margin: 6px 6px 0; }
.buiten .bt-firman .bt-kop > :is(.bt-kicker, h1) { padding-right: 70px; }
.buiten .bt-zegel { position: absolute; top: 10px; right: 12px; width: 76px; height: 76px; transform: rotate(-9deg); filter: drop-shadow(0 4px 5px rgb(80 30 10 / 0.35)); pointer-events: none; }
.buiten .bt-firman .m-say { background: rgb(255 255 255 / 0.5); }

/* Pijlers van het spel: vier kaartjes met een gebouw uit de stad. */
.buiten .bt-pijlers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.buiten .bt-pijlers .kaartje > img { aspect-ratio: 2 / 1; object-fit: contain; padding: 8px 14px 2px; background: radial-gradient(ellipse 70% 80% at 50% 60%, #fff7e6, #ead6ad); }
.buiten .bt-pijlers .inhoud { gap: 3px; }
.buiten .bt-pijlers .inhoud b { font: 700 22px/1.05 var(--display); }
.buiten .bt-pijlers .inhoud i { display: block; font: italic 600 11.5px/1.2 var(--sans); color: #8a5a1c; }
.buiten .bt-pijlers .inhoud small { margin-top: 3px; font-size: 13px; line-height: 1.4; }
@media (min-width: 1200px) { .buiten .bt-pijlers { grid-template-columns: repeat(4, minmax(0, 1fr)); } .buiten .bt-pijlers .kaartje > img { aspect-ratio: 4 / 3; } }

/* Oproep onderaan een pagina: een zin en de twee grote knoppen. */
.buiten .bt-oproep { display: grid; justify-items: center; gap: 14px; padding: 22px 18px 24px; text-align: center; border-radius: var(--r-groot); background: radial-gradient(ellipse 60% 100% at 50% 0%, rgb(255 236 180 / 0.6), transparent 70%), rgb(120 85 35 / 0.09); box-shadow: inset 0 0 0 1px var(--lijn-perkament); }
.buiten .bt-oproep > p { margin: 0; font: 700 25px/1.15 var(--display); color: var(--inkt); text-wrap: balance; }
.buiten .bt-oproep > small { color: var(--inkt-zacht); font-size: 13px; }
.buiten .bt-oproep form { margin: 0; display: contents; }
.buiten .m-actie .knop > img { width: 32px; height: 32px; }
.buiten .knop.is-busy > img { display: none; }

/* Een kort zinnetje onder een blok, met een link. */
.buiten .bt-noot { margin: 0; font-size: 13px; color: var(--inkt-zacht); }
.buiten .bt-noot a { font-weight: 700; }

/* Formulieren: een kaart op perkament, velden uit de kit, een brede hoofdknop. */
.buiten .bt-vorm { display: grid; gap: 14px; margin: 0; }
.buiten .bt-kaart { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.74), rgb(255 255 255 / 0.46)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); min-width: 0; }
.buiten .bt-kaart > h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 22px/1.1 var(--display); color: var(--inkt); }
.buiten .bt-kaart > h2 img { width: 32px; height: 32px; margin: -4px 0; }
.buiten .bt-kaart > p { margin: 0; color: var(--inkt-zacht); }
.buiten .bt-smal { width: 100%; max-width: 480px; }
.buiten .veld .veld-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.buiten .veld .veld-kop a { font-size: 12.5px; font-weight: 700; }
.buiten .veld textarea { min-height: 150px; resize: vertical; line-height: 1.45; }
.buiten .veld select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, #8a5a1c 50%), linear-gradient(135deg, #8a5a1c 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.buiten .veld small, .buiten .veld .name-hint { font-size: 12px; font-weight: 600; color: var(--inkt-zacht); }
.buiten .veld .text-danger { color: #a3261a; }
.buiten .veld .text-success { color: #1d6a34; }
.buiten .veld input[data-name-state="free"] { border-color: #3a9a55; }
.buiten .veld input[data-name-state="taken"], .buiten .veld input[data-name-state="invalid"] { border-color: #c0392b; }
.buiten .bt-code { text-align: center; font: 800 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: 0.35em; }
.buiten .bt-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.buiten .knop.breed { width: 100%; min-height: 50px; font-size: 16px; }
.buiten .knop.breed > img { width: 32px; height: 32px; }
.buiten .bt-of { display: flex; align-items: center; gap: 12px; margin: 0; font: italic 700 15px/1 var(--display); color: var(--inkt-zacht); }
.buiten .bt-of::before, .buiten .bt-of::after { content: ""; flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, #c9ad78, transparent); }
.buiten .bt-fout { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: #a3261a; }
.buiten .bt-terug { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-decoration: none; }
.buiten .bt-terug svg { width: 16px; height: 16px; }
.buiten .bt-terug:hover { text-decoration: underline; }
.buiten .bt-uitleg { font-size: 13px; color: var(--inkt-zacht); }
.buiten .bt-uitleg summary { cursor: pointer; font-weight: 700; color: var(--inkt); }
.buiten .bt-uitleg p { margin: 6px 0 0; }

/* Inloggen: formulier links, en wie nog geen account heeft ziet rechts de uitnodiging. */
.buiten .bt-inlog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 230px); gap: 16px; align-items: start; }
.buiten .bt-nieuw { display: grid; justify-items: center; gap: 10px; padding: 18px 16px; text-align: center; border-radius: var(--r-groot); background: radial-gradient(ellipse 80% 70% at 50% 0%, rgb(255 236 180 / 0.7), transparent 70%), rgb(120 85 35 / 0.08); box-shadow: inset 0 0 0 1px var(--lijn-perkament); }
.buiten .bt-nieuw > img { width: 72px; height: 72px; }
.buiten .bt-nieuw b { font: 700 22px/1.1 var(--display); color: var(--inkt); }
.buiten .bt-nieuw p { margin: 0; font-size: 13px; color: var(--inkt-zacht); }
.buiten .bt-nieuw .knop { width: 100%; }

/* Inloggen met Google of Discord: knoppen met reliëf in de kleuren van de dienst. */
.buiten .bt-diensten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.buiten .knop.bt-google { --k1: #ffffff; --k2: #ebe5d9; --kr: #a99d86; --ks: #8c8170; --kt: #1f1f1f; text-shadow: none; }
.buiten .knop.bt-discord { --k1: #8b94f8; --k2: #4752c4; --kr: #2d3590; --ks: #1f256a; --kt: #fff; }
.buiten .knop.bt-google svg, .buiten .knop.bt-discord svg { width: 18px; height: 18px; filter: none; }

/* Meldingen bij formulieren: een strook op perkament in plaats van een donker vak. */
.buiten .m-body .alert p, .buiten .m-body .alert ul { margin: 0; }
.buiten .m-body .alert > form { margin: 0; }

/* Controlepost: het cijferplaatje als een rij uit de kit. */
.buiten .m-body .captcha-card { border: 0; border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.45)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.12); }
.buiten .m-body .captcha-card[hidden] { display: none; }
.buiten .m-body .captcha-icon { width: 46px; height: 46px; background: none; }
.buiten .m-body .captcha-icon img { width: 46px; height: 46px; }
.buiten .m-body .captcha-head b { font: 700 19px/1.1 var(--display); color: var(--inkt); }
.buiten .m-body .captcha-row img[data-captcha-img] { border-color: #cdb27e; border-radius: 8px; background: #fff; }
.buiten .m-body .captcha-refresh { border: 1.5px solid #cdb27e; background: #fffdf7; color: #8a5a1c; border-radius: var(--r); }
.buiten .m-body .otp-digit { border: 1.5px solid #cdb27e; background: #fffdf7; color: var(--inkt); border-radius: var(--r); box-shadow: inset 0 1px 2px rgb(80 50 20 / 0.12); }
.buiten .m-body .otp-digit:focus { border-color: #b8862f; box-shadow: 0 0 0 3px rgb(201 154 72 / 0.3); }

/* Sterktemeter onder een wachtwoord. */
.buiten .m-body .pw-meter { margin-top: 2px; font-weight: 600; }
.buiten .m-body .pw-bars { flex-basis: 6.5rem; }
.buiten .m-body .pw-bars i { height: 6px; border-radius: 3px; background: #dcc9a2; }

/* Lokveld tegen spam: onzichtbaar voor mensen. */
.buiten .contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Naslag: een inhoudsopgave als register, en hoofdstukken als rijen met een icoon. */
.buiten .bt-register { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.buiten .bt-register a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.48)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); color: var(--inkt) !important; text-decoration: none; transition: box-shadow 140ms, transform 140ms var(--ease); }
.buiten .bt-register a:hover { box-shadow: 0 0 0 2px #c99a48, 0 3px 0 rgb(120 85 35 / 0.2); transform: translateY(-1px); }
.buiten .bt-register a > img { width: 54px; height: 54px; padding: 3px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #fff7e6, #e6d2aa); box-shadow: inset 0 0 0 1px var(--lijn-perkament); }
.buiten .bt-register b { display: block; font: 700 21px/1.1 var(--display); }
.buiten .bt-register small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--inkt-zacht); }
.buiten .bt-register .pijl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(120 85 35 / 0.1); color: #8a5a1c; }
.buiten .bt-register .pijl svg { width: 16px; height: 16px; }

/* Inhoudsopgave binnen een pagina. */
.buiten .bt-inhoud { padding: 14px 16px; border-radius: var(--r-groot); background: rgb(120 85 35 / 0.07); box-shadow: inset 0 0 0 1px var(--lijn-perkament); }
.buiten .bt-inhoud h2 { margin: 0 0 8px; font: 700 19px/1.1 var(--display); color: var(--inkt); }
.buiten .bt-inhoud ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.buiten .bt-inhoud li a { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.buiten .bt-inhoud li a::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; transform: rotate(45deg) translateY(-2px); background: #c99a48; }
.buiten .bt-inhoud li a:hover { text-decoration: underline; }

/* Lopende tekst: hoofdstukken met een kop in de koppenletter. */
.buiten .bt-hoofdstuk { display: grid; gap: 8px; scroll-margin-top: 16px; }
.buiten .bt-hoofdstuk > h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 23px/1.15 var(--display); color: var(--inkt); }
.buiten .bt-hoofdstuk > h2 img { width: 32px; height: 32px; margin: -4px 0; }
.buiten .bt-hoofdstuk > p, .buiten .bt-tekst p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #4a3826; max-width: 70ch; }
.buiten .bt-hoofdstukken { display: grid; gap: 22px; }
.buiten .bt-hoofdstukken > .bt-hoofdstuk + .bt-hoofdstuk { padding-top: 20px; border-top: 1px solid rgb(201 154 72 / 0.35); }
.buiten .bt-lijst { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.buiten .bt-lijst li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--inkt); }
.buiten .bt-lijst li::before { content: ""; position: absolute; left: 3px; top: 0.55em; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, #f1cf84, #a87525); box-shadow: 0 0 0 1px rgb(120 85 35 / 0.3); }
.buiten .bt-datum { margin: 0; font-size: 12.5px; color: var(--inkt-zacht); }

/* Opgemaakte tekst uit de databank (nieuws). */
.buiten .bt-tekst { display: grid; gap: 12px; font-size: 14.5px; line-height: 1.65; color: #4a3826; }
.buiten .bt-tekst h2, .buiten .bt-tekst h3 { margin: 6px 0 0; font: 700 21px/1.15 var(--display); color: var(--inkt); }
.buiten .bt-tekst ul, .buiten .bt-tekst ol { margin: 0; padding-left: 20px; }
.buiten .bt-tekst ul { list-style: disc; }
.buiten .bt-tekst ol { list-style: decimal; }
.buiten .bt-tekst li + li { margin-top: 4px; }
.buiten .bt-tekst strong, .buiten .bt-tekst b { color: var(--inkt); }
.buiten .bt-tekst img { border-radius: var(--r); }
.buiten .bt-tekst blockquote { margin: 0; padding: 8px 14px; border-left: 3px solid var(--goud); background: rgb(255 255 255 / 0.45); font-style: italic; }

/* Rangen: de tabel uit de kit, met de betekenis onder de Turkse naam. */
.buiten .tabel .bt-bet { display: block; font: italic 600 11.5px/1.2 var(--sans); color: var(--inkt-zacht); }
.buiten .tabel td.bt-vrij { min-width: 180px; white-space: normal; color: #4a3826; }
.buiten .bt-rangen { display: none; }

/* Personages: portret in een gouden lijst, naam en wie ze zijn. */
.buiten .bt-gezichten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.buiten .bt-gezichten li { display: grid; justify-items: center; gap: 6px; padding: 16px 14px; text-align: center; border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.48)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); }
.buiten .bt-gezichten img { width: 96px; height: 96px; padding: 3px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--rand-goud); box-shadow: 0 4px 10px rgb(60 35 10 / 0.3); }
.buiten .bt-gezichten h2 { margin: 4px 0 0; font: 700 21px/1.1 var(--display); color: var(--inkt); }
.buiten .bt-gezichten p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--inkt-zacht); }

/* Andere hoofdstukken als kleine knoppen met een icoon. */
.buiten .bt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.buiten .bt-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 6px; border-radius: var(--r); background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 1.5px var(--lijn-perkament), 0 2px 0 rgb(120 85 35 / 0.14); font-weight: 700; color: var(--inkt) !important; text-decoration: none; }
.buiten .bt-chips a:hover { box-shadow: 0 0 0 2px #c99a48, 0 2px 0 rgb(120 85 35 / 0.2); }
.buiten .bt-chips img { width: 30px; height: 30px; }

/* Nieuws: elk bericht een firman met een lakzegel, de datum en het begin van de tekst. */
.buiten .bt-firmans { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.buiten .bt-firmans a { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px 14px 12px; border-radius: var(--r-groot); background: radial-gradient(ellipse 60% 120% at 0% 0%, rgb(255 240 200 / 0.6), transparent 60%), linear-gradient(180deg, #fffaf0, #f3e5c4); box-shadow: 0 0 0 1px #d9bd83, 0 3px 0 rgb(120 85 35 / 0.16); color: var(--inkt) !important; text-decoration: none; transition: box-shadow 140ms, transform 140ms var(--ease); }
.buiten .bt-firmans a:hover { box-shadow: 0 0 0 2px #c99a48, 0 3px 0 rgb(120 85 35 / 0.2); transform: translateY(-1px); }
.buiten .bt-firmans a > img { grid-row: 1 / 4; width: 58px; height: 58px; transform: rotate(-6deg); filter: drop-shadow(0 3px 3px rgb(80 30 10 / 0.3)); }
.buiten .bt-firmans time { font: 800 11px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #8a5a1c; }
.buiten .bt-firmans h2 { margin: 0; font: 700 22px/1.1 var(--display); color: var(--inkt); }
.buiten .bt-firmans p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--inkt-zacht); }
.buiten .bt-firmans .lees { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: #7a4a12; }
.buiten .bt-bladeren { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.buiten .bt-bladeren > span { font-size: 13px; color: var(--inkt-zacht); font-variant-numeric: tabular-nums; }

/* Eén bericht: de firman voluit. */
.buiten .bt-bericht { position: relative; display: grid; gap: 12px; padding: 22px 24px 24px; border-radius: var(--r-groot); background: radial-gradient(ellipse 70% 110% at 0% 0%, rgb(255 240 200 / 0.7), transparent 60%), linear-gradient(180deg, #fffaf0, #f1e2bd); box-shadow: 0 0 0 1px #d9bd83, 0 0 0 5px rgb(255 250 240 / 0.7), 0 0 0 6.5px #c99a48, 0 8px 22px rgb(80 50 20 / 0.18); margin: 6px; }
.buiten .bt-bericht .bt-kop > :is(.bt-kicker, h1) { padding-right: 64px; }
.buiten .bt-bericht .bt-zegel { width: 64px; height: 64px; }

/* Veelgestelde vragen: uitklapbare rijen op perkament. */
.buiten .bt-vragen { display: grid; gap: 8px; }
.buiten .bt-vragen details { border-radius: var(--r-groot); background: linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.45)); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 2px 0 rgb(120 85 35 / 0.12); }
.buiten .bt-vragen details[open] { box-shadow: 0 0 0 1.5px #c99a48, 0 3px 0 rgb(120 85 35 / 0.16); }
.buiten .bt-vragen summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.buiten .bt-vragen summary::-webkit-details-marker { display: none; }
.buiten .bt-vragen summary h2 { flex: 1; min-width: 0; margin: 0; font: 700 19px/1.2 var(--display); color: var(--inkt); }
.buiten .bt-vragen summary .pijl { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: rgb(120 85 35 / 0.1); color: #8a5a1c; transition: transform 200ms var(--ease); }
.buiten .bt-vragen summary .pijl svg { width: 16px; height: 16px; }
.buiten .bt-vragen details[open] summary .pijl { transform: rotate(180deg); }
.buiten .bt-vragen details > p { margin: 0; padding: 0 16px 14px; font-size: 14.5px; line-height: 1.6; color: #4a3826; }

/* Pers: feiten als sleutel en waarde, teksten om te kopiëren, banners met insluitcode. */
.buiten .bt-feiten { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.buiten .bt-feiten dt { color: var(--inkt-zacht); font-weight: 600; }
.buiten .bt-feiten dd { margin: 0; color: var(--inkt); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.buiten .bt-blok { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r); background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px var(--lijn-perkament); min-width: 0; }
.buiten .bt-blok-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.buiten .bt-blok-kop > :first-child { margin: 0; font: 800 11.5px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8a5a1c; }
.buiten .bt-blok-kop .knop { margin-left: auto; }
.buiten .bt-blok p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--inkt); }
.buiten .bt-blok textarea { width: 100%; min-height: 0; resize: none; font: 500 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.buiten .bt-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13px; font-weight: 700; }
.buiten .bt-logo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.buiten .bt-logo > a { display: grid; place-items: center; padding: 16px; border-radius: var(--r); background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px var(--lijn-perkament); }
.buiten .bt-logo img { max-width: 360px; width: 100%; height: auto; }
.buiten .bt-logo a + a img { width: 80px; height: 80px; border-radius: 16px; }
.buiten .bt-beelden { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.buiten .bt-beelden.gsm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buiten .bt-beelden a { display: block; overflow: hidden; border-radius: var(--r); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 8px rgb(80 50 20 / 0.18); }
.buiten .bt-beelden img { display: block; width: 100%; height: auto; }
.buiten .bt-beelden p { margin: 5px 0 0; font-size: 12.5px; color: var(--inkt-zacht); }
.buiten .bt-sub { margin: 4px 0 0; font: 800 11.5px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8a5a1c; }
.buiten .bt-banner img { max-width: 100%; height: auto; }

/* Foutpagina's: een groot icoon, de titel en de weg terug. */
.buiten .bt-fout-vak { display: grid; justify-items: center; gap: 10px; padding: 26px 18px 28px; text-align: center; }
.buiten .bt-fout-vak > img { width: 110px; height: 110px; filter: drop-shadow(0 6px 8px rgb(80 50 20 / 0.3)); }
.buiten .m-body .bt-fout-vak h1 { margin: 0; font: 700 34px/1.1 var(--display); color: var(--inkt); text-wrap: balance; }
.buiten .bt-fout-vak p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--inkt-zacht); }
.buiten .bt-fout-vak .m-actie { margin-top: 8px; }

/* Voettekst onder het venster, op de donkere stad. */
.buiten .bt-voet { display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 12.5px; }
.buiten .bt-voet p { margin: 0; }
.buiten .bt-voet nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px; }
.buiten .bt-voet nav > a { padding: 4px 6px; border-radius: 6px; font-weight: 600; text-decoration: none; }
.buiten .bt-voet nav > a:hover { color: var(--goud-licht); text-decoration: underline; }
.buiten .bt-voet nav > a[aria-current="page"] { color: var(--goud-licht); }
.buiten .bt-voet .lang-switch summary { color: var(--tekst); }
.buiten .bt-maker { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.buiten .bt-maker a { font-weight: 700; color: var(--goud) !important; text-decoration: none; }

@media (max-width: 760px) {
  .buiten .m-body .bt-kop h1 { font-size: 29px; }
  .buiten .bt-kop h1 img { width: 38px; height: 38px; }
  .buiten .bt-firman { padding: 18px 16px 16px; margin: 6px 5px 0; }
  .buiten .bt-firman .bt-kop > :is(.bt-kicker, h1) { padding-right: 46px; }
  .buiten .bt-zegel { width: 54px; height: 54px; top: 8px; right: 8px; }
  .buiten .bt-bericht { padding: 18px 16px; margin: 6px 5px; }
  .buiten .bt-bericht .bt-kop > :is(.bt-kicker, h1) { padding-right: 44px; }
  .buiten .bt-bericht .bt-zegel { width: 50px; height: 50px; }
  .buiten .bt-inlog { grid-template-columns: minmax(0, 1fr); }
  .buiten .bt-kaart { padding: 16px 14px; }
  .buiten .bt-oproep > p { font-size: 22px; }
  .buiten .bt-feiten { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .buiten .bt-feiten dd { margin-bottom: 8px; }
  .buiten .bt-logo { grid-template-columns: minmax(0, 1fr); }
}
/* Op een smalle gsm worden de pijlers rijen: het gebouw links, de tekst ernaast. */
@media (max-width: 520px) {
  .buiten .bt-pijlers { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .buiten .bt-pijlers .kaartje { flex-direction: row; align-items: center; }
  .buiten .bt-pijlers .kaartje > img { width: 92px; flex-shrink: 0; aspect-ratio: 1; padding: 6px; align-self: stretch; height: auto; }
  .buiten .bt-pijlers .inhoud { padding: 10px 12px; }
  .buiten .m-actie { width: 100%; }
  .buiten .m-actie .knop { flex: 1 1 100%; min-width: 0; }
  .buiten .bt-register a { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
  .buiten .bt-register a > img { width: 46px; height: 46px; }
  .buiten .bt-register b { font-size: 19px; }
  .buiten .bt-firmans a { grid-template-columns: 44px minmax(0, 1fr); gap: 3px 10px; }
  .buiten .bt-firmans a > img { width: 44px; height: 44px; }
  .buiten .bt-firmans h2 { font-size: 20px; }
  /* Rangen: op een smalle gsm een lijst in plaats van een tabel. */
  .buiten .bt-rangtabel { display: none; }
  .buiten .bt-rangen { display: grid; }
}

/* Een los hoofdstuk na de lopende tekst krijgt wat lucht en een gouden lijn erboven. */
.buiten .bt-hoofdstukken + .bt-hoofdstuk, .buiten .bt-gezichten + .bt-hoofdstuk, .buiten .bt-hoofdstuk + .bt-hoofdstuk { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgb(201 154 72 / 0.35); }
.buiten .m-titel small { white-space: normal; overflow: visible; }

/* ======================================================================
   Kop en vel: de Gouden Hoorn bovenaan, die onderaan zacht uitvloeit in de stad erachter, en een vel met goudrand
   en gouden hoeken dat er bij het scrollen overheen schuift. Op de voorpagina eerst de levende stad met de poort.
   ====================================================================== */
.bk-held { position: sticky; top: 0; z-index: 0; display: flex; flex-direction: column; height: 330px; overflow: hidden; background: #1b140d center 60% / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.bk-held.is-groot { height: clamp(560px, 100svh, 780px); }
.bk-held::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(15 10 6 / 0.55) 0%, rgb(15 10 6 / 0.1) 30%, rgb(15 10 6 / 0.35) 70%, rgb(15 10 6 / 0.6) 100%); pointer-events: none; }
.bk-held > :not(.bk-video) { position: relative; z-index: 1; }
.bk-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (prefers-reduced-motion: reduce) { .bk-video { display: none; } }
.bk-nav { display: flex; align-items: center; gap: 14px; padding: 16px max(20px, calc(50% - 650px)) 0; }
.bk-merk { display: inline-flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.bk-merk .cc-logo { font-size: 38px; }
.bk-sultan { flex: none; display: block; width: 58px; height: 58px; padding: 3px; border-radius: 50%; background: var(--rand-goud); box-shadow: 0 0 0 1px #1a120c, 0 6px 16px rgb(0 0 0 / 0.6); }
.bk-sultan img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bk-sultan.groot { width: 116px; height: 116px; }
.bk-links { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; }
.bk-links > a:not(.knop) { padding: 8px 15px; border-radius: 999px; background: rgb(20 14 9 / 0.6); border: 1px solid rgb(240 213 149 / 0.5); color: var(--goud-licht); font: 700 13.5px/1.2 var(--sans); text-decoration: none; backdrop-filter: blur(4px); }
.bk-links > a:not(.knop):hover, .bk-links > a[aria-current="page"] { background: rgb(201 154 72 / 0.35); border-color: var(--goud-licht); }
.bk-links > .knop { min-height: 36px; padding: 0 14px; }
.bk-midden { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 16px 120px; text-align: center; }
.bk-kicker { margin: 0; font: italic 600 15px/1.2 var(--display); letter-spacing: 0.06em; color: #f0d595; text-shadow: 0 1px 3px #000; }
.bk-logo { margin: 0; font: inherit; line-height: 1; }
.bk-logo .cc-logo { font-size: clamp(52px, 9vw, 104px); }
.bk-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.bk-knoppen form { margin: 0; }
.bk-knoppen .knop { min-height: 50px; padding: 0 24px; font-size: 16px; }
.bk-knoppen .knop img, .bk-poort .knop img { width: 26px; height: 26px; margin: -4px 0; }
.bk-verder { margin-top: 14px; font: 700 12.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #f0d595; text-decoration: none; text-shadow: 0 1px 3px #000; }
.bk-verder::after { content: ""; display: block; width: 10px; height: 10px; margin: 8px auto 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }

.bk-vel { position: relative; z-index: 1; margin: -80px max(10px, calc(50% - 680px)) 0; border-radius: 22px 22px 16px 16px; background: linear-gradient(180deg, var(--perkament-1), var(--perkament-2)); box-shadow: 0 0 0 2px #c99a48, 0 0 0 3.5px #1a120c, 0 -18px 50px rgb(0 0 0 / 0.55); }
.bk-vel:has(.bk-stad) { margin-top: -110px; }
.bk-vel > .hoeken { z-index: 6; }

.bk-stad { position: relative; height: clamp(520px, 62vw, 700px); overflow: hidden; border-radius: 20px 20px 0 0; background: #2a1d12 center / cover no-repeat; }
.bk-stad::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(15 10 6 / 0.3), transparent 22%, transparent 78%, rgb(15 10 6 / 0.45)), radial-gradient(ellipse 42% 70% at 80% 52%, rgb(15 10 6 / 0.55), transparent 72%); pointer-events: none; }
.bk-ballonnen { position: absolute; inset: 0 440px 0 0; z-index: 2; pointer-events: none; }
.bk-poort { position: absolute; z-index: 3; right: 34px; top: 50%; width: 410px; transform: translateY(-50%); display: grid; gap: 11px; padding: 26px 28px 24px; border-radius: 16px; background: linear-gradient(180deg, rgb(44 33 25 / 0.95), rgb(23 17 12 / 0.97)); color: var(--tekst); box-shadow: 0 0 0 1.5px #c99a48, 0 0 0 3px rgb(26 18 12 / 0.9), 0 24px 60px rgb(0 0 0 / 0.6); }
.bk-poort .hoeken i { width: 40px; height: 40px; }
.bk-poort h2 { margin: 0; font: 700 31px/1.05 var(--display); color: var(--goud-licht); }
.bk-poort > p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.bk-poort form { margin: 0; }
.bk-poort .knop.breed { width: 100%; min-height: 46px; }
.bk-of { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--tekst-zacht); font: italic 600 14px var(--display); }
.bk-of::before, .bk-of::after { content: ""; flex: 1; height: 1px; background: rgb(201 154 72 / 0.4); }
.bk-inlog { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-inlog .knop { grid-column: 1 / -1; }
.bk-inlog .veld > span { color: var(--tekst-zacht); }
.bk-inlog .veld input { min-height: 44px; }

/* Een gebeurtenis als ballon op een willekeurige plek in de stad; een verse actie licht goud op. */
.bk-bel { position: absolute; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; width: max-content; max-width: 270px; padding: 8px 12px 8px 8px; border-radius: 12px; background: linear-gradient(180deg, rgb(44 33 25 / 0.94), rgb(23 17 12 / 0.96)); border: 1px solid #c99a48; color: var(--tekst); font: 500 12.5px/1.35 var(--sans); box-shadow: 0 8px 18px rgb(0 0 0 / 0.5); transform: translate(-50%, calc(-100% - 8px)); opacity: 0; transition: opacity 450ms ease, transform 450ms ease; }
.bk-bel.is-aan { opacity: 1; transform: translate(-50%, -100%); }
.bk-bel::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: #17110c; border-right: 1px solid #c99a48; border-bottom: 1px solid #c99a48; transform: rotate(45deg); }
.bk-bel img { width: 30px; height: 30px; }
.bk-bel b { color: var(--goud-licht); }
.bk-bel small { display: block; margin-top: 1px; color: var(--tekst-zacht); font-size: 11px; }
.bk-bel.is-nieuw { border-color: #ffd36b; box-shadow: 0 0 0 3px rgb(255 211 107 / 0.25), 0 8px 22px rgb(0 0 0 / 0.55); }

/* De stand van het rijk als lint onder de stad (of bovenaan het vel op de andere pagina's). */
.bk-lint { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; background: linear-gradient(180deg, #24190f, #17110c); border-top: 1.5px solid #c99a48; border-bottom: 1.5px solid #c99a48; }
.bk-vel:not(:has(.bk-stad)) .bk-lint { border-top: 0; border-radius: 20px 20px 0 0; padding-top: 6px; }
.bk-lint > div { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-right: 1px solid rgb(201 154 72 / 0.22); min-width: 0; }
.bk-lint > div:last-child { border-right: 0; }
.bk-lint img { width: 34px; height: 34px; flex: none; }
.bk-lint small { display: block; font: 700 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-zacht); }
.bk-lint b, .bk-lint .font-semibold { font: 700 19px/1.15 var(--display); color: var(--goud-licht); white-space: nowrap; }
.bk-lint b.groen { color: #8fe3a8; }

.bk-inhoud { overflow: visible; min-height: 0; padding: 30px 36px 40px; border-radius: 0 0 16px 16px; }
.bk-inhoud > * + * { margin-top: 16px; }

/* Voorpagina: wat je doet in het rijk en uit de stad. */
.buiten .bt-firman .bt-titel { margin: 0; font: 700 34px/1.05 var(--display); color: var(--inkt); padding-right: 70px; }
.bk-sectie { display: flex; align-items: center; gap: 14px; margin: 34px 0 14px !important; font: 700 30px/1.05 var(--display); color: var(--inkt); }
.bk-sectie::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, #c99a48, transparent); }
.bk-gebouwen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 0 !important; }
.bk-gebouwen > div { text-align: center; }
.bk-gebouwen img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; filter: drop-shadow(0 10px 12px rgb(80 50 20 / 0.28)); }
.bk-gebouwen b { display: block; font: 700 24px/1 var(--display); color: var(--inkt); }
.bk-gebouwen i { display: block; margin-top: 2px; font: italic 600 12px var(--sans); color: #8a5a1c; }
.bk-gebouwen p { margin: 6px auto 0; max-width: 26ch; font-size: 13.5px; color: var(--inkt-zacht); }
.bk-drie { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 0 !important; }
.bk-blad { padding: 18px 20px; border-radius: 14px; background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); min-width: 0; }
.bk-blad h3 { margin: 0 0 6px; font: 700 22px var(--display); color: var(--inkt); }
.bk-nieuws a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgb(160 120 60 / 0.35); color: var(--inkt); text-decoration: none; }
.bk-nieuws a:last-of-type { border-bottom: 0; }
.bk-nieuws img { width: 44px; height: 44px; }
.bk-nieuws time { display: block; font: 700 11px var(--sans); letter-spacing: 0.06em; color: #8a5a1c; }
.bk-nieuws b { display: block; font: 700 17px/1.15 var(--display); }
.bk-nieuws a:hover b { text-decoration: underline; }
.bk-nieuws small { display: block; margin-top: 2px; font-size: 13px; color: var(--inkt-zacht); }
.bk-lijst { margin: 0; padding: 0; list-style: none; }
.bk-lijst li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px dashed rgb(160 120 60 / 0.35); }
.bk-lijst li:last-child { border-bottom: 0; }
.bk-lijst .nr { width: 22px; flex: none; font: 700 18px var(--display); color: #8a5a1c; text-align: center; }
.bk-lijst li > :nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-lijst small { color: var(--inkt-zacht); font-weight: 700; white-space: nowrap; }
.bk-leeg { margin: 6px 0 0; color: var(--inkt-zacht); }
.bk-faq { margin-top: 26px !important; text-align: center; color: var(--inkt-zacht); }

@media (max-width: 1100px) {
  .bk-gebouwen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-drie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-drie .bk-nieuws { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .bk-held { height: 230px; }
  .bk-held.is-groot { height: clamp(520px, 92svh, 640px); }
  .bk-nav { flex-wrap: wrap; gap: 10px; padding: 12px 12px 0; }
  .bk-merk .cc-logo { font-size: 28px; }
  .bk-sultan { width: 44px; height: 44px; }
  .bk-sultan.groot { width: 86px; height: 86px; }
  .bk-links { gap: 6px; }
  .bk-links > a:not(.knop) { padding: 6px 11px; font-size: 12px; }
  .bk-links > .knop { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
  .bk-midden { padding-bottom: 100px; }
  .bk-knoppen { flex-direction: column; width: min(300px, 100%); }
  .bk-knoppen .knop { width: 100%; }
  .bk-verder { display: none; }
  .bk-vel { margin: -60px 6px 0; border-radius: 16px 16px 12px 12px; }
  .bk-vel:has(.bk-stad) { margin-top: -90px; }
  .bk-vel > .hoeken i { width: 34px; height: 34px; }
  .bk-stad { height: auto; padding: 250px 10px 12px; border-radius: 14px 14px 0 0; background-color: #1d140c; background-size: 100% 270px; background-position: top center; }
  .bk-stad::after { background: linear-gradient(180deg, rgb(15 10 6 / 0.25), transparent 40%, rgb(29 20 12 / 0.9) 270px, #1d140c 300px); }
  .bk-ballonnen { inset: 0 0 auto 0; height: 250px; }
  .bk-bel { max-width: 230px; font-size: 11.5px; }
  .bk-poort { position: relative; right: auto; top: auto; width: auto; transform: none; padding: 22px 18px 20px; }
  .bk-poort h2 { font-size: 27px; }
  .bk-lint { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bk-lint > div { flex: none; padding: 10px 16px; }
  .bk-inhoud { padding: 20px 14px 28px; }
  .buiten .bt-firman .bt-titel { font-size: 28px; padding-right: 46px; }
  .bk-sectie { font-size: 25px; margin-top: 26px !important; }
  .bk-gebouwen { gap: 12px; }
  .bk-gebouwen b { font-size: 20px; }
  .bk-gebouwen p { font-size: 12.5px; }
  .bk-drie { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 400px) { .bk-inlog { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Opmaak per paginasoort: alles sluit aan op één raster ---------- */
/* Pers: de brede banners over de hele breedte, de kleine drie naast elkaar met hun voorbeeld op dezelfde hoogte. */
.buiten .bt-banners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.buiten .bt-banners .bt-blok { grid-template-rows: auto 1fr auto auto auto; }
.buiten .bt-banners .bt-blok.is-breed { grid-column: 1 / -1; grid-template-rows: none; }
.buiten .bt-banners .bt-blok:not(.is-breed) .bt-banner { display: grid; place-items: center; min-height: 262px; border-radius: var(--r); background: rgb(120 85 35 / 0.06); }
/* Schermafdrukken: zes in twee rijen van drie. */
.buiten .bt-beelden { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Lange tekst (spelgids, privacy): de inhoud als vaste kolom links, de tekst in een leeskolom ernaast, samen gecentreerd. */
@media (min-width: 1000px) {
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) { display: grid; grid-template-columns: 250px minmax(0, 760px); justify-content: center; column-gap: 44px; row-gap: 16px; }
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) > * { grid-column: 1 / -1; margin-top: 0; }
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) > .bt-inhoud { grid-column: 1; align-self: start; position: sticky; top: 16px; }
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) > .bt-hoofdstukken { grid-column: 2; }
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) > .bt-hoofdstuk { grid-column: 2; }
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) .bt-inhoud ol { grid-template-columns: minmax(0, 1fr); }
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) .bt-hoofdstuk > p { max-width: none; font-size: 15px; }
  .bk-inhoud:has(> .bt-inhoud + .bt-hoofdstukken) .bt-datum { grid-column: 2; }
  /* Het spelgidsoverzicht: de hoofdstukken in twee kolommen. */
  .buiten .bt-register { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
}
/* Een smalle pagina (wachtwoord vergeten, nieuw wachtwoord): kop, kaart en terugknop samen in het midden. */
.bk-inhoud:has(> .bt-smal) { display: grid; justify-content: center; grid-template-columns: minmax(0, 480px); }
.bk-inhoud:has(> .bt-smal) .bt-smal { max-width: none; }

@media (max-width: 1000px) { .buiten .bt-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .buiten .bt-banners { grid-template-columns: minmax(0, 1fr); }
  .buiten .bt-banners .bt-blok:not(.is-breed) .bt-banner { min-height: 0; padding: 10px; }
  .buiten .bt-beelden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* De insluitcode groeit mee met de tekst, zodat in een smal blok niets afvalt. */
.buiten .bt-banners textarea { field-sizing: content; }
.buiten .bt-banners .bt-blok:not(.is-breed) textarea { min-height: 8.6em; }

/* ---------- Nieuws: een uitgelicht bericht, kaarten met een foto uit de stad, en een zijkolom ---------- */
.bn-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; align-items: start; }
.bn-hoofd { display: grid; gap: 16px; min-width: 0; }
.bn-hoofd > .bk-sectie { margin: 12px 0 0 !important; }
.bn-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-filter a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: var(--r); background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px var(--lijn-perkament); color: var(--inkt); font: 700 13.5px/1 var(--sans); text-decoration: none; }
.bn-filter a b { min-width: 22px; padding: 3px 7px; border-radius: 6px; background: rgb(120 85 35 / 0.12); font-size: 11.5px; text-align: center; }
.bn-filter a[aria-current="page"] { background: linear-gradient(180deg, #2c2119, #17110c); color: var(--goud-licht); box-shadow: inset 0 0 0 1px #c99a48; }
.bn-filter a[aria-current="page"] b { background: rgb(201 154 72 / 0.3); color: var(--goud-licht); }

.bn-meta { display: flex; align-items: center; gap: 10px; }
.bn-meta time { font: 800 11px/1.2 var(--sans); letter-spacing: 0.1em; color: #8a5a1c; }
.bn-soort { padding: 3px 8px; border-radius: 5px; font: 800 10.5px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: #8a5a1c; }
.bn-soort.is-update { background: #2b8a44; }
.bn-foto { display: block; overflow: hidden; background: #2a1d12; }
.bn-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
a:hover > .bn-foto img { transform: scale(1.04); }

.bn-uitgelicht { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--r-groot); background: linear-gradient(180deg, #fffaf0, #f3e5c2); box-shadow: 0 0 0 1px #d9bd83, 0 0 0 5px rgb(255 250 240 / 0.7), 0 0 0 6.5px #c99a48, 0 10px 24px rgb(80 50 20 / 0.18); margin: 6px; color: var(--inkt); text-decoration: none; }
.bn-uitgelicht .bn-foto { min-height: 300px; }
.bn-uitgelicht .bn-tekst { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 30px 28px; }
.bn-uitgelicht h2 { margin: 0; padding-right: 50px; font: 700 34px/1.05 var(--display); color: var(--inkt); text-wrap: balance; }
.bn-uitgelicht p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--inkt-zacht); }
.bn-lees { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 800 13.5px var(--sans); color: #7a4a12; }
.bn-lees svg { width: 16px; height: 16px; transition: transform 200ms; }
.bn-uitgelicht:hover .bn-lees svg { transform: translateX(3px); }
.bn-zegel { position: absolute; top: 14px; right: 16px; width: 60px; height: 60px; transform: rotate(-9deg); filter: drop-shadow(0 3px 4px rgb(80 30 10 / 0.35)); pointer-events: none; }

.bn-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bn-kaarten a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-groot); background: rgb(255 255 255 / 0.65); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); color: var(--inkt); text-decoration: none; transition: box-shadow 160ms, transform 160ms; }
.bn-kaarten a:hover { box-shadow: 0 0 0 2px #c99a48, 0 3px 0 rgb(120 85 35 / 0.2); transform: translateY(-1px); }
.bn-kaarten .bn-foto { aspect-ratio: 16 / 7; }
.bn-kaarten .bn-tekst { display: grid; gap: 6px; padding: 14px 16px 16px; }
.bn-kaarten h3 { margin: 0; font: 700 21px/1.1 var(--display); }
.bn-kaarten p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--inkt-zacht); }

.bn-zij { display: grid; gap: 16px; position: sticky; top: 16px; }
.bn-blok { position: relative; padding: 18px; border-radius: var(--r-groot); background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 1px var(--lijn-perkament), 0 3px 0 rgb(120 85 35 / 0.14); }
.bn-blok h2 { margin: 0 0 8px; font: 700 22px/1.1 var(--display); color: var(--inkt); }
.bn-mini { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bn-mini a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgb(160 120 60 / 0.35); color: var(--inkt); text-decoration: none; }
.bn-mini li:last-child a { border-bottom: 0; }
.bn-mini img { width: 64px; height: 44px; border-radius: 8px; object-fit: cover; }
.bn-mini time { display: block; font: 800 10.5px var(--sans); letter-spacing: 0.08em; color: #8a5a1c; }
.bn-mini b { display: block; font: 700 16px/1.15 var(--display); }
.bn-mini a:hover b { text-decoration: underline; }
.bn-alles { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 800 13px var(--sans); color: #7a4a12; text-decoration: none; }
.bn-alles svg { width: 15px; height: 15px; }
.bn-speel { display: grid; justify-items: center; gap: 10px; padding: 24px 20px 20px; text-align: center; background: linear-gradient(180deg, #2c2119, #17110c); box-shadow: 0 0 0 1.5px #c99a48, 0 10px 24px rgb(0 0 0 / 0.3); color: var(--tekst); }
.bn-speel .hoeken i { width: 34px; height: 34px; }
.bn-speel > img { width: 84px; height: 84px; padding: 3px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: var(--rand-goud); }
.bn-speel h2 { margin: 0; color: var(--goud-licht); }
.bn-speel p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.bn-speel form { width: 100%; margin: 0; }
.bn-speel .knop { width: 100%; min-height: 44px; }
.bn-speel .knop img { width: 24px; height: 24px; margin: -4px 0; }
.bn-inlog { font: 700 13px var(--sans); color: var(--goud-licht); }

/* Een bericht: foto als kop, de tekst als firman eronder in een leeskolom. */
.bn-artikel { display: grid; gap: 16px; min-width: 0; }
.bn-kopfoto { height: 300px; overflow: hidden; border-radius: var(--r-groot) var(--r-groot) 0 0; margin: 6px 6px -22px; box-shadow: 0 0 0 1px #d9bd83; }
.bn-kopfoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-firman { position: relative; display: grid; gap: 12px; padding: 26px 32px 26px; border-radius: var(--r-groot); background: linear-gradient(180deg, #fffaf0, #f3e5c2); box-shadow: 0 0 0 1px #d9bd83, 0 0 0 5px rgb(255 250 240 / 0.7), 0 0 0 6.5px #c99a48, 0 10px 24px rgb(80 50 20 / 0.18); margin: 0 6px; }
.bn-firman h1 { margin: 0; padding-right: 60px; font: 700 38px/1.05 var(--display); color: var(--inkt); text-wrap: balance; }
.bn-firman .bt-tekst { font-size: 15.5px; max-width: 68ch; }
.bn-onder { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgb(201 154 72 / 0.4); font: italic 600 15px var(--display); color: #8a5a1c; }
.bn-buren { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bn-buren a { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-groot); background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px var(--lijn-perkament); color: var(--inkt); text-decoration: none; }
.bn-buren a:hover { box-shadow: inset 0 0 0 2px #c99a48; }
.bn-buren a.is-nieuwer { grid-column: 2; text-align: right; }
.bn-buren small { display: inline-flex; align-items: center; gap: 5px; font: 800 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: #8a5a1c; }
.bn-buren .is-nieuwer small { justify-content: flex-end; }
.bn-buren small svg { width: 13px; height: 13px; }
.bn-buren b { font: 700 18px/1.15 var(--display); }

@media (max-width: 1100px) {
  .bn-raster { grid-template-columns: minmax(0, 1fr); }
  .bn-zij { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
  .bn-uitgelicht { grid-template-columns: minmax(0, 1fr); margin: 5px; }
  .bn-uitgelicht .bn-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .bn-uitgelicht .bn-tekst { padding: 18px 16px 20px; }
  .bn-uitgelicht h2 { font-size: 27px; padding-right: 0; }
  .bn-zegel { top: 10px; right: 10px; width: 46px; height: 46px; }
  .bn-kaarten { grid-template-columns: minmax(0, 1fr); }
  .bn-kopfoto { height: 180px; margin: 5px 5px -18px; }
  .bn-firman { padding: 20px 16px 18px; margin: 0 5px; }
  .bn-firman h1 { font-size: 28px; padding-right: 46px; }
  .bn-buren { grid-template-columns: minmax(0, 1fr); }
  .bn-buren a.is-nieuwer { grid-column: auto; }
}
/* Namen in hun rolkleur; het wit van een gewone onderdaan wordt inkt op perkament, net als in het spel. */
.buiten .m-body [style*="color: #ffffff"] { color: var(--inkt) !important; }
.buiten .bk-lijst .font-semibold { font-weight: 700; }
/* De naam in de kleur van zijn rol (zoals in het spel); lange namen worden afgekapt. */
.bk-naam { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.bk-naam > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* De tekst van een bericht: alinea's met lucht, tussentitels in de koppenletter. */
.bn-firman .bt-tekst { gap: 0; }
.bn-firman .bt-tekst p { margin: 0 0 14px; }
.bn-firman .bt-tekst p:last-child { margin-bottom: 0; }
.bn-firman .bt-tekst h2 { margin: 22px 0 6px; font: 700 23px/1.15 var(--display); color: var(--inkt); }
.bn-firman .bt-tekst p:last-child:not(:first-child) { font: italic 600 18px/1.4 var(--display); color: #8a5a1c; margin-top: 8px; }