/* De Stokerij Schiedam
   1. De basis van KK: wat het beheer (formulieren, beeldbibliotheek, lightbox)
      nodig heeft.
   2. De CSS van de Wagtail-site, ongewijzigd overgenomen (site/).
   3. Wat KK daarbovenop nodig heeft (site/kk.css).
   4. Het beheer in de huisstijl van Kaap Kunst, als laatste. */
/* ── ../base/icons.css ── */
[class*="icon-"] {
    display: inline-block;
    mask-position: center;
    mask-size: cover;
    width: 1.5rem;
    height: 1.5rem;
}

.icon-close {
    mask-image: url(../../images/uikit-icons/close-15b2ed35fd5b392564d057667b0b9a0d.svg?vsn=d);
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* .icon-edit {
    mask-image: url(../../images/icon-edit-fd09267ba8328d6780bec4bad30f42d1.svg?vsn=d);
} */

.icon-edit {
    mask-image: url(../../images/uikit-icons/pencil-a0bc4622f024e5d0b964c0d88bc3a04e.svg?vsn=d);
}

/* .icon-trash {
  mask-image: url(../../images/icon-trash-5a2dc75422c229cda91d96d4758be924.svg?vsn=d);
} */

.icon-trash {
    mask-image: url(../../images/uikit-icons/trash-42b373e524cc75a4a5eaccf616d1974a.svg?vsn=d);
}

/* .icon-add {
  mask-image: url(../../images/icon-add-3b9ea3724a7707ccf99c25589622820a.svg?vsn=d);
} */

.icon-add {
    mask-image: url(../../images/uikit-icons/plus-circle-acba33e1739f4298501db3a8d3cf6c83.svg?vsn=d);
}

/* .icon-settings {
  mask-image: url(../../images/icon-settings-f41e5d259a8561a05713d3c74390bedf.svg?vsn=d);
} */

.icon-settings {
    mask-image: url(../../images/uikit-icons/cog-edf071e7a29c25f2ee97474ddee12ed0.svg?vsn=d);
}

.icon-dragdrop {
    mask-image: url(../../images/icon-dragdrop-eac16b5ae81d834c5d8f2aac330f27ef.svg?vsn=d);
}

/* .icon-map {
  mask-image: url(../../images/icon-map-a3e9a06707253aac9279437ab990fb7a.svg?vsn=d);
} */

.icon-map {
    mask-image: url(../../images/uikit-icons/folder-c1bdadcaaac975a8c14db5f6120a4a3c.svg?vsn=d);
}

.icon-save {
    mask-image: url(../../images/icon-save-53b1307ab9c827ff2685248b8a3ab2d1.svg?vsn=d);
}

/* .icon-upload {
  mask-image: url(../../images/icon-upload-141b0aa8044c1cc4b6a418e26bd81f24.svg?vsn=d);
} */

.icon-upload {
    mask-image: url(../../images/uikit-icons/upload-8c078b22af3d4d23552826ec3c9a4923.svg?vsn=d);
}

/* .icon-doc {
  mask-image: url(../../images/icon-doc-5b0508dd4595138627e3b54883b561c8.svg?vsn=d);
} */

.icon-doc {
    mask-image: url(../../images/uikit-icons/file-text-fd66c2dbd2c21d23068256aee20a9fcf.svg?vsn=d);
}

.icon-bulb {
    mask-image: url(../../images/icon-bulb-2f170032e8ea753b9a3929b78dc0debe.svg?vsn=d);
}

/* .icon-search {
  mask-image: url(../../images/icon-search-12450b69ebb01960f770962c89fba581.svg?vsn=d);
} */

.icon-search {
    mask-image: url(../../images/uikit-icons/search-331276ff568e5255f0c27f7401a42f83.svg?vsn=d);
}

.icon-pdf {
    mask-image: url(../../images/icon-pdf-05ccda42ed8dc274fb510f8421d02134.svg?vsn=d);
}

.icon-download {
    mask-image: url(../../images/icon-download-8728065eb51f5de15f128f65e0de4986.svg?vsn=d);
}

.icon-word {
    mask-image: url(../../images/icon-word-17fc9b590088d67983e1210df173fd91.svg?vsn=d);
}

.icon-spreadsheet {
    mask-image: url(../../images/icon-spreadsheet-b363c0ef1f72ee5ff3062c13d83cb582.svg?vsn=d);
}

.icon-presentation {
    mask-image: url(../../images/icon-presentation-4217e1e655f25fa4c45ee7f744b5b230.svg?vsn=d);
}

.icon-text {
    mask-image: url(../../images/icon-text-e43aaf1d6a12f4f7d5c0afccb72b51da.svg?vsn=d);
}

.icon-reset {
    mask-image: url(../../images/icon-reset-ec17cab7f8c7d0cba241e36a0d40f935.svg?vsn=d);
}

.icon-select {
    mask-image: url(../../images/icon-select-a258b1a1ca4ebe4a81f981f91cbd7b39.svg?vsn=d);
}

.icon-login {
    /* mask-image: url(../../images/icon-login-97c2c046b1b87e9622c7d2cd887e4a3d.svg?vsn=d); */
    mask-image: url(../../images/uikit-icons/sign-in-85bf50b9030faa00e8e9cfae39c43182.svg?vsn=d);
}

.icon-logout {
    /* mask-image: url(../../images/icon-login-97c2c046b1b87e9622c7d2cd887e4a3d.svg?vsn=d); */
    mask-image: url(../../images/uikit-icons/sign-out-5221d406d0ae5dd6bb5c97f85002f3b0.svg?vsn=d);
}

.icon-next,
.icon-prev {
    mask-image: url(../../images/icon-next-d5ebb7b1c570bf649b9c09682e3768cd.svg?vsn=d);
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #f7f7f7;
}

.icon-prev {
    mask-image: url(../../images/icon-prev-c2469870f4488bbe0c0f17969bda1692.svg?vsn=d);
}

.icon-facebook {
    /*mask-image: url(../../images/icon-facebook-0ec646bda14f7391ead677a4d864bb23.svg?vsn=d);*/
    mask-image: url(../../images/uikit-icons/facebook-faf81578aab860cc839780e031819bb7.svg?vsn=d);

    width: 2.5rem;
    height: 2.5rem;
    background-color: #f7f7f7;
    margin-right: 1rem;
}

.icon-instagram {
    /*mask-image: url(../../images/icon-instagram-d2205c5220672c44939b0e0261b04689.svg?vsn=d);*/
    mask-image: url(../../images/uikit-icons/instagram-a62c55f9512c8858f79a4fe9d946fb82.svg?vsn=d);

    width: 2.375rem;
    height: 2.375rem;
    background-color: #f7f7f7;
    transform: translateY(-0.0625rem);
}

.icon-bluesky {
    mask-image: url(../../images/uikit-icons/bluesky-36625b6d441269ec82248849b8efbbf0.svg?vsn=d);

    width: 2.5rem;
    height: 2.5rem;
    background-color: #f7f7f7;
}

.icon-menu {
    mask-image: url(../../images/uikit-icons/menu-dff723e996096ef0d5f09ed62bab789e.svg?vsn=d);
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 999;
}

.icon-vimeo {
    mask-image: url(../../images/icon-vimeo-1da8e35599fcd666f0392d3022a87b4f.svg?vsn=d);
    width: 2.5rem;
    height: 2.5rem;
    background-color: #f7f7f7;
}

.admin.actions .icon-close,
.modal-overlay .icon-close {
    position: static;
    width: 1.25rem;
    height: 1.25rem;
}

.icon-pay {
    mask-image: url(../../images/uikit-icons/bag-d5e2f52e4196be07c9e1fbb5bcec2b5b.svg?vsn=d);
    background-color: #fff;
}

.icon-card {
    mask-image: url(../../images/uikit-icons/credit-card-ab63a111102f56a79a129ce677ae163f.svg?vsn=d);
    background-color: #fff;
}

.icon-linkedin {
    mask-image: url(../../images/uikit-icons/linkedin-64b5270df41884fdf2d2807d1cbe0a3d.svg?vsn=d);
    background-color: #333;
}

.icon-tickets {
    mask-image: url(../../images/icon-tickets-74d316fe32e223ad34fa2f6f4cd05040.svg?vsn=d);
    background-color: currentColor;
}

/* Het kaartje/label uit de UIkit-set. Staat naast een kaartjeslink; de mask
   neemt de kleur van de tekst eromheen over. */
.icon-tag {
    mask-image: url(../../images/uikit-icons/tag-ea7b096d08dd553fcb78eda39b74c503.svg?vsn=d);
    background-color: currentColor;
}

.icon-envelope {
    mask-image: url(../../images/icon-envelope-f5c82d1cca610c68d9b2464df63d6a8a.svg?vsn=d);
}

.icon-home {
    mask-image: url(../../images/icon-home-adf455e2cb70b317d350127b93c87422.svg?vsn=d);
}

@media (width > 48rem) {
    .icon-menu {
        display: none;
    }
}


/* ── ../base/reset.css ── */
html,
body {
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

html {
    scrollbar-gutter: stable;
}

/* Basis fade-in.

   Alleen `opacity`, geen `transform`. Hier stond een `translateY(8px)` erbij, en
   dat brak `position: fixed` op elke pagina: zolang `<html>` een transform draagt
   is hij zélf de houder van alles wat fixed staat, en dan hangt zo'n element aan
   het document in plaats van aan het venster — het scrolt dus mee. Duurde maar
   0,2s, maar precies in de 0,2s waarin een pagina binnenkomt. */
html {
    animation: pageLoad 0.2s ease-out;
}

@keyframes pageLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Layout stability */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Smooth font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body * {
    box-sizing: border-box;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: currentColor;
}

img {
    max-width: 100%;
    height: auto;
}

p {
    margin: 1.25rem 0;
    line-height: 1.8;
}

button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1rem;
}

/* Verwijderknoppen waren links (`<a href="#" phx-click>`), en zijn nu echte
   knoppen: een handeling is geen adres, en een link naar `#` is voor een
   schermlezer en voor het toetsenbord iets anders dan hij doet. Een `<button>`
   krijgt van de browser een eigen letter, kleur en binnenruimte, waar een
   `<a>` die van zijn omgeving erft. Deze regel geeft zo'n knop dezelfde
   uitgangspositie als de link die hij was. `:where` houdt de specificiteit op
   nul: elke eigen regel van een tenant wint. Alleen met de class `als-link`,
   zodat knoppen die altijd al knop waren niet veranderen. */
:where(button.als-link) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: inherit;
    text-align: inherit;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
}

figure {
    margin: 0;
    padding: 0;
}

blockquote {
    margin: 0;
}

/* `bestand_kiezen/1` (CoreComponents): het bestandsveld van de browser
   ("Choose file") onzichtbaar, maar wel bereikbaar met Tab; het label eromheen
   met de eigen knop opent de keuze. Hier en niet in drop.css, omdat elke
   tenant dit bestand laadt. */
.bestand-kiezen {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    cursor: pointer;
}

.bestand-kiezen-veld {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.bestand-kiezen-veld:focus-visible + .bestand-kiezen-knop {
    outline: 0.125rem solid currentColor;
    outline-offset: 0.125rem;
}


/* ── ../base/base.css ── */
html {
  scroll-behavior: auto;
}

body.no-scroll {
  overflow-y: hidden;
}

.outer {
  width: 100%;
  min-height: 100vh;
}

.inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

main.main {
  flex-grow: 1;
}

.wrap {
  max-width: 80rem;
  margin: auto;
  width: 100%;
}

.footer-inner {
  padding: 2rem;
  text-align: center;
}

#back-to-top {
  display: none;
  padding: 2rem 0;
}

#back-to-top.visible {
  display: flex;
  justify-content: center;
  align-items: center;
}

#back-to-top button {
  font-size: 1.125rem;
  text-decoration: underline;
}

strong + p {
  margin-top: 0;
}

.body-no-scroll {
  overflow-y: hidden;
}

.hidden {
  display: none !important;
}

@media (width < 80rem) {
  .index,
  header.header .header-inner,
  .home-productions > h2,
  .home-productions ul.cards {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

a {
  color: currentColor;
}

/* ── De gevel van een video ──────────────────────────────────────────────

   Wat er staat vóór er iets speelt: een beeld met een afspeelteken, waar de
   speler pas bij een klik in komt (VideoPoster in assets/js/hooks.js). Een
   iframe van Vimeo, YouTube of Bunny is geen plaatje maar een programma, en
   drie video's onder een voorstelling waren dus drie programma's die begonnen
   te werken zodra de pagina laadde.

   Staat hier en niet in een tenantbestand: dit is dezelfde gevel op de
   voorstellingspagina en op de film-tv index, en base.css importeert elke
   tenant. De film-tv-kaart heeft zijn eigen, specifiekere regels in
   <tenant>/base/film-tv.css; die blijven winnen.

   De maat komt van de tenant, want die had hem al voor de speler die hier
   stond: elk vel dat `.video-players iframe` een kader gaf, geeft nu ook
   `.bunny-poster-card` datzelfde kader. */

.bunny-poster-card {
  position: relative;
  display: block;
  background: #000;
  overflow: hidden;
}

/* De speler die er na de klik in komt vult de gevel, en erft niet nog eens de
   marge die de tenant aan `.video-players iframe` gaf — die zit al op het
   kader eromheen. */
.bunny-poster-card > iframe {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
}

/* ── Vergroten ───────────────────────────────────────────────────────────

   Onze eigen knop voor volledig scherm, rechtsboven op het kader. De spelers
   hebben er zelf een, maar die is van hun balk afhankelijk: in de smalle kolom
   van een kamer is de speler 23.5rem breed, en dan is het pictogram van Bunny
   nauwelijks te raken en laat Vimeo het weg. Deze houdt altijd dezelfde maat.

   Hij staat er pas als de speler geladen is (`hidden` gaat er in de hook af);
   op een stilstaand beeld valt niets te vergroten. */
.video-vergroot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}

.video-vergroot:hover,
.video-vergroot:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

/* `display: grid` hierboven wint het van de standaardregel van de browser voor
   `[hidden]`, en dan staat de knop er al op het stilstaande beeld — waar niets
   te vergroten valt. Vandaar deze regel erbij. */
.video-vergroot[hidden] {
  display: none;
}

/* Op volledig scherm vult het kader het scherm: de 16/9 die het in de pagina
   draagt zou er anders een balk omheen leggen op elk ander schermformaat. */
.bunny-poster-card:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #000;
}

.bunny-poster-card:fullscreen > iframe {
  width: 100%;
  height: 100%;
}

.bunny-poster {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: #000;
  position: relative;
  cursor: pointer;
}

/* `contain` en niet `cover`: het kader is liggend en een film hoeft dat niet te
   zijn. De trailer van Oer en andere tijden is 480x848, en met `cover` werd die
   op breedte volgeschaald en boven- en onderaan afgesneden — je zag het midden
   van een staand beeld. Nu staat het hele beeld erin, met zwart ernaast, en dat
   is ook precies wat de speler ná de klik laat zien: die legt een staande film
   net zo goed op zijn zwarte ondergrond. Wat je vóór de klik ziet is dus wat je
   krijgt.

   Voor een liggende bron van 16:9 — dat is verreweg het meeste — maakt het
   verschil niets uit: dan vult het beeld het kader precies. */
.bunny-poster > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Het bewegende lusje ligt óver de still in plaats van in de plaats ervan, en
   draagt `loading="lazy"` in de HTML. Dat is de hele afweging en geen detail:
   zo'n lusje is ruim een halve MB tegen ongeveer 40 kB voor een still. Nu
   staat de still er meteen en haalt de browser het lusje op zodra het kader in
   beeld komt. */
.bunny-poster > .bunny-poster-beweegt {
  position: absolute;
  inset: 0;
}

/* Wie beweging heeft afgezet krijgt de still. Het lusje wordt dan nog wel
   opgehaald — een `<img>` die je in CSS verbergt haalt de browser toch op —
   maar dat is een enkele bezoeker, en de rest van de pagina hangt er niet van
   af. */
@media (prefers-reduced-motion: reduce) {
  .bunny-poster > .bunny-poster-beweegt {
    display: none;
  }
}

/* Een schijf met een driehoek: het teken dat zegt dat hier film onder zit. De
   driehoek is getekend en geen letter — ▶ (U+25B6) is op de meeste systemen
   een kleuren-emoji, en dan staat er een oranje blokje in de schijf. */
.bunny-poster .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  transition: background 0.15s, transform 0.15s;
}

/* Iets naar rechts: een driehoek weegt aan zijn platte kant, dus het
   meetkundige midden ligt links van het optische. */
.bunny-poster .play-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.35rem;
  border-style: solid;
  border-width: 0.75rem 0 0.75rem 1.25rem;
  border-color: transparent transparent transparent currentColor;
}

.bunny-poster:hover .play-icon,
.bunny-poster:focus-visible .play-icon {
  background: rgba(0, 0, 0, 0.75);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Zonder tenantregel toch een kader: 16:9 is de maat van vrijwel al het
   materiaal, en zonder hoogte klapt een gevel zonder still dicht tot een
   streep. Elke tenant die `.video-players iframe` al een eigen maat gaf,
   overschrijft dit hieronder in zijn eigen bestand. */
.video-players .bunny-poster-card {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* De rij fondsenlogo's — onder een voorstelling en op een over-ons-pagina,
   want dat is dezelfde rij. Zonder maat staat elk logo op zijn eigen
   bestandsformaat in de pagina: een svg zonder breedte vult de hele kolom, en
   drie fondsen onder elkaar zijn dan een scherm vol. Een fonds is een
   voetnoot en geen beeld, dus een rij kleine logo's.

   De hoogte is de maat en de breedte volgt: zo wegen een staand logo (het
   AFK) en een liggend (Stichting Melanie) even zwaar. `object-fit` erbij
   omdat niet elk logo een eigen formaat meebrengt — dat van Melanie heeft
   alleen een viewBox, en zonder vaste hoogte meet de browser hem op nul.
   Een tenant die de fondsen groter of anders wil, overschrijft dit in zijn
   eigen bestand; die worden ná dit bestand geladen. */
.logos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.logos li {
  margin: 0;
}

.logos img {
  height: 3.5rem;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}


/* ── ../base/flatpickr.css ── */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}

/* ── ../base/image-library-modal.css ── */
/* ── brandpunt.css ── */
/* De brandpuntkiezer (KaapkunstvlijtWeb.BrandpuntKiezer).
   Geïmporteerd via base/image-library-modal.css, dat elke tenant al laadt.
   Het venster staat in een portal onder <body>, dus deze regels hangen niet
   aan een formulier of aan de beeldbank. Systeemkleuren (Canvas, CanvasText)
   zodat het venster in elk beheer leesbaar is zonder een eigen palet. */

.brandpunt-open {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.brandpunt-laag {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.brandpunt-achtergrond {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.brandpunt-venster {
  position: relative;
  width: min(64rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.25rem;
  background: Canvas;
  color: CanvasText;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.brandpunt-venster header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brandpunt-venster h2 {
  margin: 0;
  font-size: 1.25rem;
}

.brandpunt-sluit {
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.brandpunt-uitleg {
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
}

.brandpunt-werk {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.25rem;
  align-items: start;
}

/* De knop krimpt om de foto heen, zodat een klik op de knop ook een klik op
   de foto is: de hook rekent in procenten van het beeld zelf. Geen
   object-fit hier, anders klopt die rekensom niet meer. `fit-content` met
   een `max-width` houdt de knop zo breed als de foto, maar nooit breder dan
   zijn kolom. */
.brandpunt-foto {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  justify-self: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: crosshair;
  line-height: 0;
}

.brandpunt-foto img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
}

.brandpunt-foto:focus-visible {
  outline: 0.2rem solid Highlight;
  outline-offset: 0.2rem;
}

.brandpunt-stip {
  display: none;
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.625rem 0 0 -0.625rem;
  border: 0.2rem solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.heeft-punt .brandpunt-stip {
  display: block;
}

.brandpunt-voorbeelden {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.brandpunt-voorbeelden li {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  font-size: 0.8rem;
}

/* `--verhouding` zet de component; een staand voorbeeld wordt niet hoger dan
   11rem, een liggend vult de kolom. */
.brandpunt-kader {
  width: min(100%, calc(11rem * var(--verhouding, 1)));
  overflow: hidden;
  background: rgba(127, 127, 127, 0.2);
}

.brandpunt-kader img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--brandpunt, 50% 50%);
}

.brandpunt-venster footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.brandpunt-stand {
  margin: 0 auto 0 0;
  font-size: 0.9rem;
}

.brandpunt-wis,
.brandpunt-klaar {
  font: inherit;
  padding: 0.4rem 0.9rem;
  border: 0.0625rem solid currentColor;
  border-radius: 0.25rem;
  background: none;
  color: inherit;
  cursor: pointer;
}

.brandpunt-klaar {
  background: CanvasText;
  color: Canvas;
}

@media (max-width: 48rem) {
  .brandpunt-werk {
    grid-template-columns: 1fr;
  }
}



.modal-overlay,
.gallery-upload {
  border-top: none !important;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 2rem 2rem 0 2rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
  inset: 0;
  overflow-y: auto;
}

.modal-overlay header button.button {
  position: fixed;
  left: 80%;
  top: unset;
  bottom: 2rem;
  z-index: 1000;
}

/* Uploadblokken van de bibliotheken staan standaard uit. Ze bevatten zelf een
   `<form>`, en op de meeste schermen wordt de bibliotheek gerenderd bínnen een
   nog openstaand formulier; genest gooit de browser de binnenste weg en
   verstuurt de knop het formulier eromheen.

   Een scherm dat zijn modal buiten dat formulier tekent, zet het blok aan
   (`allow_uploads={true}` op het component). Zo volgen de overige schermen één
   één, zonder dat er ondertussen een knop staat die stilletjes het verkeerde
   doet. */
.upload-section {
  display: none;
}

.upload-section.upload-enabled {
  display: block;
}

.modal-content {
  position: relative;
  max-width: 90rem;
  margin: auto;
}

/* De voet van het videovenster: de stand links, de klaar-knop rechts. Plakt
   onderaan, want de lijst erboven kan lang zijn en dan moet die knop niet
   onder in de scroll verdwijnen — hij is het antwoord op "en nu?". */
.video-bibliotheek-voet {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 0;
    background: inherit;
}

.video-bibliotheek-stand {
    margin: 0;
    font-size: 0.875rem;
}

/* De kop van een bibliotheekvenster: titel links, kruisje rechts, op één regel.
   Alleen de eigen kop van het venster — de bibliotheek zelf heeft er binnenin
   nog een (`.image-library-header`) met het zoekveld erin, en die moet blijven
   zoals hij is. Vandaar de kindselectors. */
.modal-overlay > .wrap > header,
.modal-overlay > .modal-content > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Het kruisje van dat venster. De kleur staat hier omdat een pictogram een
   masker is: het is precies zo zichtbaar als zijn achtergrondkleur.
   `base/admin-delfts-blauw.css` zet elk pictogram in een modal op wit
   (`.modal-overlay [class*="icon-"]`) én de modal zelf ook — op elke tenant
   behalve Hotel Modern, dat zijn eigen inktregel heeft, was dit kruisje dus wit
   op wit. Met `currentColor` volgt het de kop ernaast en klopt het overal. */
.modal-overlay > .wrap > header > .icon-close,
.modal-overlay > .modal-content > header > .icon-close {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.modal-overlay > .wrap > header > .icon-close:hover,
.modal-overlay > .modal-content > header > .icon-close:focus-visible {
  opacity: 1;
}

.image-options .button,
.document-options .button,
.gallery-actions .button,
.modal-actions .button {
  position: static;
  transform: translateX(0);
  margin-bottom: 0.5rem;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  border: 0.25rem solid #fff;
  background-color: #fff;
}

form#production-form {
  position: relative;
}

.image-grid .image-thumbnail {
  border-radius: 0.5rem 0.5rem 0 0;
}

.image-grid .image-thumbnail img {
  height: 20rem;
  object-fit: cover;
  width: 100%;
}

.image-grid .image-item,
.document-grid .document-item {
  position: relative;
  overflow: hidden;
  border: 0.25rem solid #fff;
  border-radius: 0.25rem;
  transition: transform 0.5s;
}

.image-grid .image-item.selected,
.image-grid .image-item.gallery-selected {
  transform: scale(1.025);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  transition: transform 0.5s ease-out;
}

.image-grid .image-item img:focus-visible {
  opacity: 0.925;
  scale: 0.9;
}

.document-grid .document-item {
  transition: all 0.5s;
}

@media (hover: hover) {
  .image-grid .image-item img:hover,
  .document-grid .document-item:hover {
    cursor: pointer;
    opacity: 0.85;
    scale: 1.0125;
    transition: all 0.3s;
  }

  .document-grid .document-item:hover {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  }
}

.image-grid .image-item .image-info,
.image-grid .image-item .image-actions {
  padding: 1rem;
}

.image-library-header {
  padding: 1rem 0 2rem;
}

p.image-alt-text {
  display: flex;
  text-align: center;
}

p.image-alt-text span {
  margin-right: 0.25rem;
}

.image-library .gallery-selection-info {
  padding: 0.5rem;
  border-radius: 0.25rem;
  margin-top: 3rem;
  text-align: center;
}

/* De bibliotheek kan meters lang zijn. Stonden de knoppen onderaan, dan moest
   wie boven in de lijst een foto aanklikte eerst helemaal naar beneden scrollen
   om die keuze te bevestigen. Ze liggen nu onderin het venster, boven de foto's,
   met een dekkende achtergrond zodat er niets doorheen schuift. */
.image-library-footer.actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  /* `footer.actions` is elders een zwevend balkje met `width: fit-content`;
     hier moet de balk over de volle breedte van de bibliotheek liggen. */
  width: auto;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 0.0625rem solid rgba(0, 0, 0, 0.1);
  justify-content: center;
  margin-top: 2rem;
  background: var(--admin-white, #fff);
}

.image-library-footer.actions .button {
  transform: translateX(0);
}

.admin section.gallery-upload {
  margin: 0;
  padding-top: 8rem;
}

.admin section.gallery-upload .wrap {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 3rem;
}

.admin section.gallery-upload .wrap .drop {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.admin section.gallery-upload .wrap .drop span {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255 152 0 / 30%);
  height: 12rem;
  width: 100%;
  border-radius: 0.5rem;
}

#gallery-upload-section > div > ul.entry-list {
  margin: 4rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  padding: 3rem 1rem;
  border: 0.0625rem solid #999;
  border-radius: 0.0625rem;
}

#gallery-upload-section > div > ul.entry-list li {
  height: 100%;
}

.selection-indicator {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  /* background: #3b82f6; */
  color: white;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

/* ── Zoeken ──────────────────────────────────────────────────────────

   Eén regel met een streep eronder, geen invulvak. Het zoekveld stond als
   formulierveld aangekleed — vol kader, ruime binnenmarge en het vergrootglas
   van 2,25rem half over de rechterrand geschoven — terwijl er hier niets in te
   vullen valt: je typt en het raster reageert meteen. De streep zegt dat
   genoeg, en het pictogram staat links, waar je begint te lezen.

   De lange selector hieronder is nodig, niet sierlijk. `base/form.css` geeft
   elke `input` een placeholder van 1,125rem met 0,25rem letterspatiëring (dat
   was de uitgerekte "z o e k  f o t o's") en witte tekstkleur, en
   `base/admin-delfts-blauw.css` legt daar met `.index.admin.wrap
   input[type="text"]` het blauwe kader overheen. Die laatste weegt vier
   klassen; de importvolgorde verschilt per tenant, dus om er overal bovenuit te
   komen moet deze er vijf hebben. */

.modal-overlay header .search-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 26rem;
  margin: 1.5rem 0 2rem;
  padding-bottom: 0.35rem;
  border-bottom: 0.0625rem solid currentColor;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

/* Focus zit in de streep, niet in een kader eromheen: hij wordt voller en
   dikker. De binnenmarge krimpt met de dikte mee, anders springt de regel een
   pixel omhoog zodra je erin klikt. */
.modal-overlay header .search-section:focus-within {
  opacity: 1;
  padding-bottom: 0.2875rem;
  border-bottom-width: 0.125rem;
}

.modal-overlay .image-library .image-library-header .search-section input.library-search {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 0.35rem 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  letter-spacing: normal;
}

/* Twee lagen focusversiering wegnemen: `base/form.css` legt er een grijze
   outline omheen en `base/admin-delfts-blauw.css` daar nog een blauwe
   box-shadow overheen. Samen tekenden ze precies het kader dat we hierboven
   net hadden weggehaald. De focus blijft zichtbaar in de streep eronder. */
.modal-overlay
  .image-library
  .image-library-header
  .search-section
  input.library-search:focus {
  outline: none;
  box-shadow: none;
}

.modal-overlay
  .image-library
  .image-library-header
  .search-section
  input.library-search::placeholder {
  padding: 0;
  color: inherit;
  opacity: 0.6;
  font-size: 0.95rem;
  letter-spacing: normal;
  text-transform: none;
}

.modal-overlay header h4 {
  font-size: 1.125rem;
  letter-spacing: 0.125rem;
  color: var(--color-red);
  display: none;
}

/* Links van het veld in plaats van eroverheen: de flexvolgorde draait het om,
   zodat de markup (eerst de input, dan het icoon) ongemoeid blijft. */
.modal-overlay header .icon-search {
  order: -1;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  transform: none;
  background-color: currentColor;
}

/* ── Wat er onder een miniatuur staat ────────────────────────────────
   Drie regels met drie rollen, en die moeten uit elkaar te houden zijn:
   de fotograaf (credit), waar de foto hangt (gebruik) en wat erop staat
   (alt-tekst). Ze verschillen in gewicht, niet in kleurtje. */

.image-grid .image-item .image-credit {
  font-weight: 600;
}

.image-grid .image-item .image-credit.missing {
  font-weight: 400;
  opacity: 0.55;
}

/* Het gebruik is een vindmiddel, geen inhoud: kleiner, en het mag niet over
   twee regels uitlopen op een kaart die al vol staat. */
.image-grid .image-item .image-usage {
  font-size: 0.8rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-grid .image-item .image-alt-text {
  font-style: italic;
  opacity: 0.8;
}
/* ── De bibliotheek als fotowand ─────────────────────────────────────

   Het uiterlijk van de kaarten staat in base/gallery.css, gedeeld met de
   sorteerbare galerij van het productieformulier: het zijn twee schermen met
   dezelfde inhoud, dus ze horen er hetzelfde uit te zien. Hier blijft alleen
   staan wat de bibliotheek eigen is — het wegnemen van de witte omlijsting
   waarin de grid vroeger was gevat. */

.image-grid.masonry {
  border: none;
}

.image-grid.masonry .image-item {
  border: none;
  overflow: visible;
}

/* ── Credits in bulk ─────────────────────────────────────────────────

   Een fotograaf schiet zelden één foto: de credits komen in series binnen, en
   dan is één naam op een hele selectie zetten het verschil tussen een handeling
   en een middag klikken. Vandaar het filter op wat nog leeg is, het aanvinken
   in de beheerstand, en de balk onderaan. */

.library-filter {
  margin: 0 0 1rem;
}

.library-filter-toggle {
  padding: 0.3rem 0.7rem;
  border: 0.0625rem solid currentColor;
  border-radius: 1rem;
  background: none;
  color: inherit;
  font-size: 0.8rem;
  font-variant: all-small-caps;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.library-filter-toggle:hover,
.library-filter-toggle.on {
  opacity: 1;
}

/* Aangevinkt staat hetzelfde in beeld als gekozen in de andere standen: één
   taal voor "deze bedoel ik". */
.image-grid .image-item.bulk-selected {
  transform: scale(1.025);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}

.bulk-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.bulk-credit-count {
  font-variant: all-small-caps;
  white-space: nowrap;
}

.bulk-credit input {
  width: 18rem;
  margin: 0;
}

.bulk-notice,
.bulk-credit button:not(.button) {
  margin: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0.7;
}

/* ── Placeholders ────────────────────────────────────────────────────

   `base/form.css` geeft elke placeholder 1,125rem met 0,25rem letterspatiëring
   en een eigen binnenmarge. Dat is gemaakt voor de grote velden van een
   invulformulier; in de kleine velden van de bibliotheek schreeuwt het harder
   dan de ingevulde tekst zelf. Hier dus mee in de pas met de invoer, en
   gedempt — een placeholder is een aanwijzing, geen inhoud. */

.image-library ::placeholder,
.modal-overlay .bulk-credit ::placeholder {
  padding: 0;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  opacity: 0.45;
}

/* De miniatuur is een knop (kiezen met het toetsenbord) en geen klikbare
   `div` meer; zonder deze regel kreeg hij de binnenruimte, rand en achtergrond
   van een browserknop. */
.image-grid button.image-thumbnail {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.image-grid button.image-thumbnail:disabled {
  cursor: default;
}

/* De documentbibliotheek: de titel is de knop waarmee je kiest, en zijn
   `::after` legt een klikvlak over de hele kaart (die staat op
   `position: relative`). De beheerknoppen liggen erboven. */
.document-grid .document-kies {
  /* `.document-item button` (base/documents.css) is bedoeld voor de
     beheerknoppen en maakt elke knop een flexblok; de titel hoort in de regel. */
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}

.document-grid .document-kies::after {
  content: "";
  position: absolute;
  inset: 0;
}

.document-grid .document-item .document-actions {
  position: relative;
  z-index: 1;
}


/* ── ../base/img-panel.css ── */
.img-panel {
    background-color: #ccc;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 9/10;
}

.img-panel figure {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.img-panel .panel {
    position: absolute;
    padding: clamp(1.5rem, 1.368rem + 0.702vw, 2rem)
        clamp(1.5rem, 1.368rem + 0.702vw, 2rem)
        clamp(2rem, 1.842rem + 0.842vw, 2.6rem)
        clamp(1.5rem, 1.368rem + 0.702vw, 2rem);
    width: clamp(17rem, 12.423rem + 19.531vw, 30rem);
    transform: translateY(clamp(4rem, 3.474rem + 2.807vw, 6rem));
    line-height: 1.2;
}

.img-panel .panel header {
    font-size: clamp(1.4rem, calc(1.2909rem + 0.5455vw), 1.7rem);
    margin: 0.5rem 0;
}

.img-panel .panel p {
    margin: 0.25rem 0;
}

.img-panel p.caption {
    margin: 0;
    visibility: hidden;
    height: 0;
}

.img-panel .panel a {
    text-decoration: underline;
}

.brochures-list .img-panel img {
    object-position: initial;
}

@media (width >= 48rem) {
    .img-panel {
        aspect-ratio: 8/6;
    }
}

@media (width >= 60rem) {
    .img-panel {
        aspect-ratio: 16/9;
    }
}

@media (width < 90rem) {
    .img-panel .panel {
        margin-right: 1rem;
    }
}


/* ── ../base/admin.css ── */
.admin.actions {
  display: flex;
  flex-wrap: wrap;
}

/* Banners-repeater is standaard verborgen. Tenants die banners gebruiken
   (bv. servaes) zetten hem weer aan via base/cta-banners.css, dat ná dit
   bestand geïmporteerd wordt. */
.banners-fieldset {
  display: none;
}

.index.admin:last-child {
  margin-bottom: 6rem;
}

.index.admin.wrap:last-child {
  margin-bottom: 0;
}

header .admin.actions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  /* padding: 1rem; */
  justify-content: center;
}

.pages-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  background-color: #fff;
}

.pages-table table thead tr {
  border-bottom: 0.0625rem solid #333;
  padding: 2rem;
}

.pages-table table thead tr th {
  padding: 1rem;
  text-align: left;
}

.pages-table table tbody tr td {
  padding: 1rem;
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 1rem 0 !important;
}

section.index.productions header .admin {
  padding: 2rem 0;
}

.document-upload-section.publicity {
  display: none;
}

@media (width >= 48rem) {
  section.index.productions header .admin .button:not(:last-of-type),
  section.production-detail header .admin.actions .button,
  section.index.agenda-items header .admin.actions .button:not(:last-of-type),
  footer .actions .button:not(:last-of-type),
  .button:not(:last-of-type),
  button.button:not(:last-of-type),
  /* `:last-of-type` telt per element: een Bewerken-link naast een
     verwijderknop (`button`) is de laatste `a` en viel zo buiten de regel.
     Even zwaar als de regel erboven, zodat een tenant die zelf een marge op
     zijn knoppen zet nog steeds wint. */
  .button:not(:last-child):where(:has(~ button)) {
    margin-right: 1rem;
  }
}

@media (width < 48rem) {
  a.logout-link,
  .button.admin {
    position: static;
    transform: translateX(-5rem);
  }
}

/* Achtergrondkleur veld: standaard verborgen, alleen zichtbaar bij zusjesvandijk */
div:has(> .input-background-color) {
  display: none;
}

/* ── Fondsen bij een productie ─────────────────────────────────────────────
   Het keuzeraster hoort bij het productieformulier, dus staat het hier: dit
   bestand laadt elke tenant. Het stond eerder in een los
   base/funder-selector.css dat maar vijf van de achttien tenants
   importeerden; bij de rest viel het blok uit elkaar tot losse vinkjes met
   logo's op ware grootte ertussen.

   Het logo krijgt een vak van een vaste maat en gaat daar met `object-fit`
   in: staande logo's (het AFK) en liggende (Stichting Melanie) laten zich
   dan geen van beide oprekken. Een vak en geen losse maxima, omdat niet elk
   logo een eigen formaat meebrengt — dat van Melanie heeft alleen een
   viewBox, en die meet de browser zonder vak op nul. */
.funder-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1rem;
  background-color: #fff;
  padding: 1rem;
}

.funder-selector label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.25rem;
  aspect-ratio: 1;
  margin-bottom: 0;
  background-color: #f7f7f7;
}

.funder-selector label.is-selected {
  background-color: #e8f5e9;
}

/* Het vinkje is een plaatje van de stand, niet de knop: de klik zit op het
   label eromheen. Zonder dit vangt het vakje zijn eigen klik op en gaat hij
   langs LiveView heen. */
.funder-selector input {
  width: 20%;
  pointer-events: none;
}

.funder-selector img {
  width: 70%;
  height: 7rem;
  object-fit: contain;
}

.funder-selector span {
  align-self: flex-end;
  display: inline-block;
  padding: 1rem;
  font-size: 0.875rem;
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Sorteerbare funders */
.funder-sortable {
  list-style: none;
  padding: 0;
  margin: 0;
}

.funder-sort-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: grab;
}

.funder-sort-item:active {
  cursor: grabbing;
}

.funder-order-hint {
  margin: 0.75rem 0 0.5rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

.funder-sort-item img {
  height: 1.5rem;
  width: auto;
}

.funder-sort-item .drag-handle {
  color: #999;
  font-size: 1rem;
  user-select: none;
}

.funder-sort-item.sortable-ghost {
  opacity: 0.4;
  background: #e8f5e9;
}

.funder-sort-item.sortable-chosen {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.location-mode-toggle {
  display: none;
}

/* Uitleg bij een veld waarvan het effect elders op de site zichtbaar wordt */
.field-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #334155;
  background: #f1f5f9;
  border-left: 3px solid #94a3b8;
  padding: 0.75rem 1rem;
  border-radius: 0 0.375rem 0.375rem 0;
  margin: 0 0 1rem;
}

/* Wie zit er nog meer op deze pagina */
.editors-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.editors-indicator svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Admin kijkt mee terwijl iemand anders bewerkt (read-only) */
.lock-observer {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #f59e0b;
  color: #78350f;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.lock-observer p {
  margin: 0 0 0.5rem;
}

.lock-observer .lock-observer-caveat {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* Wachtkamer: iemand anders heeft het slot, wij schuiven vanzelf door */
.lock-waiting {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 0.25rem solid #64748b;
  color: #1e293b;
  padding: 1.5rem 1.75rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  max-width: 44rem;
}

.lock-waiting h3 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}

.lock-waiting p {
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.lock-waiting .lock-waiting-caveat {
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Het slot was losgelaten wegens stilte en is inmiddels overgenomen */
.lock-lost {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 0.25rem solid #dc2626;
  color: #7f1d1d;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

.lock-lost p {
  margin: 0 0 0.5rem;
}

.lock-lost .lock-lost-caveat {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* De inerte form is niet interactief; toon dat ook visueel */
form[inert] {
  opacity: 0.7;
  filter: grayscale(0.3);
}

.form-validation-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #ef4444;
  color: #991b1b;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

/* Admin-only pricing block op publieke orderpagina */
section.ticketing.order.wrap form .admin-pricing {
  border: 0.0625rem dashed #999;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: rgba(0, 0, 0, 0.03);
}

section.ticketing.order.wrap form .admin-pricing legend {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.5rem;
  color: #555;
}

section.ticketing.order.wrap form .admin-pricing label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

section.ticketing.order.wrap form .admin-pricing input[type="radio"] {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: #003078;
  flex-shrink: 0;
}

section.ticketing.order.wrap form .admin-pricing span {
  flex: 1;
}

/* Order type-badges in /admin/ticket-orders */
.order-type-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  vertical-align: middle;
}

.order-type-discount_20 {
  background: #fef3c7;
  color: #92400e;
}

.order-type-free {
  background: #d1fae5;
  color: #065f46;
}

/* Andere prijzen bij een kaartverkoopmoment (CJP, student, tot 30) */
.ticket-form__prices {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.ticket-form__prices legend {
  margin-bottom: 0.25rem;
  padding: 0;
  font-weight: 600;
}

.ticket-form__prices > p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}

.ticket-form__prices ol {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.ticket-form__prices li {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem 1rem;
  align-items: end;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.1);
}

.ticket-form__prices .ticket-form__price-note {
  grid-column: 1 / -1;
}

.ticket-form__prices li > button {
  justify-self: start;
}

/* Soorten kaarten onder het aantal, als een bestelling er meer heeft */
.order-kinds {
  display: block;
  font-size: 0.8rem;
  opacity: 0.75;
  white-space: nowrap;
}

.ticket-order-summary__breakdown {
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.25rem;
}

/* Wachtlijst onder de bestellingen */
.ticket-waitlist {
  margin-top: 3rem;
}

.ticket-waitlist > p {
  max-width: 40rem;
}

/* ============================================================
   Veld-help (?) + sticky user-badge
   ============================================================ */

.help-tip {
  display: inline-block;
  box-sizing: border-box;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  margin: 0 0 0 0.4rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  font-weight: bold;
  line-height: calc(
    1.2rem - 2px
  ); /* hoogte minus 2× border, centreert ? verticaal */
  text-align: center;
  opacity: 0.5;
  cursor: pointer;
  vertical-align: middle;
  flex: 0 0 auto; /* niet krimpen binnen flex-parents */
  transition:
    opacity 0.15s,
    background-color 0.15s;
}

.help-tip:hover,
.help-tip:focus {
  opacity: 1;
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

/* Velden waarbij het label nu in een <header> staat zodat het ?-knopje
   netjes inline naast het labeltext leeft. De <.input> zelf rendert een
   (lege) <label> die we hier verbergen om dubbele witruimte te voorkomen. */
.field-with-help > div > label:empty {
  display: none;
}

.user-badge {
  position: fixed;
  top: 1.2rem;
  right: 0.8rem;
  z-index: 1000;
  padding: 0.2rem 0.6rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.user-badge:hover {
  opacity: 1;
}

/* driver.js close-knop herstel — onze globale button-reset (background:
   transparent, border:none) sloopt de standaardweergave anders. */
.driver-popover-close-btn {
  cursor: pointer !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  color: #444 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0.4rem !important;
}

.driver-popover-close-btn:hover {
  color: #000 !important;
}

.admin section.afterpage-link {
  padding: 2rem 1.25rem 4rem;
  background-color: #f0d5cc;
  border-left: 0.25rem solid #c44b2b;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 3rem 0;
}

.admin section.afterpage-link header {
  margin-bottom: 0.5rem;
}

.admin section.afterpage-link header p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

/* ── Een veldkop met een knop ernaast ────────────────────────────────

   Voor een veld dat je op twee manieren kunt invullen: met de hand, of door
   iets te kiezen dat er al is. De knop hoort bij het veld en niet naast het
   formulier, dus het is een tekstknop en geen `.button`. */

.index.admin.wrap .veldkop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.index.admin.wrap .veldkop label {
  margin-bottom: 0;
}

.index.admin.wrap .veldknop {
  padding: 0;
  background: none;
  border: none;
  color: var(--admin-blue, #1a4d8f);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.index.admin.wrap .veldknop:hover,
.index.admin.wrap .veldknop:focus-visible {
  color: var(--admin-blue-dark, #003078);
}

/* ── De lijst met video's die al op onze speler staan ─────────────────

   Bij Bunny is een video een GUID die op zoveel plekken mag staan als je
   wilt. Wie hetzelfde bestand twee keer uploadt krijgt dus geen tweede plek
   maar een tweede kopie — dubbele opslag, dubbele verwerking. Deze lijst is
   het alternatief, en staat op elk scherm waar een video gekozen wordt: de
   bioscoop van Hotel Modern en het productieformulier. */

.index.admin.wrap .video-bibliotheek {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

/* Het kaartje zelf houdt zijn witte bodem, nu het venster eronder grijs is.
   De ronding staat hier én op de knop: de knop draagt de rand, het kaartje het
   wit, en zonder dezelfde straal piepen er witte hoeken achter de rand uit. */
.index.admin.wrap .video-bibliotheek li {
  background: var(--admin-white, #fff);
  border-radius: var(--admin-radius, 0.375rem);
}

.index.admin.wrap .video-bibliotheek button {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: none;
  border: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
  border-radius: var(--admin-radius, 0.375rem);
  overflow: hidden;
  cursor: pointer;
}

.index.admin.wrap .video-bibliotheek button:hover,
.index.admin.wrap .video-bibliotheek button:focus-visible {
  border-color: var(--admin-blue, #1a4d8f);
  background: var(--admin-blue-light, #e8f0fb);
}

.index.admin.wrap .video-bibliotheek img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #111;
}

.index.admin.wrap .video-bibliotheek-naam {
  display: block;
  padding: 0.5rem 0.6rem 0;
  font-weight: 600;
}

.index.admin.wrap .video-bibliotheek-herkomst {
  display: block;
  padding: 0.15rem 0.6rem 0.6rem;
  color: var(--admin-text-light, #4a5568);
  font-size: 0.8rem;
  font-variant: all-small-caps;
}

/* Twee groepen in dezelfde bak: wat er los ligt en wat al ergens hangt. De
   kop is klein — hij ordent, hij kondigt niet aan. */
.index.admin.wrap .video-bibliotheek-kop {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  font-variant: all-small-caps;
  letter-spacing: 0.05em;
  color: var(--admin-text-light, #4a5568);
}

.index.admin.wrap .video-bibliotheek-kop:first-of-type {
  margin-top: 1rem;
}

/* Twee soorten kaartjes staan er wél maar zijn niet te kiezen: een video die
   Bunny nog verwerkt (kiezen levert een leeg kaartje op) en de video die al op
   dit kaartje staat (kiezen doet niets). Allebei zichtbaar, want weglaten is
   niet te onderscheiden van "hij is er niet" — en dat is precies de conclusie
   die we willen voorkomen. Grijs en zonder aanwijzer, zodat het te zien is
   voordat je klikt; de reden staat eronder. */
.index.admin.wrap .video-bibliotheek button[disabled] {
  cursor: default;
  opacity: 0.55;
  border-style: dashed;
}

.index.admin.wrap .video-bibliotheek button[disabled]:hover,
.index.admin.wrap .video-bibliotheek button[disabled]:focus-visible {
  border-color: var(--admin-blue-border, #b8d0eb);
  background: none;
}

/* Bunny gaf geen antwoord: de lijst is dan niet compleet, en dat mag de
   redactie weten voordat ze concludeert dat hun upload weg is. */
.index.admin.wrap .video-bibliotheek-waarschuwing {
  margin: 1rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 0.1875rem solid var(--admin-warning, #c47f00);
  background: var(--admin-warning-light, #fdf6e6);
  color: var(--admin-text, #2d3748);
  font-size: 0.9rem;
}

/* Niets te kiezen: zeg dat, in plaats van een leeg vak. */
.index.admin.wrap .video-bibliotheek-leeg {
  margin: 1rem 0 0;
  color: var(--admin-text-light, #4a5568);
  font-style: italic;
}

/* ── De kaartenbak ────────────────────────────────────────────────────

   Een lijst waarin elk item een kaartje is met een greep over de volle
   bovenrand. Begon in de bioscoop van Hotel Modern (/admin/media/bioscoop)
   en staat nu ook bij de video's van een productie, dus staat het hier: dit
   bestand importeert elke tenant, base/media-room-admin.css niet.

   Wat de kaartjes vervangen: een rij vakken over de volle breedte, waar de
   volgorde alleen te zien was door te tellen en de sleepgreep het woordje
   "Versleep" was — een tekstje dat eruitziet als een bijschrift. De greep is
   nu de hele bovenrand, en `.drag-handle` is precies wat SortableJS pakt
   (assets/js/sortable_hooks.js).

   De kleuren komen uit base/admin-delfts-blauw.css. Zeven tenants importeren
   dat thema niet, dus draagt elke variabele hier zijn eigen terugval. */

.index.admin.wrap .media-cards {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.index.admin.wrap .media-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "grip"
    "velden";
  align-content: start;
  background: var(--admin-white, #ffffff);
  border: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
  border-radius: var(--admin-radius, 0.375rem);
  overflow: hidden;
}

/* Niets in de bak: zeg dat, in plaats van een gat tussen de kop en de knop. */
.index.admin.wrap .media-cards-leeg {
  margin: 1.5rem 0;
  color: var(--admin-text-light, #4a5568);
  font-style: italic;
}

/* ── De greep ───────────────────────────────────────────────────────── */

/* Ribbels, een handje en het woord erbij: drie keer hetzelfde zeggen is hier
   geen ruis maar het punt — dit is de plek waar de oude opmaak op faalde. */
.index.admin.wrap .media-card-grip {
  grid-area: grip;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--admin-blue-light, #e8f0fb);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 48, 120, 0.14) 0,
    rgba(0, 48, 120, 0.14) 0.0625rem,
    transparent 0.0625rem,
    transparent 0.25rem
  );
  background-position: right 5.5rem center;
  background-repeat: no-repeat;
  background-size: 2.5rem 0.8125rem;
  border-bottom: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
  color: var(--admin-blue-dark, #003078);
  font-size: 0.8rem;
  cursor: grab;
  user-select: none;
}

.index.admin.wrap .media-card-grip:active {
  cursor: grabbing;
}

.index.admin.wrap .media-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 50%;
  background: var(--admin-blue-dark, #003078);
  color: var(--admin-white, #ffffff);
  font-weight: 700;
}

.index.admin.wrap .media-card-grip .icon-dragdrop {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

.index.admin.wrap .media-card-grip-label {
  font-variant: all-small-caps;
  letter-spacing: 0.02em;
}

/* Verwijderen hangt in dezelfde balk, rechts. Kleurt pas rood als je erheen
   gaat: het is een uitweg, geen aanbod. */
.index.admin.wrap .media-card-delete {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.4rem;
  background: none;
  border: none;
  color: var(--admin-text-light, #4a5568);
  font-size: 0.8rem;
  font-variant: all-small-caps;
  line-height: 1.5rem;
  cursor: pointer;
}

.index.admin.wrap .media-card-delete:hover,
.index.admin.wrap .media-card-delete:focus-visible {
  color: var(--admin-danger, #c53030);
}

.index.admin.wrap .media-card-delete .icon-trash {
  width: 0.9rem;
  height: 0.9rem;
  background-color: currentColor;
}

/* ── De velden ──────────────────────────────────────────────────────── */

.index.admin.wrap .media-card-velden {
  grid-area: velden;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.index.admin.wrap .media-card-velden .field {
  margin: 0;
}

.index.admin.wrap .media-card-velden label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  color: var(--admin-text-light, #4a5568);
}

.index.admin.wrap .media-card-velden input[type="text"] {
  width: 100%;
}

/* De keuzeknoppen dragen hun eigen label; dat mag geen blokje worden zoals de
   labels hierboven. */
.index.admin.wrap .media-card-velden .video-type-toggle label {
  display: inline-block;
  margin: 0;
  font-size: 0.75rem;
  color: inherit;
}

/* Het sleepvak mag niet met de velden mee uitrekken: het hoort onderaan het
   kaartje te liggen, ook als de buurman hoger is. */
.index.admin.wrap .media-card-velden .bunny-upload {
  margin-top: auto;
}

/* ── Slepen ─────────────────────────────────────────────────────────── */

/* Alleen binnen de kaartenbak: `.sortable-ghost` en `.sortable-chosen` zijn
   de klassen van élke sorteerlijst in de admin (zie BASE_OPTIONS in
   assets/js/sortable_hooks.js), en de galerij en de persknipsels hebben hun
   eigen uiterlijk. */
.index.admin.wrap .media-cards .sortable-ghost {
  opacity: 0.4;
}

.index.admin.wrap .media-cards .sortable-chosen {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 48, 120, 0.25);
}

/* ── Smallere schermen ──────────────────────────────────────────────── */

/* Onder de 64rem is een halve kolom te smal voor een kaartje met een
   keuzerij, een codeveld en een sleepvak: dan liever één per rij. */
@media (width < 64rem) {
  .index.admin.wrap .media-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── De sprongbalk boven het voorstellingsformulier ──────────────────────────

   Tien plekken in een formulier van vijfendertig secties. Hij blijft bovenin
   staan terwijl je scrolt, en de plek waar je bent staat aan.

   Eerst stond hij er dun en in kleinkapitalen bij, en dat viel nauwelijks op:
   hij las als een bijschrift boven het formulier in plaats van als iets waar je
   op kunt klikken. Nu is het een band met een eigen grond, in gewone letters,
   en de plek waar je bent is een wit plaatje in die band. */

/* Eén getal voor twee dingen: hoe ver een sectie onder de bovenrand parkeert
   als je erheen springt, én de lijn waarboven de hook een sectie als "hier ben
   je" telt. Stonden die apart, dan liepen ze uiteen en zette de balk na een
   sprong de sectie erbóven aan — precies de fout die dit voorkomt. De hook
   leest hem uit (`--sprong-marge` in hooks.js).

   Ruimer sinds de balk een vaste band over de volle breedte is: hij is nu
   ongeveer 3,4rem hoog, en een kop die er net onder parkeert plakt eraan
   vast. */
.index.admin.wrap {
  --sprong-marge: 5.5rem;
}

/* De balk staat vast bovenin het venster en ligt dus over de bovenkant van het
   werkblad heen. Alleen op schermen die hem hebben. */
.index.admin.wrap:has(.form-sprongbalk) {
  margin-top: 4.5rem;
}

/* Hij stond als een licht plaatje binnen het werkblad: de breedte van de kaart,
   lichtblauw op wit, letters van 0,875rem in de serif van de tenant. Dat is de
   letter van de site — mooi voor een lap tekst, bescheiden voor de enige
   navigatie van een formulier van negenduizend pixels hoog. Je keek eroverheen.

   Nu is het een band over de volle breedte van het venster, met een eigen
   donkere grond, in een schreefloze letter. Dat laatste is het halve verschil:
   een serif kan dit wel dragen, maar niet op deze maat — Noto Serif heeft 400
   en 700 en verder niets, dus "dikker" houdt daar op. Een schreefloze letter
   maakt bovendien meteen duidelijk wat dit is: geen tekst van de site maar het
   gereedschap eromheen. Dezelfde scheiding die elk besturingssysteem maakt.

   Vast en niet plakkend: hij hoort altijd te staan, ook bovenaan de pagina. Het
   werkblad schuift er met een bovenmarge onderuit (zie `--sprong-marge`
   hierboven). */
.form-sprongbalk {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background-color: var(--admin-blue-dark, #003078);
  box-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.25);
  /* De letter van het gereedschap, niet die van de site. Geen bestand erbij:
     dit is wat het scherm zelf al heeft. */
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 1rem;
  line-height: 1;
}

/* De grond loopt van rand tot rand, de namen niet: die staan op dezelfde
   kantlijn als het werkblad eronder. Zelfde maximumbreedte en zelfde zijmarge
   als `.index.admin.wrap`, zodat "Titel" recht boven de titel van de pagina
   staat en niet ergens links in het niets.

   `min-height` en `align-items: stretch` horen bij elkaar. De band was drie rem
   hoog met een raakvlak van twee: een halve rem dood gebied boven en onder elke
   naam, en dát is waardoor je het gevoel kreeg te moeten richten. Nu is elke
   naam zo hoog als de band. */
.form-sprongbalk-binnen {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  /* Dezelfde doos als het werkblad: `.inner.wrap` is tachtig rem breed met
     anderhalve rem opvulling, en de kaart daarbinnen nog eens twee rem. Samen
     drieënhalve rem, en dan valt de kantlijn van de balk samen met die van de
     kaart — breed, waar de doos gecentreerd staat, én smal, waar hij de volle
     breedte neemt. */
  max-width: 80rem;
  min-height: 3.5rem;
  margin: 0 auto;
  padding: 0 3.5rem;
}

/* De negatieve marge vangt de zijruimte van de eerste naam op: zonder dat
   begint "Titel" 0,7rem rechts van de kantlijn van het werkblad, en dat zie
   je. Rechts hetzelfde, voor de laatste uitgang. */
/* Altijd één regel, en hij schuift opzij als hij niet past. Niet omdat
   afbreken lelijk is, maar omdat het het raakvlak sloopt: in een flexdoos die
   mag afbreken wordt een regel zo hoog als zijn inhoud, en dan rekt een naam
   niet meer op tot de hoogte van de band. Precies die halve rem dood gebied
   boven en onder was het "even richten"-gevoel. */
.form-sprongbalk-sprongen {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  margin-left: -0.5rem;
  scrollbar-width: none;
}

.form-sprongbalk-sprongen::-webkit-scrollbar {
  display: none;
}

/* De uitgangen: weg van deze pagina, en dus gescheiden van de sprongen
   ernaast, die erop blijven. De sitekop draagt ze niet meer (zie onderaan). */
.form-sprongbalk-uit {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  margin-right: -0.5rem;
}

/* De omslachtige selector is nodig, niet netjes bedoeld. De algemene linkregel
   van het beheerthema staat op `.index.admin.wrap a[href]:not(.button)` — vijf
   klassen — en die won van een kale `.form-sprongbalk a`: de links kwamen
   daardoor in het middenblauw van een gewone link op deze donkere band te
   staan (nauwelijks te lezen), en hun maat viel terug op 0,875rem. Dit is
   dezelfde vorm met de band erbij, en dat is er één meer. */
.index.admin.wrap .form-sprongbalk a[href]:not(.button) {
  display: flex;
  align-items: center;
  /* Krap gezet, en dat mag: het raakvlak zit in de hoogte, niet in de zijkant.
     Dertien namen plus drie uitgangen moeten samen binnen de tachtig rem van
     het werkblad passen; ruimer opgezet schoof "Status" over de rand. */
  padding: 0 0.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.index.admin.wrap .form-sprongbalk a[href]:not(.button):hover,
.index.admin.wrap .form-sprongbalk a[href]:not(.button):focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}

.index.admin.wrap .form-sprongbalk a[href]:not(.button):focus-visible {
  outline: 0.125rem solid #fff;
  outline-offset: -0.125rem;
}

/* Waar je bent: het plaatje keert om. Een wit vlak van de volle bandhoogte —
   op een armlengte afstand het enige lichte blok in de band, en het leest als
   het tabblad dat openligt. */
.index.admin.wrap .form-sprongbalk a[href]:not(.button).hier {
  color: var(--admin-blue-dark, #003078);
  background-color: var(--admin-white, #fff);
  font-weight: 700;
}

/* De uitgangen staan een tint terug en een maat kleiner: ze horen bij de band,
   maar het zijn niet de sprongen waar de balk voor bestaat. Het scheelt ook de
   ruimte die de sprongen nodig hebben. */
.index.admin.wrap .form-sprongbalk-uit a[href]:not(.button) {
  padding: 0 0.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-weight: 500;
}

.index.admin.wrap .form-sprongbalk-uit a[href]:not(.button):hover {
  color: #fff;
}

/* Het pictogram op de maat van de letter ernaast, en in diezelfde kleur: een
   masker is precies zo zichtbaar als zijn achtergrondkleur, en het beheer zet
   ze standaard op wit (gezet voor donkere knoppen) én op anderhalve rem. Naast
   een regel van 0,875rem is dat een blok. */
.index.admin.wrap .form-sprongbalk-uit [class*="icon-"] {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

/* Een naam breekt nooit in tweeën, en hij krimpt niet: dan wordt de rij smal
   genoeg om te schuiven in plaats van onleesbaar. */
.index.admin.wrap .form-sprongbalk a[href]:not(.button) {
  flex: none;
  white-space: nowrap;
}

/* Op een smal scherm is de zijruimte van het werkblad kleiner; de balk volgt.
   De uitgangen schuiven niet mee met de rij ernaast — die moet je altijd
   kunnen vinden. */
@media (width < 60rem) {
  .form-sprongbalk-binnen {
    gap: 0.5rem;
    padding: 0 1rem;
  }

  .form-sprongbalk-sprongen {
    margin-left: 0;
  }
}

/* ── De kop van de site op een beheerscherm ──────────────────────────────────

   De balk staat vast bovenin het venster en ligt dus over de kop van de site
   heen: de naam van de site, het menu en de uitloglink verdwenen er half
   onder. Die kop hoort hier ook niet — je bewerkt de site, je bezoekt hem niet.

   Alleen op schermen die zo'n balk hebben: een beheerscherm zonder balk zou
   anders helemaal geen uitgang meer overhouden. Wat de kop droeg staat rechts
   in de band terug, inclusief het uitloggen (zie `production_live/form.ex`). */
/* Met `!important`, en dat is hier het eerlijke antwoord in plaats van een
   trucje. Elke tenant zet zijn eigen kop op `display` met een selector die
   zwaarder weegt dan deze — bij Hotel Modern is dat
   `body.hotelmodern:not(:has(.hm-stage)) .header` — en er zijn er zestien. Ze
   allemaal overtreffen zou een selector opleveren die niemand meer kan lezen,
   en de uitspraak is simpel: op een scherm met deze balk hoort die kop er niet
   te staan. */
body:has(.form-sprongbalk) .header {
  display: none !important;
}

/* Het naambordje staat vast in de rechterbovenhoek en zou nu in de band
   liggen, over de uitgangen heen. Het zakt eronder. */
body:has(.form-sprongbalk) .user-badge {
  top: 4.2rem;
}

/* ── De bordjes naar de site ─────────────────────────────────────────────────

   Twee wegen naar buiten: de voorpagina, en de lijst waar deze voorstelling in
   staat. Ze stonden even in de sprongbalk, en dat klopte niet: die balk gaat
   over déze pagina — waar sta ik, waar kan ik heen binnen dit formulier — en
   deze twee wijzen de deur uit.

   Dus hangen ze erbuiten, boven de kaart, precies op de plek waar het menu van
   de site stond voordat de balk die kop verving. Bij Hotel Modern is dat
   letterlijk de gang: kop en voet liggen daar buiten de kaart op de foto (zie
   hotelmodern/components/admin.css), en een bordje aan de muur is hoe die site
   zelf naar een andere kamer wijst.

   Boven de kaart en niet in de kantlijn ernaast: hoe breed die kantlijn is
   hangt van het venster af, en een bordje dat op een laptop half over het
   werkblad valt is geen bordje meer. */
.beheer-bordjes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  max-width: 80rem;
  margin: 0 auto;
  /* Dezelfde kantlijn als de kaart. Twee rem en niet drieënhalve, anders dan
     bij de balk: die staat vast in het venster en moet de zijruimte van
     `.inner.wrap` zelf meerekenen, terwijl dit erbinnen staat en hem dus al
     heeft. */
  padding: 0 2rem;
}

/* Onder de vaste band, en de kaart sluit er strak op aan. De marge die de kaart
   anders zelf neemt (zie `.index.admin.wrap:has(.form-sprongbalk)`) verhuist
   hierheen: de bordjes zijn nu het eerste wat er staat. */
body:has(.form-sprongbalk) .beheer-bordjes {
  margin-top: 4.75rem;
}

.beheer-bordjes + .index.admin.wrap {
  margin-top: 0.75rem;
}

.beheer-bordje {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  background: var(--admin-white, #ffffff);
  border: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
  border-radius: var(--admin-radius, 0.375rem);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
  color: var(--admin-blue-dark, #003078);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Een bordje dat je aanwijst komt een haartje van de muur. */
.beheer-bordje:hover,
.beheer-bordje:focus-visible {
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

/* In de hoek, onder elkaar — zoals ze in een kamer hangen — zodra er kantlijn
   genoeg is om ze aan op te hangen.

   Die grens is te rekenen en niet gekozen: het werkblad is tachtig rem breed en
   staat midden in het venster, dus de kantlijn ernaast is (100vw - 80rem) / 2.
   Het breedste bordje is negenenhalve rem en wil anderhalve rem van de rand
   blijven, dus er moet elf rem naast passen: 100vw >= 80rem + 22rem. Daaronder
   zou een bordje over het formulier heen hangen, en dan blijven ze staan waar
   ze stonden — boven de kaart, naast elkaar, waar ze nooit iets afdekken.

   Onder de sprongbalk (die staat op 900) en onder de vensters (1000), maar
   boven het werkblad: ze hangen aan de muur, niet op het bureau. En onder het
   naambordje in de hoek, dat op 4,2rem staat. */
@media (width >= 102rem) {
  .beheer-bordjes {
    position: fixed;
    top: 6.5rem;
    right: 1.5rem;
    z-index: 800;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* De bordjes staan niet meer in de rij, dus de ruimte die zij onder de balk
     hielden, houdt de kaart weer zelf. */
  body:has(.form-sprongbalk) .beheer-bordjes {
    margin-top: 0;
  }

  .beheer-bordjes + .index.admin.wrap {
    margin-top: 4.5rem;
  }
}

/* De balk staat óver de kop van de sectie waar je heen springt; deze marge
   houdt die kop vrij. Ruimer dan de balk hoog is, zodat er lucht boven staat. */
.sprongdoel {
  scroll-margin-top: var(--sprong-marge, 4.5rem);
}

/* ── Een veldgroep die dichtgeklapt staat ────────────────────────────────────

   Voor velden die er wél moeten zijn maar bij vrijwel elke invulbeurt leeg
   blijven — de plek van de scèneknop is de eerste. Zo'n groep opengeslagen in
   het formulier zetten kost twee dingen tegelijk: schermhoogte, en aandacht
   van een redacteur die zich afvraagt of hij hier iets moet invullen.

   Hij hoort binnen het paneel waar hij bij hoort, onder de hoofdhandeling, met
   een lijn ertussen: dan leest hij als "en verder, als je het nodig hebt" en
   niet als een tweede veld. */
.index.admin.wrap .veldgroep-inklap {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
}

/* Onderin een paneel sluit de groep het af en hoort er niets achter. Staat er
   wél iets onder — het persbericht onder Pers heeft de contactvelden achter
   zich — dan moet die ruimte er wel zijn: dichtgeklapt is de groep één regel,
   en zonder lucht eronder leest hij als het opschrift van het veld erna. */
.index.admin.wrap .veldgroep-inklap:not(:last-child) {
  margin-bottom: 2rem;
}

/* Het driehoekje van de browser staat links buiten de tekst en verschilt per
   browser; dit is er één die overal hetzelfde staat en meedraait. */
.index.admin.wrap .veldgroep-inklap > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--admin-blue-dark, #003078);
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
  cursor: pointer;
}

.index.admin.wrap .veldgroep-inklap > summary::-webkit-details-marker {
  display: none;
}

.index.admin.wrap .veldgroep-inklap > summary::before {
  content: "▸";
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.15s ease;
}

.index.admin.wrap .veldgroep-inklap[open] > summary::before {
  transform: rotate(90deg);
}

.index.admin.wrap .veldgroep-inklap > summary:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.25rem;
}

/* De uitleg pas ná het openen, en in de toon van een onderschrift: wie de
   groep dichtlaat hoeft hem niet te lezen. */
.index.admin.wrap .veldgroep-inklap > .hint {
  margin: 0.75rem 0 0;
  color: var(--admin-text-light, #5a6b82);
  font-size: 0.85rem;
}

/* ── Velden naast elkaar ─────────────────────────────────────────────────────

   Drie getallen van hooguit vijf tekens hoeven geen drie volle regels: naast
   elkaar zijn ze samen één ding om in te vullen. `minmax(0, 1fr)` omdat een
   invoerveld anders zijn eigen standaardbreedte als ondergrens neemt en de rij
   uit het paneel duwt. Zodra een kolom onder de twaalf rem zou komen breekt de
   rij vanzelf: een getalveld dat smaller is dan zijn eigen label leest niemand
   meer. */
.index.admin.wrap .veldgroep-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.index.admin.wrap .veldgroep-rij > div {
  min-width: 0;
}

/* ── De recensies van een voorstelling ───────────────────────────────────────

   Een lijst regels, met de recensie die je bewerkt als werkblad over die lijst
   heen. Waarom dat zo is, staat bij de sectie zelf in
   `production_live/form.ex`; hier staat alleen hoe het eruitziet.

   De kleuren komen uit base/admin-delfts-blauw.css. Zeven tenants importeren
   dat thema niet, dus draagt elke variabele hier zijn eigen terugval. */

.index.admin.wrap .press-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.index.admin.wrap .press-item-form {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* De regel zelf: greep, de tekst als knop, wat eraan hangt, en de uitweg. */
.index.admin.wrap .press-regel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--admin-white, #ffffff);
  border: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
  border-radius: var(--admin-radius, 0.375rem);
  transition: border-color 0.15s ease;
}

.index.admin.wrap .press-regel:hover {
  border-color: var(--admin-blue-dark, #003078);
}

.index.admin.wrap .press-regel .drag-handle {
  flex: none;
  opacity: 0.45;
}

.index.admin.wrap .press-regel .drag-handle:hover {
  opacity: 1;
}

/* De hele regel is de knop die hem opent: een apart potloodje ernaast zou een
   tweede plek zijn om te mikken voor dezelfde handeling. */
.index.admin.wrap .press-regel-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.index.admin.wrap .press-medium {
  flex: none;
  max-width: 14rem;
  overflow: hidden;
  color: var(--admin-blue-dark, #003078);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Het fragment neemt wat overblijft en kapt af op de breedte die er is. Op één
   regel, want twee regels zouden de lijst weer laten ademen als kaarten. */
.index.admin.wrap .press-fragment {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--admin-text-light, #4a5568);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nog niets ingevuld: wél te lezen, maar herkenbaar als een gat en niet als
   een medium dat "Nieuwe recensie" heet. */
.index.admin.wrap .press-medium.leeg,
.index.admin.wrap .press-fragment.leeg {
  font-style: italic;
  opacity: 0.6;
}

.index.admin.wrap .press-tekens {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--admin-text-light, #4a5568);
}

.index.admin.wrap .press-tekens .icon-pdf {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  opacity: 0.7;
}

.index.admin.wrap .press-teken {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

/* Verwijderen is een uitweg en geen hoofdhandeling: het pictogram alleen, in
   de hoek. De naam staat in `aria-label` en `title`. Als knop in de huisstijl
   was het een blauw blok dat meer aandacht trok dan de recensie ernaast. */
.index.admin.wrap .press-regel-weg {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.3rem;
  background: none;
  border: none;
  border-radius: var(--admin-radius, 0.375rem);
  color: var(--admin-text-light, #4a5568);
  cursor: pointer;
}

.index.admin.wrap .press-regel-weg .icon-trash {
  width: 1.1rem;
  height: 1.1rem;
  background-color: currentColor;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.index.admin.wrap .press-regel-weg:hover .icon-trash,
.index.admin.wrap .press-regel-weg:focus-visible .icon-trash {
  opacity: 1;
}

/* ── Het werkblad ──────────────────────────────────────────────────────── */

/* Dicht is `display: none` en niet weg uit de DOM: de velden moeten blijven
   meesturen (zie de sectie in form.ex). */
.index.admin.wrap .press-werkblad {
  display: none;
}

.index.admin.wrap .press-item-form.open > .press-werkblad {
  display: block;
}

/* Boven de sprongbalk (900) en onder de bibliotheekvensters (1000): die laatste
   open je vanuit dit werkblad, dus die horen erover te komen. */
.index.admin.wrap .press-werkblad-doek {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(0, 20, 50, 0.45);
}

.index.admin.wrap .press-werkblad-kaart {
  position: fixed;
  z-index: 960;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(52rem, calc(100vw - 3rem));
  max-height: calc(100vh - 3rem);
  background: var(--admin-white, #ffffff);
  border-radius: var(--admin-radius, 0.375rem);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.index.admin.wrap .press-werkblad-kaart > header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
}

.index.admin.wrap .press-werkblad-kaart > header h3 {
  margin: 0;
  color: var(--admin-blue-dark, #003078);
  font-size: 1.05rem;
}

/* Welk medium het is, staat al in de kop van de kaart; hier is het de bevestiging
   dat je de goede regel te pakken hebt, niet de titel zelf. */
.index.admin.wrap .press-werkblad-medium {
  color: var(--admin-text-light, #4a5568);
  font-weight: 400;
}

/* `base/icons.css` zet dit kruisje in de hoek van het venster (`position:
   absolute`), gezet voor de lichtbak. Hier staat het in een kop die zelf al een
   rij is, dus mag de flex het plaatsen — net als in de bibliotheekvensters. */
.index.admin.wrap .press-werkblad-kaart > header .icon-close {
  flex: none;
  position: static;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  border: none;
  opacity: 0.6;
  cursor: pointer;
}

.index.admin.wrap .press-werkblad-kaart > header .icon-close:hover,
.index.admin.wrap .press-werkblad-kaart > header .icon-close:focus-visible {
  opacity: 1;
}

/* Alleen de velden scrollen. Kop en voet blijven staan, zodat de opslaanknop
   ook bij een lange samenvatting in beeld is. */
.index.admin.wrap .press-werkblad-velden {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem;
}

.index.admin.wrap .press-werkblad-velden .form-field {
  margin-bottom: 1.25rem;
}

/* Krant en datum horen bij elkaar en zijn allebei kort: naast elkaar lezen ze
   als één bronvermelding in plaats van als twee losse vragen. Onder de 14rem
   per veld gaan ze onder elkaar staan — smaller dan dat is een krantennaam in
   het veld niet meer te overzien. */
.index.admin.wrap .press-werkblad-velden .form-field-paar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.index.admin.wrap .press-werkblad-velden .form-field-paar > .form-field {
  flex: 1 1 14rem;
}

/* Eén tree lager dan de kop van de kaart erboven, net als elders in het
   beheer: dit zijn veldlabels, geen sectiekoppen. */
.index.admin.wrap .press-werkblad-velden .form-field > label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--admin-text, #1a1a2e);
  font-weight: 500;
  font-size: 0.8125rem;
}

.index.admin.wrap .press-werkblad-velden textarea,
.index.admin.wrap .press-werkblad-velden input[type="text"],
.index.admin.wrap .press-werkblad-velden input[type="url"] {
  width: 100%;
}

.index.admin.wrap .press-werkblad-velden .document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Wat er nog ontbreekt voordat deze recensie bewaard kan worden. Tussen de kop
   en de velden, zodat het het eerste is wat je leest als het werkblad opengaat. */
.index.admin.wrap .press-werkblad-fout {
  margin: 0;
  padding: 0.75rem 1.25rem;
  background: #fdecea;
  border-bottom: 0.0625rem solid #f2c4bf;
  color: #8a1c12;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Na opslaan vanuit het werkblad blijf je in het formulier; deze regel boven de
   lijst zegt dat het gelukt is. Een flash zou hier niet verschijnen. */
.index.admin.wrap .press-opgeslagen {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #e8f3ea;
  border-left: 0.25rem solid #2f7d45;
  color: #1f4d2b;
  font-size: 0.9375rem;
}

/* Het gekoppelde document. base/documents.css kleedt `.selected-document` en
   `.current-document` aan als kaart uit de documentbibliotheek: alles onder
   elkaar, met vier rem binnenruimte onderaan. In het werkblad is het één regel
   onder de twee knoppen: pictogram, titel, kruisje. */
.index.admin.wrap .press-werkblad-velden .selected-document,
.index.admin.wrap .press-werkblad-velden .current-document {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.625rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid rgba(0, 0, 0, 0.12);
  border-radius: 0.25rem;
  background: rgba(0, 0, 0, 0.03);
  box-shadow: none;
}

.index.admin.wrap .press-werkblad-velden .selected-document [class*="icon-"],
.index.admin.wrap .press-werkblad-velden .current-document [class*="icon-"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.index.admin.wrap .press-werkblad-velden .selected-document > span:not([class]),
.index.admin.wrap .press-werkblad-velden .current-document > span:not([class]) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.index.admin.wrap .press-werkblad-velden .selected-document > button {
  position: static;
  flex: none;
  margin: 0 0 0 auto;
}

.index.admin.wrap .press-werkblad-voet {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  border-top: 0.0625rem solid var(--admin-blue-border, #b8d0eb);
  background: var(--admin-blue-light, #e8f0fb);
  border-radius: 0 0 var(--admin-radius, 0.375rem) var(--admin-radius, 0.375rem);
}

.index.admin.wrap .press-werkblad-stappen,
.index.admin.wrap .press-werkblad-klaar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.index.admin.wrap .press-werkblad-voet .button {
  margin: 0;
}

/* Aan het begin of het eind van de lijst: de knop blijft staan, zodat de rij
   niet verspringt, maar hij doet niets meer. */
.index.admin.wrap .press-werkblad-stappen .button[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Op een smal scherm is het werkblad het scherm, en gaan de twee rijen knoppen
   onder elkaar staan. */
@media (width < 40rem) {
  .index.admin.wrap .press-werkblad-kaart {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .index.admin.wrap .press-werkblad-voet {
    flex-direction: column-reverse;
    align-items: stretch;
    border-radius: 0;
  }

  .index.admin.wrap .press-werkblad-stappen,
  .index.admin.wrap .press-werkblad-klaar {
    justify-content: space-between;
  }
}

/* ── De hoofdstukken van een lang beheerformulier ────────────────────────────

   Het voorstellingsformulier heeft achtentwintig secties en tien onderwerpen.
   De koppen van die secties stonden allemaal op dezelfde maat, hetzelfde
   gewicht en dezelfde kleur, dus je zag nergens waar het ene onderwerp ophield
   en het volgende begon: één lange band van gelijke blokken. De sprongbalk
   bovenaan nóémde de indeling wel, maar op de pagina stond er niets tegenover.

   Dit is die naam, op de plek waar de balk heen springt. Groter dan een
   sectiekop en met een lijn die doorloopt tot de kantlijn — een lijn kost geen
   inkt en zegt "hier begint iets nieuws" duidelijker dan alleen witruimte.

   De trap is nu drie treden diep: hoofdstuk (1,5rem), sectiekop (1,0625rem,
   base/admin-delfts-blauw.css) en veldlabel (0,8125rem). Hij stond op één. */
.index.admin.wrap .form-hoofdstuk {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Ruim boven, krap onder: de kop hoort bij wat eronder komt, niet bij wat
     erboven staat. Zonder dat verschil zweeft hij tussen twee hoofdstukken in
     en moet je lezen waar hij bij hoort. */
  margin: 3.5rem 0 1rem;
  color: var(--admin-blue-dark, #003078);
  /* Aangedikt: de serif van een tenant heeft 400 en 700 en verder niets, dus
     voorbij 700 kan een kop alleen nog in maat groeien. Anderhalve rem las nog
     als een zware alinea; op 1,75 is het een kop. */
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Het eerste hoofdstuk staat direct onder de sprongbalk; daar hoort die drie
   en een halve rem lucht niet. */
.index.admin.wrap .form-hoofdstuk:first-of-type {
  margin-top: 1rem;
}

.index.admin.wrap .form-hoofdstuk::after {
  content: "";
  flex: 1 1 auto;
  height: 0.125rem;
  background: var(--admin-blue-border, #b8d0eb);
}

/* Zodra een formulier hoofdstukken heeft, is de streep boven elke sectie
   dubbelop. Er staat er al een bij de hoofdstukkop, en achtentwintig strepen
   van hetzelfde gewicht zijn nou juist het gebrek aan onderscheid dat die
   koppen moeten oplossen: alles even belangrijk is hetzelfde als niets
   belangrijk. Binnen een hoofdstuk scheidt witruimte, en waar een sectie een
   paneel is, doet dat paneel het al.

   Met `:has()` zodat het beperkt blijft tot schermen die hoofdstukken hebben.
   Op de andere beheerschermen is die streep voorlopig het enige dat de secties
   uit elkaar houdt, en die halen we er niet onderuit zolang ze daar geen
   koppen voor terugkrijgen. */
.index.admin.wrap:has(.form-hoofdstuk) section,
.index.admin.wrap:has(.form-hoofdstuk) .thumbnail {
  border-top: none;
}

/* Wat direct onder een hoofdstukkop staat, hoort erbij. De ruimte die bij die
   weggehaalde streep hoorde — anderhalve rem opvulling plus tweeënhalve rem
   marge — zette er vijf rem tussen, en dan zweeft de kop los boven zijn eigen
   eerste sectie. Panelen houden hun binnenruimte: die staat in
   base/admin-delfts-blauw.css, dat ná dit bestand geladen wordt en bij gelijke
   zwaarte dus wint. */
.index.admin.wrap .form-hoofdstuk + section,
.index.admin.wrap .form-hoofdstuk + div,
.index.admin.wrap .form-hoofdstuk + .thumbnail {
  margin-top: 0;
  padding-top: 0;
}

/* ── De staat van een voorstelling ───────────────────────────────────────────

   Concept, gepubliceerd of gearchiveerd is de schakelaar met de meeste
   gevolgen op het hele formulier — hij bepaalt of het ding op de site staat —
   en hij zag eruit als alles eromheen: drie radiootjes op een rij in het
   achtentwintigste blauwe blok.

   Nu is het een keuze uit drie kaarten, en de gekozen kaart draagt de kleur van
   die staat. Dat zijn de kleuren die dit beheer elders al gebruikt: oker voor
   een waarschuwing (er ontbreekt iets, er is niets stuk), groen voor goed, en
   gedempt grijs voor wat opzij is gezet. Zo lees je van een meter afstand waar
   een voorstelling staat, zonder te hoeven zien welk rondje aan is. */
.index.admin.wrap .status-keuze {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.index.admin.wrap .status-optie {
  flex: 1 1 13rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.1rem 0.6rem;
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--admin-white, #ffffff);
  /* Twee keer een zestiende in plaats van één: de gekozen kaart verandert
     straks alleen van kleur, niet van maat — anders verspringt de rij bij elke
     klik. */
  border: 0.125rem solid var(--admin-blue-border, #b8d0eb);
  border-radius: var(--admin-radius, 0.375rem);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.index.admin.wrap .status-optie:hover {
  border-color: var(--admin-blue-dark, #003078);
}

.index.admin.wrap .status-optie .input-radio {
  grid-row: 1 / span 2;
  width: auto;
  min-width: 0;
  margin: 0;
}

.index.admin.wrap .status-naam {
  color: var(--admin-text, #1a1a2e);
  font-weight: 700;
  font-size: 0.95rem;
}

.index.admin.wrap .status-uitleg {
  grid-column: 2;
  color: var(--admin-text-light, #4a5568);
  font-size: 0.8125rem;
}

/* De gekozen staat, in zijn eigen kleur. `:has()` omdat het rondje binnen het
   label staat: de kaart kleurt mee met wat erin aangevinkt is, zonder dat er
   een klasse van de server bij hoeft. */
.index.admin.wrap .status-optie.is-draft:has(input:checked) {
  border-color: var(--admin-warning, #c47f00);
  background: var(--admin-warning-light, #fdf6e6);
}

.index.admin.wrap .status-optie.is-draft:has(input:checked) .status-naam {
  color: var(--admin-warning, #c47f00);
}

.index.admin.wrap .status-optie.is-published:has(input:checked) {
  border-color: var(--admin-success, #276749);
  background: #eef6f1;
}

.index.admin.wrap .status-optie.is-published:has(input:checked) .status-naam {
  color: var(--admin-success, #276749);
}

.index.admin.wrap .status-optie.is-archived:has(input:checked) {
  border-color: var(--admin-text-light, #4a5568);
  background: #f3f4f6;
}

.index.admin.wrap .status-optie.is-archived:has(input:checked) .status-naam {
  color: var(--admin-text-light, #4a5568);
}

/* ── Blauw betekent weer iets ────────────────────────────────────────────────

   Elk uploadveld zat in een lichtblauw paneel, maar Titel, Ondertitel en
   Tagline zweefden er los tussen: het paneel volgde dus het sóórt veld en niet
   de betekenis. En omdat datzelfde blauw ook de koptekst, de knoppen en de
   randen droeg, zei het nergens meer iets.

   De panelen worden wit met een rand. Ze houden hun grens — je ziet nog steeds
   waar een veld begint en ophoudt — maar het gevulde blauw is nu van de
   knoppen alleen, en dan betekent het "hier kun je op drukken".

   Alleen op schermen mét hoofdstukken, net als de weggehaalde sectiestreep
   hierboven: daar dragen de koppen de indeling. De andere beheerschermen
   houden hun blauwe vlakken tot ze diezelfde koppen krijgen. */
.index.admin.wrap:has(.form-hoofdstuk) .thumbnail,
.index.admin.wrap:has(.form-hoofdstuk) .document-upload-section,
.index.admin.wrap:has(.form-hoofdstuk) .audio-upload-zone,
.index.admin.wrap:has(.form-hoofdstuk) section.checkbox-fields {
  background: var(--admin-white, #ffffff);
}

/* De statussectie krijgt helemaal geen vak meer: de drie kaarten erin hebben
   hun eigen rand, en een vak om drie vakken heen is een doos in een doos. */
.index.admin.wrap:has(.form-hoofdstuk) section.status-section {
  background: none;
  border: none;
  padding: 0;
}

/* --- Zoekresultaten in het speelbeurtformulier ---------------------------- */
/* Productie en locatie kies je uit een lijst die onder het zoekveld opengaat.
   Dat waren kale `div`'s met een klik erop: niet met het toetsenbord te
   bereiken, en voor een schermlezer geen keuze. Nu een lijst met knoppen, die
   er precies zo uitzien als die regels: gewone tekst, over de volle breedte. */
.production-results button,
.location-results button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.production-results button:hover,
.production-results button:focus-visible,
.location-results button:hover,
.location-results button:focus-visible {
  text-decoration: underline;
}

/* De onzichtbare "verder"-knop die enter zijn betekenis teruggeeft. Niet
   display:none — een verborgen knop doet niet mee aan impliciet verzenden.
   Hier en niet in form.css: niet elke tenant laadt dat bestand, en daar stond
   hij als plat streepje boven de vraag. */
.wizard .wizard-default-submit {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ── Het afrondscherm, na het aanmaken ──────────────────────────────────────
   Drie wegen (publiceren, verder bewerken, terug) en daaronder de site zelf in
   een iframe. De iframe krijgt een vaste hoogte: hij is een venster op de
   pagina, en scrolt zelf. */
.afronden-keuzes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.afronden-uitleg {
  margin-top: 0.75rem;
  opacity: 0.7;
}

.voorvertoning {
  margin-top: 2.5rem;
}

/* Boven het venster: de kop, de twee keuzes (wat, en op welk scherm) en de
   weg naar een eigen tabblad. Elke keuze is een rij aaneengesloten knoppen;
   de ingedrukte is gevuld. */
.voorvertoning-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.75rem;
}

.voorvertoning-balk h3 {
  margin: 0;
}

.voorvertoning-keuze {
  display: inline-flex;
}

.voorvertoning-keuze button {
  margin: 0;
  padding: 0.4rem 0.9rem;
  border: 0.0625rem solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
}

.voorvertoning-keuze button + button {
  margin-left: -0.0625rem;
}

.voorvertoning-keuze button[aria-pressed="true"] {
  background: #111;
  border-color: #111;
  color: #fff;
}

.voorvertoning-keuze button:focus-visible {
  outline: 0.125rem solid #ffbf00;
  outline-offset: 0.125rem;
  position: relative;
}

.voorvertoning-los {
  margin-left: auto;
  font-size: 0.875rem;
}

/* Het venster heeft een vaste hoogte en de site scrolt erin. De iframe krijgt
   van de hook de breedte van het gekozen apparaat en wordt verkleind tot hij
   past; een telefoon past meestal op ware grootte, en staat dan in het midden
   op een grijze tafel. */
.voorvertoning-venster {
  position: relative;
  height: calc(100vh - 12rem);
  min-height: 28rem;
  overflow: hidden;
  border: 0.0625rem solid rgba(0, 0, 0, 0.2);
  background: #e6e6e6;
}

.voorvertoning-venster iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  border: 0;
  background: #fff;
  transform-origin: 0 0;
}

.voorvertoning-venster:not([data-apparaat="scherm"]) iframe {
  box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.15);
}

/* Naast "Productie opslaan": waarom de voorvertoning er even niet is. */
.voorvertoning-wacht {
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Bovenaan het formulier, na "Verder bewerken": het concept bestaat al, dit is
   aanvullen en geen nieuw begin. */
.aanvul-melding {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 0.25rem solid currentColor;
  background: rgba(0, 0, 0, 0.04);
}


/* ── ../base/admin-delfts-blauw.css ── */
/* ===== Delfts Blauw Admin Thema ===== */
/* Gedeeld admin-thema. Tenants importeren dit via hun app.css ná base/admin.css
   en vóór ./components/admin.css, zodat tenant-overrides bovenop blijven werken. */

:root {
  --admin-blue-dark: #003078;
  --admin-blue: #1a4d8f;
  --admin-blue-light: #e8f0fb;
  --admin-blue-border: #b8d0eb;
  --admin-white: #ffffff;
  --admin-text: #1a1a2e;
  --admin-text-light: #4a5568;
  --admin-danger: #c53030;
  --admin-success: #276749;
  /* Een waarschuwing is geen fout: er is niets stuk, er ontbreekt iets.
     Vandaar oker naast het rood van --admin-danger. */
  /* De bodem van een paneel binnen een venster: net genoeg grijs om witte
     kaartjes erop te laten staan. */
  --admin-paneel: #f7f7f7;
  --admin-warning: #c47f00;
  --admin-warning-light: #fdf6e6;
  --admin-radius: 6px;
}

/* Container */
.index.admin.wrap {
  max-width: 80rem;
  margin: 2rem auto;
  padding: 2.5rem 2rem;
  background: var(--admin-white);
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
  box-shadow: 0 0.0625rem 4px rgba(0, 48, 120, 0.08);
}

.index.admin.wrap > header {
  border-bottom: 2px solid var(--admin-blue-dark);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

.index.admin.wrap > header h2 {
  color: var(--admin-blue-dark);
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.index.admin.wrap > header p {
  color: var(--admin-text-light);
  font-size: 0.9rem;
  margin: 0;
}

section.gallery-upload {
  background-color: var(--admin-blue-light);
}

/* Form secties */
/* .index.admin.wrap section {
  margin-bottom: 1.5rem;
} */

/* De middelste tree van de trap: boven staat de hoofdstukkop (1,5rem, zie
   base/admin.css), hieronder het veldlabel (0,8125rem). Deze stond op 0,95rem
   en het label op 0,875rem — anderhalve pixel verschil, dus in de praktijk
   geen verschil. Een sectiekop moet je kunnen overslaan met je ogen; dat kan
   alleen als hij een maat groter is dan wat eronder hangt. */
.index.admin.wrap section > header {
  color: var(--admin-blue-dark);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
}

/* Labels: de onderste tree. Kleiner dan de sectiekop erboven, en in de
   tekstkleur en niet in het blauw — blauw is in dit beheer de kleur van koppen
   en van knoppen, en een label is geen van beide. */
.index.admin.wrap label {
  color: var(--admin-text);
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.index.admin.wrap label span {
  display: inline-block;
  padding: 0 0.25rem;
}

/* Inputs */
.index.admin.wrap input[type="text"],
.index.admin.wrap input[type="email"],
.index.admin.wrap input[type="number"],
.index.admin.wrap input[type="url"],
.index.admin.wrap input[type="tel"],
.index.admin.wrap input[type="password"],
.index.admin.wrap textarea,
.index.admin.wrap select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  color: var(--admin-text);
  font-size: 0.9rem;
  transition: border-color 0.15s ease;
}

.index.admin.wrap input:focus,
.index.admin.wrap textarea:focus,
.index.admin.wrap select:focus {
  outline: none;
  border-color: var(--admin-blue);
  box-shadow: 0 0 0 3px rgba(26, 77, 143, 0.12);
}

/* Checkboxes / radios — overschrijft de globale form.css regels die de wrapper-divs
   een vaste breedte geven en de input-radio op 2rem breed zetten. */
.index.admin.wrap section.checkbox-fields,
.index.admin.wrap section.status-section {
  background: var(--admin-blue-light);
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.index.admin.wrap section.checkbox-fields > header,
.index.admin.wrap section.status-section > header {
  color: var(--admin-blue-dark);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: normal;
  margin-bottom: 0.75rem;
}

/* Deelregel boven de site-vinkjes: vertelt welke andere sites meeveranderen.
   Staat tussen de kop en de vinkjes, dus iets kleiner en rustiger dan de kop —
   het is een mededeling, geen waarschuwing. */
.index.admin.wrap section.checkbox-fields .sharing-notice {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--admin-blue-dark);
  opacity: 0.85;
}

.index.admin.wrap section.checkbox-fields .checkboxes,
.index.admin.wrap section.status-section .rbtns-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0;
  border: none;
}

.index.admin.wrap section.checkbox-fields .checkboxes > div,
.index.admin.wrap section.status-section .rbtns-body > div {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
}

.index.admin.wrap .label-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.index.admin.wrap .label-radio input {
  width: auto;
}

.index.admin.wrap input[type="checkbox"].input-radio,
.index.admin.wrap input[type="radio"].input-radio,
.index.admin.wrap
  section.checkbox-fields
  .checkboxes
  .label-radio
  input.input-radio,
.index.admin.wrap section.status-section .rbtns-body div input.input-radio {
  width: 1rem;
  height: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--admin-blue);
  flex-shrink: 0;
}

/* Uploadvelden: één doos voor elk bestand dat je meegeeft.

   Het veld 'Uitgelichte afbeelding' was het enige dat zich als paneel liet
   zien: een lichtblauw vlak met een donkerblauwe kop, waardoor je in één
   oogopslag ziet waar het veld begint en ophoudt. Alle andere uploads —
   flyer, titellogo, scèneknop, documenten, geluid — kregen dezelfde behandeling
   en staan daarom hieronder in dezelfde regel. Nieuwe uploadvelden schrijf je
   met `.thumbnail` (beeld) of voeg je hier toe. */
.index.admin.wrap .thumbnail,
.index.admin.wrap .document-upload-section,
.index.admin.wrap .audio-upload-zone {
  background: var(--admin-blue-light);
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

/* Een uploadveld draagt zijn naam in een `header` of, bij het geluidsvak, in
   een `label`. Alle drie zijn ze een sectiekop en horen ze dus op de middelste
   tree te staan, niet op die van een veldlabel. */
.index.admin.wrap .thumbnail > header,
.index.admin.wrap .document-upload-section > header,
.index.admin.wrap .audio-upload-zone > label {
  display: block;
  color: var(--admin-blue-dark);
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
}

/* De uitleg onder een kop hoort bij de kop, maar hoeft niet te schreeuwen. */
.index.admin.wrap .thumbnail > header p,
.index.admin.wrap .document-upload-section > header p {
  color: var(--admin-text-light);
  font-weight: 400;
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.index.admin.wrap .thumbnail img {
  max-width: 100%;
  height: auto;
  border-radius: var(--admin-radius);
  margin-top: 0.75rem;
}

.index.admin.wrap .drop {
  border: 2px dashed var(--admin-blue-border);
  border-radius: var(--admin-radius);
  padding: 1.5rem;
  text-align: center;
  background: var(--admin-white);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.index.admin.wrap .drop:hover {
  border-color: var(--admin-blue);
  background: rgba(26, 77, 143, 0.03);
}

.index.admin.wrap .drop span {
  color: var(--admin-text-light);
  font-size: 0.85rem;
}

/* De eigen knop van een bestandsveld (`bestand_kiezen/1`) is een span in de
   sleepzone; de regel hierboven maakt elke span daar klein en grijs. */
.index.admin.wrap .drop .bestand-kiezen-knop,
.index.admin.wrap .bestand-kiezen-knop {
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--admin-blue-dark);
  text-decoration: none;
}

/* Upload progress */
.index.admin.wrap .entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: var(--admin-white);
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
}

.index.admin.wrap .entry .progress {
  flex: 1;
}

.index.admin.wrap .entry .bar {
  height: 6px;
  background: var(--admin-blue-light);
  border-radius: 3px;
  overflow: hidden;
}

.index.admin.wrap .entry .bar span {
  display: block;
  height: 100%;
  background: var(--admin-blue);
  border-radius: 3px;
  transition: width 0.2s ease;
}

.index.admin.wrap .entry img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--admin-radius);
}

.index.admin.wrap .entry button {
  background: none;
  border: none;
  color: var(--admin-danger);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

/* De voorbeeldkaart van een foto die net gesleept is.
   De regels hierboven maken van `.entry` één regel — pictogram, balk, kruisje
   naast elkaar. Voor een document klopt dat: daar is de bestandsnaam de inhoud.
   Bij een foto is de fóto de inhoud, en die stond als duimnagel van 4rem
   bijgesneden in een vak van 20rem hoog, met de balk ernaast. Vandaar hier een
   kaart: de foto vult hem, de voortgang staat eronder, het kruisje in de hoek. */
.index.admin.wrap .thumbnail .entry {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0;
  padding: 0.75rem;
}

/* Alle drie de kaarten van een uploadveld tonen hun foto op dezelfde manier:
   vullend, niet bijgesneden. De marge hoort hier niet — de ruimte tussen de
   dingen in de kaart komt van de gap. */
.index.admin.wrap .thumbnail .entry img,
.index.admin.wrap .thumbnail .current-image img,
.index.admin.wrap .thumbnail .selected-image img {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  margin-top: 0;
  object-fit: contain;
}

/* Percentage en balk blijven naast elkaar, maar nemen alleen de hoogte die ze
   nodig hebben — anders eet de balk de ruimte van de foto op. */
.index.admin.wrap .thumbnail .entry .progress {
  flex: none;
  margin-bottom: 0;
}

/* Afbreken hoort bij de kaart, niet in de rij ernaast. Het schijfje eronder
   houdt het kruisje leesbaar, ook op een donkere foto. */
.index.admin.wrap .thumbnail .entry > button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.index.admin.wrap .thumbnail .entry > button:hover {
  background: #fff;
}

/* Quill editor */
.index.admin.wrap .ql-toolbar {
  border-color: var(--admin-blue-border) !important;
  border-radius: var(--admin-radius) var(--admin-radius) 0 0;
  background: var(--admin-blue-light);
}

.index.admin.wrap .ql-container {
  border-color: var(--admin-blue-border) !important;
  border-radius: 0 0 var(--admin-radius) var(--admin-radius);
  background: var(--admin-white);
  min-height: 10rem;
}

/* Footer / Acties */
.index.admin.wrap footer.actions {
  margin: 2rem 0rem;
  padding: 1.5rem;
  border: 0.0625rem solid var(--admin-blue-border);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.index.admin.wrap footer.actions .button,
.index.admin.wrap button.button {
  background-color: var(--admin-blue-dark);
  color: var(--admin-white);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.65rem 1.75rem;
  border: none;
  border-radius: var(--admin-radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 0;
}

.index.admin.wrap footer.actions .button:hover,
.index.admin.wrap button.button:hover {
  background-color: var(--admin-blue);
}

/* ── De rang van een knop ────────────────────────────────────────────────────

   Het voorstellingsformulier telde negenentwintig knoppen, en alle
   negenentwintig waren hetzelfde marineblauwe blok — vijf ervan over de volle
   breedte. Het luidste ding op het scherm was daarmee "Beheer bibliotheek", een
   zijdeur die je zelden nodig hebt, en "Productie opslaan" schreeuwde even hard
   als "Verwijderen". Alles even belangrijk is hetzelfde als niets belangrijk.

   Drie rangen, en ze staan hier bij elkaar zodat een scherm ze kiest in plaats
   van ze zelf te tekenen:

     gevuld      — de handeling waar het scherm voor bestaat. Eén per scherm,
                   en in een venster één per venster.
     omlijnd     — de gewone handelingen: kiezen, uploaden, toevoegen.
     `.uitweg`   — weghalen, afbreken, de zijdeur. Tekst met een pictogram,
                   verder niets.

   Omlijnd doet zijn rand met een `inset box-shadow` en niet met `border`: de
   gevulde knop hierboven staat op `border: none`, en een echte rand zou de knop
   dus groter maken dan zijn buurman. Een rij met twee rangen ernaast elkaar
   moet op één lijn blijven staan. */
/* `.back` staat er als vaste klant bij: dat is de link die elk beheerscherm
   onderaan heeft, en teruggaan is nooit de handeling waar een scherm voor
   bestaat. Naast "Productie opslaan" stonden er zo twee even luide knoppen. */
.index.admin.wrap .button.secondary,
.index.admin.wrap button.button.secondary,
.index.admin.wrap a.button.secondary,
.index.admin.wrap a.button.back {
  background-color: var(--admin-white);
  color: var(--admin-blue-dark);
  box-shadow: inset 0 0 0 0.0625rem var(--admin-blue-dark);
}

/* De maat van een knop staat op `button.button` en gold dus niet voor een
   link die zich als knop voordoet: "Afterpagina bewerken" en "Back" kregen wel
   de rand van hun rang, maar niet de ruimte eromheen — onderstreepte tekst in
   een krap doosje. Alleen de links die hierboven een rang hebben gekregen, en
   niet elke `a.button` in het beheer: die staan op tientallen schermen die
   hier niet in beeld zijn. */
.index.admin.wrap a.button.secondary,
.index.admin.wrap a.button.back {
  padding: 0.65rem 1.75rem;
  border: none;
  border-radius: var(--admin-radius);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.index.admin.wrap .button.secondary:hover,
.index.admin.wrap button.button.secondary:hover,
.index.admin.wrap a.button.secondary:hover,
.index.admin.wrap a.button.back:hover {
  background-color: var(--admin-blue-light);
}

/* Een pictogram is een masker en dus precies zo zichtbaar als zijn
   achtergrondkleur. Het beheer zet ze allemaal op wit (zie "Admin iconen"
   verderop), gezet voor donkere knoppen; op een omlijnde knop is dat wit op
   wit. Met `currentColor` volgt het pictogram de letter ernaast. */
.index.admin.wrap .button.secondary [class*="icon-"],
.index.admin.wrap .button.back [class*="icon-"] {
  background-color: currentColor;
}

/* De uitweg. Geen knopvlak: dit zijn handelingen die er moeten zijn maar niet
   om aandacht vragen — een `Verwijderen` onder een foto hoort niet even hard te
   roepen als het opslaan van de hele voorstelling. Dezelfde vorm die de
   prullenbak in een recensieregel al had. */
.index.admin.wrap .uitweg {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.35rem 0;
  background: none;
  border: none;
  color: var(--admin-text-light);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.index.admin.wrap .uitweg [class*="icon-"] {
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  opacity: 0.7;
}

.index.admin.wrap .uitweg:hover,
.index.admin.wrap .uitweg:focus-visible {
  color: var(--admin-blue-dark);
  text-decoration: underline;
}

.index.admin.wrap .uitweg:hover [class*="icon-"] {
  opacity: 1;
}

/* Terug link */
.index.admin.wrap a[href]:not(.button) {
  color: var(--admin-blue);
  text-decoration: none;
  font-size: 0.875rem;
}

.index.admin.wrap a[href]:not(.button):hover {
  text-decoration: underline;
}

/* Flash berichten */
.index.admin.wrap .flash-info {
  background: var(--admin-blue-light);
  border: 0.0625rem solid var(--admin-blue-border);
  color: var(--admin-blue-dark);
  padding: 0.75rem 1rem;
  border-radius: var(--admin-radius);
  margin-bottom: 1.5rem;
}

.index.admin.wrap .flash-error {
  background: #fef2f2;
  border: 0.0625rem solid #fecaca;
  color: var(--admin-danger);
  padding: 0.75rem 1rem;
  border-radius: var(--admin-radius);
  margin-bottom: 1.5rem;
}

/* Admin tabel (index pagina's) */
.index.admin.wrap .pages-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--admin-white);
}

.index.admin.wrap .pages-table table thead tr {
  border-bottom: 2px solid var(--admin-blue-dark);
}

.index.admin.wrap .pages-table table thead tr th {
  padding: 0.75rem 1rem;
  text-align: left;
  color: var(--admin-blue-dark);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.index.admin.wrap .pages-table table tbody tr {
  border-bottom: 0.0625rem solid var(--admin-blue-light);
}

.index.admin.wrap .pages-table table tbody tr:hover {
  background: var(--admin-blue-light);
}

.index.admin.wrap .pages-table table tbody tr td {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

/* Admin iconen: wit op donkere knoppen */
.index.admin [class*="icon-"] {
  background-color: #fff;
}

.tooltip span.icon-edit {
  background-color: #999 !important;
}

/* Admin knoppen en links: neutrale kleuren */
.index.admin .logout-link,
.index.admin a.logout-link {
  color: #000;
}

.index.admin .admin.actions .button {
  background-color: #000;
  color: #fff;
}

.index.admin .admin.actions .button span[class*="icon-"],
.modal-overlay,
.modal-overlay [class*="icon-"] {
  background-color: #fff;
}

/* Het vlak binnen een bibliotheekvenster. Grijs, zodat de witte kaartjes erop
   staan in plaats van erin te verdwijnen: wit op wit laat een raster in elkaar
   overlopen, en de koppen erboven dragen dan het hele onderscheid. */
.modal-overlay .wrap {
  padding: 4rem 2rem;
  background: var(--admin-paneel, #f7f7f7);
}

.index.admin .admin.actions .button:hover {
  background-color: #333;
}

/* ANBI documenten sectie */
.index.admin.wrap .anbi-documents-section {
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
  padding: 1rem 1.25rem 1.25rem;
  background: var(--admin-white);
}

.index.admin.wrap .anbi-document-category {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 0.0625rem dashed var(--admin-blue-border);
}

.index.admin.wrap .anbi-document-category:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.index.admin.wrap .anbi-document-category h4 {
  color: var(--admin-blue-dark);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.index.admin.wrap .sortable-anbi-docs {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.index.admin.wrap .sortable-anbi-docs .existing-document {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: var(--admin-blue-light);
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
}

.index.admin.wrap .sortable-anbi-docs .drag-handle {
  cursor: grab;
  color: var(--admin-text-light);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.index.admin.wrap .sortable-anbi-docs .drag-handle:active {
  cursor: grabbing;
}

.index.admin.wrap .sortable-anbi-docs .existing-document a {
  color: var(--admin-blue-dark);
  text-decoration: none;
  font-weight: 500;
  flex-shrink: 0;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.index.admin.wrap .sortable-anbi-docs .existing-document a:hover {
  text-decoration: underline;
}

.index.admin.wrap .sortable-anbi-docs .existing-document input[type="text"] {
  flex: 1;
  margin: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.index.admin.wrap .sortable-anbi-docs .existing-document button {
  flex-shrink: 0;
  background: transparent;
  color: var(--admin-danger);
  border: 0.0625rem solid var(--admin-danger);
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  border-radius: var(--admin-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.index.admin.wrap .sortable-anbi-docs .existing-document button:hover {
  background: var(--admin-danger);
  color: var(--admin-white);
}

.index.admin.wrap .sortable-anbi-docs .sortable-ghost {
  opacity: 0.4;
}

.index.admin.wrap .sortable-anbi-docs .sortable-chosen {
  background: var(--admin-blue-border);
}

.index.admin.wrap .anbi-document-category .drop {
  border: 0.125rem dashed var(--admin-blue-border);
  border-radius: var(--admin-radius);
  padding: 0.75rem 1rem;
  background: var(--admin-blue-light);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--admin-text-light);
}

.index.admin.wrap .anbi-document-category .entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--admin-blue-light);
  border-radius: var(--admin-radius);
  font-size: 0.85rem;
}

.index.admin.wrap .anbi-document-category .entry .progress {
  flex: 1;
}

.index.admin.wrap .anbi-document-category .entry .progress .bar {
  height: 0.375rem;
  background: var(--admin-blue-border);
  border-radius: 0.25rem;
  overflow: hidden;
}

.index.admin.wrap .anbi-document-category .entry .progress .bar span {
  display: block;
  height: 100%;
  background: var(--admin-blue);
  transition: width 0.15s linear;
}

/* Responsive */
@media (max-width: 48rem) {
  .index.admin.wrap {
    margin: 1rem;
    padding: 1.5rem 1rem;
  }

  .index.admin.wrap .sortable-anbi-docs .existing-document {
    flex-wrap: wrap;
  }

  .index.admin.wrap .sortable-anbi-docs .existing-document input[type="text"] {
    flex-basis: 100%;
  }
}

/* Aanvangstijd in het agendaformulier: de gekozen tijd (`.active`) valt op,
   de rest is een omlijnde knop. Met `:where` zo zwak mogelijk, zodat een
   tenant met eigen regels voor `.time-buttons` (feikeshuis, allesvdk, …)
   die gewoon houdt.

   Dezelfde knoppen voor de keuze "Bestaande locatie" / "Vrije tekst". Die
   staat in base/admin.css standaard uit; een tenant zet hem aan met
   `.location-mode-toggle { display: flex }`. */
:where(.index.admin.wrap) .time-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

:where(.index.admin.wrap) .location-mode-toggle {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

:where(.index.admin.wrap) .time-buttons button,
:where(.index.admin.wrap) .location-mode-toggle button {
  padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--admin-blue-border);
  border-radius: var(--admin-radius);
  background: var(--admin-white);
  color: var(--admin-blue-dark);
  cursor: pointer;
}

:where(.index.admin.wrap) .time-buttons button:hover,
:where(.index.admin.wrap) .location-mode-toggle button:hover {
  border-color: var(--admin-blue);
  background: var(--admin-blue-light);
}

:where(.index.admin.wrap) .time-buttons button.active,
:where(.index.admin.wrap) .location-mode-toggle button.active {
  border-color: var(--admin-blue-dark);
  background: var(--admin-blue-dark);
  color: var(--admin-white);
  font-weight: 600;
}


/* ── ../base/pages-index.css ── */
/* ============================================================
   Pages Index – admin overzicht van pagina's
   Tabel, badges, statuslabels en tenant-switcher.
   ============================================================ */

/* --- Waarschuwing duplicaten --- */
.pages-table .alert-warning {
    background: #fff3cd;
    border: 0.0625rem solid #ffeaa7;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0.25rem;
}

/* --- Tabel --- */
.pages-table table {
    width: 100%;
    border-collapse: collapse;
}

.pages-table tr.duplicate {
    background: #fff3cd;
}

.pages-table tbody tr {
    border-bottom: 0.0625rem solid #eee;
}

/* --- Badges (homepage, duplicate) --- */
.badge--homepage {
    background: #17a2b8;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 0.1875rem;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.badge--duplicate {
    background: #dc3545;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 0.1875rem;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

/* Een concept staat in de lijst van de beheerder, maar nergens anders. Grijs en
   niet rood: het is geen fout, het is nog niet af. */
.badge--concept {
    background: #6c757d;
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 0.1875rem;
    font-size: 0.8rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* --- Status active/inactive --- */
.status--active {
    color: #28a745;
}

.status--inactive {
    color: #dc3545;
}

/* --- Section-tags (Producties, Agenda, Nieuws) --- */
.pages-table td.sections {
    font-size: 0.9rem;
}

.section-tag {
    background: #e9ecef;
    padding: 0.2rem 0.4rem;
    border-radius: 0.1875rem;
    margin-right: 0.3rem;
}

/* --- Datum kolom --- */
.pages-table td.created {
    color: #666;
    font-size: 0.9rem;
}

/* --- Acties cel --- */
.pages-table td.actions-cell .actions-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pages-table .action-link {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

.pages-table .btn-deactivate {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    background: #ffc107;
    border-color: #ffc107;
}

.pages-table .btn-activate {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    background: #28a745;
    border-color: #28a745;
}

.pages-table .btn-delete {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* --- Tenant switcher --- */
.tenant-switcher {
    margin-top: 3rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
}

.tenant-switcher__options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.tenant-switcher__current {
    padding: 0.5rem 1rem;
    background: #007bff;
    color: white;
    border-radius: 0.25rem;
}

.tenant-switcher__link {
    padding: 0.5rem 1rem;
    background: #6c757d;
    color: white;
    text-decoration: none;
    border-radius: 0.25rem;
}


/* ── ../base/form.css ── */
.form-container {
    position: relative;
    max-width: 60rem;
    padding: clamp(1rem, 0.1429rem + 4.2857vw, 4rem);
    z-index: 10001;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
}

.form-container .button {
    position: relative;
    margin-top: 4rem;
    font-size: 1.125rem;
    border-width: 0.25rem;
}

.form-container h3 {
    margin-bottom: 0;
}

.form-container form {
    margin-top: 3rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.0625rem;
    font-size: 0.9375rem;
}

input,
textarea {
    display: block;
    border: none;
    outline: none;
}

input {
    padding: 0.75rem 0.25rem;
    /* width: clamp(15rem, 13.684rem + 7.018vw, 20rem); */
    width: 20.5rem;
    border-radius: 0.25rem;
}

::placeholder {
    color: var(--color-blue);
    text-transform: lowercase;
    font-size: 1.125rem;
    letter-spacing: 0.25rem;
    padding: 1rem 0 0 0.5rem;
}

input,
textarea {
    margin-bottom: 1rem;
    color: #f7f7f7;
    padding-left: 0.5rem;
}

/* Radio/checkbox horen niet onder de bare-`input` width/display/padding-regels
   hierboven — anders worden ze uitgerekt tot 20.5rem en op een eigen regel
   gezet. Reset ze terug naar inline native gedrag. Lokale overrides
   (zoals .input-radio, .video-type-toggle) winnen op specificiteit. */
input[type="radio"],
input[type="checkbox"] {
    width: auto;
    display: inline-block;
    padding: 0;
    margin: 0 0.375rem 0 0;
    vertical-align: middle;
}

textarea {
    width: clamp(18.75rem, 12.632rem + 32.632vw, 42rem);
    height: 12.5rem;
    border-radius: 0.5rem;
}

form > div > div {
    padding: 1rem 1rem 1rem 0;
}

form > div > div:not(:first-of-type) {
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.2);
}

form .thumbnail,
.admin section {
    margin: 2.5rem 0;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid rgba(0, 0, 0, 0.1);
}

input:focus,
textarea:focus,
select:focus {
    outline: 0.125rem solid rgba(0, 0, 0, 0.15);
    outline-offset: 0.125rem;
}

form .thumbnail header,
form .document-upload-section header,
section.gallery-section header,
section.makers header,
section.checkbox-fields header,
section.status-section header,
.admin section header {
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.0625rem;
    font-size: 0.9375rem;
}

form .thumbnail section.input,
form .document-upload-section section.input {
    /* Eén hoogte voor de vakken van een uploadveld: kiezen, slepen, en wat er
       nu ligt. Die hoogte stond eerder als `height: 20rem` op de voorbeeldkaart
       alleen — die kaart bepaalde daarmee de hoogte van de hele rij en de rest
       rekte mee, dus zonder kaart was het veld ineens veel lager. Nu staat hij
       één keer en houden de vakken zich er alle drie aan. */
    --uploadvak-hoogte: 16rem;
    width: 100%;
    /* Links gelijk met de kop van het veld: de vakken stonden 2rem naar binnen
       terwijl de kop en het streepje dat niet deden. De onderrand van 2.5rem
       komt van `.admin section` — dat is de ruimte tússen twee secties, en
       binnen dit paneel is het een lap leegte onder de vakken. */
    padding: 1.5rem 0 0;
    margin-bottom: 0;
}

form .thumbnail > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

form .thumbnail .drop,
form .thumbnail .entry,
form .thumbnail .current-image,
form .thumbnail .selected-image,
form .document-upload-section .drop,
form .document-upload-section .entry {
    min-height: var(--uploadvak-hoogte, 16rem);
}

/* De knoppen vullen hun kolom en beginnen bovenaan, zodat die kolom een kolom
   is en geen zwevend paar in het midden. De onderlinge ruimte komt van de gap;
   de marge die de knoppen zelf meebrengen zou er anders bovenop komen. */
form .thumbnail .image-options,
form .document-upload-section .image-options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
}

form .thumbnail .image-options .button,
form .document-upload-section .image-options .button {
    /* `base/button.css` geeft elke knop 1.25rem rechts en de bibliotheekknoppen
       0.5rem onder, voor knoppen die op een rij staan. Hier staan ze onder
       elkaar in een kolom met een eigen gap; die marges maken de knoppen dan
       ongelijk breed en zetten er dubbele ruimte tussen. */
    margin: 0;
}

form .thumbnail .drop {
    padding: 0 1rem;
}

form .thumbnail .drop input {
    padding-top: 0;
}

form .thumbnail label {
    line-height: 1.25;
}

select.select {
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    width: clamp(16rem, 12.842rem + 16.842vw, 28rem);
    border-radius: 0.125rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    font-family: inherit;
    font-size: 0.9375rem;
    letter-spacing: 0.0625rem;
    text-transform: none;
}

select.select::-webkit-scrollbar {
    width: 0.5rem;
}

select.select::-webkit-scrollbar-track {
    background: transparent;
}

select.select::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
}

form .thumbnail img {
    object-fit: contain;
    border: 0.25rem solid #fff;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
}

.current-image,
form .thumbnail .selected-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 0.125rem solid #ccc;
}

/* Het kopje van zo'n kaart is een label, geen titel: even groot als de kop van
   het veld eromheen. Uit `base/documents.css` komt 1.35rem, wat klopt boven een
   documentenlijst maar niet in een vak van deze maat. */
form .thumbnail .selected-image h4,
form .thumbnail .current-image > header {
    margin: 0;
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.0625rem;
}

form .thumbnail .selected-image p {
    margin: 0;
    font-size: 0.875rem;
}

/* Verwijderen is een uitweg, geen hoofdhandeling: zo breed als het woord. */
form .thumbnail .selected-image button {
    align-self: flex-start;
}

/* De foto vult de kaart en wordt niet bijgesneden: je kijkt naar wat je koos,
   niet naar het midden ervan. `min-height: 0` omdat een flex-item anders niet
   kleiner wil worden dan zijn eigen inhoud. */
form .thumbnail .current-image img,
form .thumbnail .selected-image img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
}

.tenant-selector {
    padding: 3rem;
}

.tenant-selector .checkbox-group {
    display: flex;
}

.tenant-selector .checkbox-group .checkbox-item {
    display: inline-flex;
    margin: 1rem 0;
}

.tenant-selector .checkbox-group .checkbox-item input {
    width: 1.5rem;
}

.tenant-selector .checkbox-group .checkbox-item span {
    display: inline-block;
    margin-right: 2rem;
}

.input-group {
    display: flex;
}

.input-group {
    justify-content: space-between;
}

.checkbox-fields .checkbox-item {
    display: inline-flex;
    margin: 1rem 0;
}

.checkbox-fields .checkbox-item input {
    width: 1.5rem;
}

.checkbox-fields .checkbox-item span {
    display: inline-block;
    margin-right: 2rem;
}

section.checkbox-fields,
section.status-section {
    margin: 1.5rem 0;
    padding: 1.5rem 0;
}

section.checkbox-fields header {
    letter-spacing: 0.125rem;
}

section.checkbox-fields header p,
form header p,
.social-media-main label {
    margin: 0.25rem 0;
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: normal;
    padding: 0;
    opacity: 0.9;
    line-height: 1.4;
    letter-spacing: normal;
}

form header p span {
    font-style: normal;
    font-size: 1.5rem;
}

section.checkbox-fields .checkboxes {
    padding: 1.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    border: 0.0625rem dotted #fff;
    border-radius: 0.25rem;
}

section.checkbox-fields .checkboxes div,
section.status-section .rbtns-body div {
    display: flex;
    width: clamp(8rem, 6.947rem + 5.614vw, 12rem);
    margin: 0.5rem 0.5rem 0 0;
}

section.status-section .rbtns-body div {
    width: 33.333%;
}

section.checkbox-fields .checkboxes .label-radio,
section.status-section .rbtns-body,
section.status-section .rbtns-body label {
    display: flex;
}

section#english-fields-production {
    padding: 3rem clamp(1rem, 0.539rem + 2.456vw, 2.75rem);
    position: relative;
}

.form-download-link,
.form-slug,
.form-input-order {
    display: none;
}

input[type="file" i] {
    font-size: 0.875rem;
}

section.status-section .rbtns-body label {
    align-items: center;
}

section.status-section .rbtns-body {
    padding: 2rem 1rem;
}

section.checkbox-fields .checkboxes .label-radio input.input-radio,
section.status-section .rbtns-body div input.input-radio {
    min-width: 0;
    width: 2rem;
    height: 1rem;
}

label.radio-option input {
    margin-top: 1rem;
}

input[type="file"]::file-selector-button {
    display: ruby-text;
    font-size: 0.875rem;
    transition: color 1s;
    cursor: pointer;
}

.gallery-item-controls > input.caption-input {
    width: 16rem;
    height: 2rem;
    margin: 0.25rem 0 0 0.25rem;
}

section.video-urls > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 2rem;
    padding: 1.5rem;
}

section.funding .funding-main,
section.social-media .social-media-main {
    padding: 2rem;
}

section.funding .funding-main p {
    margin: 0;
    line-height: 1;
}

.location .location-selector {
    position: relative;
}

.location .location-selector .actions {
    position: absolute;
    right: 1rem;
    top: 4rem;
}

.popup {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #fff265;
    color: #333;
    border: 0.5rem solid;
    transform: translate(-50%, -50%);
    transition: all 0.5s;
    font-size: 1.5rem;
    opacity: 0;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.form-group:not(:first-of-type) {
    margin: 1rem 0 2rem;
}

.form-group:first-of-type {
    margin-bottom: 2rem;
}

.form-group label {
    width: 18.75rem;
    display: flex;
    /* justify-content: space-between;
    align-items: center; */
    flex-direction: column;
}

.maker-selector,
.production-selector,
.location-selector,
section.start-time .time-buttons {
    padding: 2rem;
}

section.makers .maker-input {
    position: relative;
    width: fit-content;
}

section.makers span.icon-search {
    background-color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1rem;
}

.production-selector .search-input {
    border-bottom: none;
    background-color: #fff;
    width: fit-content;
    padding: 0 .75rem;
}

.production-selector .search-input input {
    background-color: #fff;
}

.form-group label[for="message"] {
    width: clamp(23rem, 21rem + 10vw, 30rem);
}

span.error {
    font-size: 0.875rem;
    font-family: var(--font-thin);
    font-style: italic;
    letter-spacing: 0.0625rem;
}

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn-submit.submitting {
    opacity: 0.8;
    cursor: not-allowed;
}

.checkboxes {
    padding: 2rem 1rem;
    display: flex;
}

.checkboxes div {
    display: flex;
    width: clamp(8rem, 6.947rem + 5.614vw, 12rem);
}

.checkboxes .label-radio {
    display: flex;
}

section.checkboxes {
    margin: 1.5rem 0;
}

section.checkboxes header p {
    margin: 0 0 0.125rem 0;
}

.checkboxes .label-radio input.input-radio {
    min-width: 0;
    width: 2rem;
}

section.press-items-section > .button {
    margin: 1.5rem 0 0;
}

ul.press-items-list:not(:has(li)) {
    display: none;
}

@media (width >= 48rem) {
    form .thumbnail section.input,
    form .document-upload-section section.input {
        display: grid;
        grid-template-columns: 2fr 3fr 2fr;
        /* Eén vaste rijhoogte in plaats van "zo hoog als het langste vak".
           Dat laatste laat de hoogte van het veld afhangen van het formaat van
           de foto die je toevallig koos: een staande plaat maakte er een toren
           van. En omdat de hoogte dan pas achteraf vastligt, weet een foto in
           zo'n vak niet waar hij zich naar moet schikken en gaat hij op ware
           grootte staan. */
        grid-auto-rows: var(--uploadvak-hoogte, 16rem);
        justify-content: space-between;
        align-items: stretch;
        gap: 2rem;
        margin-top: 0;
    }

    /* Drie kolommen zijn er alleen als er ook een bibliotheekknop staat:
       kiezen, slepen, en wat er nu ligt. Een veld dat alleen uploadt (titellogo,
       scèneknop, een plaat per taal) houdt er twee over, anders staat de
       sleepzone in de smalle kolom die voor de knoppen bedoeld was. */
    form .thumbnail section.input:not(:has(.image-options)) {
        grid-template-columns: 3fr 2fr;
    }

}

.honeypot {
    display: none;
}

/* De video's van een productie staan sinds 7 sep 2026 in de gedeelde
   kaartenbak (`.media-cards` in base/admin.css), niet meer in een eigen rij
   vakken. Wat hieronder overblijft is de keuzerij Vimeo/YouTube/Bunny, want
   die staat op elk scherm waar een video gekozen wordt. */

/* Radio toggle buttons for video type */
.video-type-toggle {
    display: flex;
    gap: 0;
}

.video-type-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.video-type-toggle label {
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    border: 0.0625rem solid;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.video-type-toggle label:first-of-type {
    border-right: none;
}

.video-type-toggle input[type="radio"]:checked + label {
    background-color: rgba(0, 0, 0, 0.12);
    font-weight: bold;
}

.video-item-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1.25rem;
}

/* ============================================ TICKETING — onmiskenbare form-errors
   Globaal voor alle tenants die de bestelpagina (section.ticketing.order.wrap)
   tonen. Tenants kunnen de kleur overschrijven via --form-error-color /
   --form-error-bg op een hogere specificity-regel. */

section.ticketing.order.wrap form {
    --form-error-color: #b3261e;
    --form-error-bg: #fdecec;
}

/* foutmelding-blok (Phoenix's <.error> rendert .text-rose-600) */
section.ticketing.order.wrap form .text-rose-600,
section.ticketing.order.wrap form p.text-rose-600,
section.ticketing.order.wrap form [class*="text-rose"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0.625rem 0.875rem;
    background-color: var(--form-error-bg);
    border-left: 0.375rem solid var(--form-error-color);
    color: var(--form-error-color);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 0 0.125rem 0.125rem 0;
    text-transform: none;
}

section.ticketing.order.wrap form .text-rose-600::before {
    content: "⚠";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--form-error-color);
    font-size: 1.125rem;
    font-weight: 700;
}

section.ticketing.order.wrap form .text-rose-600 .hero-exclamation-circle-mini,
section.ticketing.order.wrap form .text-rose-600 svg {
    display: none;
}

/* invalid veld */
section.ticketing.order.wrap form input[aria-invalid="true"],
section.ticketing.order.wrap form select[aria-invalid="true"],
section.ticketing.order.wrap form textarea[aria-invalid="true"],
section.ticketing.order.wrap form input.border-rose-400,
section.ticketing.order.wrap form select.border-rose-400,
section.ticketing.order.wrap form textarea.border-rose-400 {
    border-color: var(--form-error-color);
    border-width: 0.125rem;
    box-shadow: 0 0 0 0.1875rem rgba(179, 38, 30, 0.18);
    background-color: rgba(179, 38, 30, 0.05);
}

/* label van invalid veld kleurt mee + ⚠ */
section.ticketing.order.wrap form div:has(> input[aria-invalid="true"]) > label,
section.ticketing.order.wrap form div:has(> select[aria-invalid="true"]) > label,
section.ticketing.order.wrap form div:has(> textarea[aria-invalid="true"]) > label {
    color: var(--form-error-color);
    font-weight: 700;
}

section.ticketing.order.wrap form div:has(> input[aria-invalid="true"]) > label::before,
section.ticketing.order.wrap form div:has(> select[aria-invalid="true"]) > label::before,
section.ticketing.order.wrap form div:has(> textarea[aria-invalid="true"]) > label::before {
    content: "⚠ ";
    color: var(--form-error-color);
}

/* mobiel: groter, opvallender, korte shake-puls bij verschijnen */
@media (max-width: 40rem) {
    section.ticketing.order.wrap form .text-rose-600,
    section.ticketing.order.wrap form p.text-rose-600,
    section.ticketing.order.wrap form [class*="text-rose"] {
        padding: 0.875rem 1rem;
        font-size: 1.0625rem;
        border-left-width: 0.5rem;
        animation: kkv-form-error-pulse 0.6s ease-out 1;
    }

    section.ticketing.order.wrap form .text-rose-600::before {
        width: 1.625rem;
        height: 1.625rem;
        font-size: 1.375rem;
    }
}

@keyframes kkv-form-error-pulse {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-0.3125rem); }
    40%  { transform: translateX(0.3125rem); }
    60%  { transform: translateX(-0.1875rem); }
    80%  { transform: translateX(0.1875rem); }
    100% { transform: translateX(0); }
}

/* --- Vertaal-tabbladen (productieformulier) --------------------------------
   Staan achter een vinkje: de meeste voorstellingen hebben geen vertaling.
--------------------------------------------------------------------------- */
.translations .translation-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: -1px;
}

.translations .translation-tab {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    border-bottom: none;
    background: #f1f1f1;
    color: #444;
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
}

.translations .translation-tab:hover {
    background: #e8e8e8;
}

.translations .translation-tab.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

/* Bolletje = deze taal heeft al inhoud. */
.translations .translation-tab .dot {
    margin-left: 0.4rem;
    color: #2a8a5a;
    font-size: 0.7em;
    vertical-align: middle;
}

.translations .translation-panel {
    padding: 1rem;
    border: 1px solid #ccc;
    background: #fff;
}

.translations .translation-panel .hint {
    margin: 0 0 1rem;
    color: #666;
    font-size: 0.9rem;
}

/* ── De platen van een vertaling ─────────────────────────────────────────────

   Bij Hotel Modern hangen er twee aan een vertaling: het titellogo en het
   voorwerp dat als knop op de scène ligt. Allebei klein — een woordbeeld, een
   uitgeknipt menukaartje. Ze stonden onder elkaar met het gewone uploadvak van
   zestien rem, en namen samen meer hoogte in dan alle tekst van die vertaling
   bij elkaar. Nu staan ze naast elkaar, en binnen elke plaat staat het
   sleepvak naast het beeld dat er al ligt.

   De selectors noemen `.index.admin.wrap` mee. Zonder dat won de beheeropmaak
   (`base/admin-delfts-blauw.css`) het van de maten hier — die zet elk beeld in
   een uploadveld op `width: 100%`, gezet voor een paneel over de volle breedte.
   In een halve kolom werd de duimnagel daardoor zo breed als de plaat zelf en
   viel de knop Verwijderen naast het kader.

   Twee kolommen alleen waar ze allebei ruim genoeg zijn. Dat hing eerst aan een
   mediaquery op 48 rem, en die mat het verkeerde: het venster, terwijl het
   werkblad van het beheer smaller is dan het scherm. Op een breed venster kreeg
   een paneel van 60 rem daardoor twee kolommen van nog geen 24 rem. `auto-fit`
   met een ondergrens rekent met de ruimte die er hier werkelijk is, en zet er
   één kolom neer zodra twee te krap zouden worden. */
.translations .translation-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.index.admin.wrap .translations .translation-images .thumbnail {
    /* Het vak dat `base/form.css` op zestien rem zet, hier op een derde
       daarvan: er hoeft alleen een knop en een regel tekst in. */
    --uploadvak-hoogte: 5.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
}

.index.admin.wrap .translations .translation-images .thumbnail > header {
    flex: 1 0 100%;
    margin: 0;
}

/* Het sleepvak zelf gaat ook terug: `base/drop.css` zet er twee rem omheen en
   nog eens een rem om de knop, want daar is het een vak van zestien rem hoog
   waarin die lucht klopt. Hier is het een strook. */
.index.admin.wrap .translations .translation-images .drop {
    gap: 0.5rem;
    padding: 0.75rem;
}

/* Achter de knop van een bestandsveld zet de browser nog "no file chosen". Die
   tekst staat doorzichtig (zie `base/drop.css`), maar telt wél mee in de
   breedte: zeventien rem die je niet ziet. In een paneel over de volle breedte
   valt dat niet op; hier is het precies de reden dat het sleepvak en de
   duimnagel niet meer naast elkaar pasten. Op nul zetten haalt de tekst uit de
   berekening; de knop krijgt zijn eigen maat terug. */
.index.admin.wrap .translations .translation-images .drop input[type="file"] {
    padding: 0;
    font-size: 0;
}

.index.admin.wrap
    .translations
    .translation-images
    .drop
    input[type="file"]::file-selector-button {
    font-size: 0.8125rem;
}

/* Sleepvak en huidig beeld delen de breedte; ligt er nog niets, dan neemt het
   sleepvak de hele plaat.

   `min-width: min-content` en niet nul. Op nul mag een flex-item smaller worden
   dan wat erin staat, en dan schuift de knop Verwijderen het kader uit — wat er
   bij een paneel van rond de 60 rem ook precies gebeurde. Nu houden de twee
   hun eigen inhoud aan als ondergrens, en gaan ze onder elkaar staan zodra ze
   naast elkaar niet meer passen. */
.index.admin.wrap .translations .translation-images .drop,
.index.admin.wrap .translations .translation-images .current-image,
.index.admin.wrap .translations .translation-images .flyer-preview {
    flex: 1 1 12rem;
    min-width: min-content;
    margin: 0;
}

/* Het beeld naast de kop, niet eronder: bij deze hoogte is een kolom van kop,
   plaatje en knop precies één regel te veel. */
.index.admin.wrap .translations .translation-images .current-image {
    display: grid;
    /* De tweede kolom op `min-content` en niet op nul: anders telt de inhoud van
       de kaart niet mee in haar eigen ondergrens en helpt de `min-width`
       hierboven niets. */
    grid-template-columns: auto minmax(min-content, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.75rem;
}

.index.admin.wrap .translations .translation-images .current-image > header {
    grid-column: 2;
    /* Op één regel houden: in een smalle kolom breekt "Huidig beeld:" anders
       in tweeën en is de plaat meteen een regel hoger. */
    white-space: nowrap;
    font-size: 0.8125rem;
}

/* De duimnagel blijft een duimnagel. `width: auto` en een bovengrens in beide
   richtingen, zodat een liggend woordbeeld en een staand menukaartje even veel
   ruimte innemen. */
.index.admin.wrap .translations .translation-images .current-image img {
    grid-row: 1 / span 2;
    flex: none;
    width: auto;
    max-width: 4.5rem;
    max-height: 4.5rem;
    margin: 0;
    object-fit: contain;
}

/* Verwijderen is hier een uitweg naast een duimnagel, geen balk over de volle
   breedte van het vak. */
.index.admin.wrap .translations .translation-images .current-image .button {
    grid-column: 2;
    justify-self: start;
    margin: 0;
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* --- Aanmaken in vragen -------------------------------------------------- */
/* Eén vraag per scherm. Alles hier dient dat: veel lucht rond de vraag, de al
   gegeven antwoorden ingetogen erboven, en verder zo min mogelijk. De selectors
   noemen `.index.admin.wrap` mee waar ze de gewone beheeropmaak moeten winnen —
   die maakt van elke footer een plakkende balk en van elke link een knop, en dat
   is precies wat een vragenscherm niet moet zijn. */

.wizard > header p {
    color: #666;
    font-size: 0.9rem;
}

.wizard .wizard-answers,
.wizard .wizard-question,
.wizard .wizard-footnote,
.wizard footer.wizard-actions {
    max-width: 42rem;
}

/* Vier tot zes vragen achter elkaar: de knoppenrij mag niet gaan zwemmen. */
.wizard footer.wizard-actions .btn-small {
    white-space: nowrap;
}

.wizard .wizard-answers {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    border-left: 0.1875rem solid #e0e0e0;
}

.wizard .wizard-answers li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.35rem 0 0.35rem 1rem;
    font-size: 0.9rem;
}

.wizard .wizard-answers .label {
    flex: 0 0 7rem;
    color: #888;
}

.wizard .wizard-answers .value {
    flex: 1 1 auto;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard .wizard-answers button {
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    background: none;
    color: #666;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.wizard .wizard-answers button:hover {
    color: #000;
}

/* De beheeropmaak zet een scheidingslijn boven elke `section`; hier is er niets
   om van te scheiden — er staat maar één vraag. */
.wizard .wizard-question {
    margin: 2rem 0 0;
    padding-top: 0;
    border-top: 0;
}

.wizard .wizard-question header h3 {
    margin: 0;
    font-size: 1.4rem;
}

.wizard .wizard-question header p {
    margin: 0.35rem 0 1rem;
    color: #666;
    font-size: 0.95rem;
}

/* Het antwoordveld is het enige waar je hier iets mee kunt: dus groot. Maar niet
   hoger dan het antwoord: twee zinnen vragen geen half scherm. */
.index.admin.wrap.wizard .wizard-question > input[type="text"],
.index.admin.wrap.wizard .wizard-question > textarea {
    display: block;
    width: 100%;
    max-width: 42rem;
    padding: 0.75rem 0.9rem;
    border: 0.0625rem solid #bbb;
    background: #fff;
    font-family: inherit;
    font-size: 1.15rem;
    line-height: 1.45;
}

.index.admin.wrap.wizard .wizard-question > textarea {
    height: 6rem;
    min-height: 0;
    resize: vertical;
}

.wizard .wizard-question > input[type="text"]:focus,
.wizard .wizard-question > textarea:focus {
    border-color: #333;
    outline: none;
}

.wizard .wizard-question .hint {
    margin: 0.5rem 0 0;
    color: #888;
    font-size: 0.85rem;
}

/* Geen plakbalk onderaan: het scherm is kort, de knop hoort bij de vraag. */
.index.admin.wrap.wizard footer.wizard-actions {
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    width: auto;
    margin: 2rem 0 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Vorige, Nu al aanmaken en Annuleren zijn geen knoppen: het zijn uitwegen.
   (Het zijn technisch wél verzendknoppen — zie het formulier — dus ze worden op
   hun klasse aangesproken en niet op hun type.)

   `box-shadow: none` erbij: het beheer tekent de rand van een omlijnde knop
   (`a.button.back`, zie admin-delfts-blauw.css) als inset-schaduw, niet als
   border. Zonder deze regel bleef die rand staan en stond Annuleren als
   onderstreepte tekst in een krap kadertje. */
.index.admin.wrap.wizard footer.wizard-actions .btn-small,
.index.admin.wrap.wizard footer.wizard-actions a.back {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    color: #666;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

.index.admin.wrap.wizard footer.wizard-actions .btn-small:hover,
.index.admin.wrap.wizard footer.wizard-actions a.back:hover {
    background: none;
    color: #000;
}

/* Het publiceervinkje onder de aankondiging van een republiek-avond. */
.wizard .wizard-publiceren {
    display: flex;
    margin-top: 1.5rem;
}

.wizard .wizard-footnote {
    margin-top: 2rem;
    color: #888;
    font-size: 0.85rem;
}

/* De beeldvraag is er één van drie en hoort er niet zwaarder uit te zien dan de
   andere twee: geen omkaderd blok, en de bibliotheekknop laat de nadruk aan de
   knop waar het scherm mee eindigt. */
.index.admin.wrap.wizard .wizard-question.thumbnail {
    margin: 2rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.index.admin.wrap.wizard .wizard-question.thumbnail > header {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 1rem;
}

.index.admin.wrap.wizard .wizard-question .image-options {
    display: block;
    margin-bottom: 1rem;
}

.index.admin.wrap.wizard .wizard-question .image-options .button {
    background: none;
    border: 0.0625rem solid currentColor;
    color: inherit;
}

.index.admin.wrap.wizard .wizard-question .image-options .button:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Iconen zijn maskers: hun kleur komt uit de achtergrond. Op een knop zonder
   vulling moeten ze dus meekleuren met de tekst, anders zijn ze wit op wit. */
.index.admin.wrap.wizard .wizard-question .image-options .button [class*="icon-"] {
    background-color: currentColor;
}

.wizard .wizard-answers .value.leeg {
    color: #aaa;
    font-style: italic;
}

/* De schrijfvragen: de editor is het scherm, dus krijgt hij de ruimte. */
.wizard .wizard-rich .quill-container {
    max-width: 42rem;
}

.wizard .wizard-rich .ql-toolbar,
.wizard .wizard-rich .ql-container {
    border-color: #bbb;
}

/* De melding onder een Bunny-sleepzone. Staat bewust náást het sleepvak en niet
   erin: dat vak draagt `phx-update="ignore"`, dus alles binnenin blijft staan
   zoals de browser het achterliet en zou door de server nooit bijgewerkt worden.
   Een flash was hier de logische plek, maar die komt op dit platform niet in
   beeld — de flash_group staat in de root-layout, die LiveView na de eerste
   render niet meer aanraakt. */
.bunny-melding {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.1875rem;
    font-size: 0.875rem;
}

.bunny-melding-ok {
    background: #dff0d8;
    color: #2c5d2c;
}

.bunny-melding-fout {
    background: #f5d9d6;
    color: #7a2118;
}

/* Een reeks speelbeurten (`AgendaItemLive.Form`): de einddatum en de
   weekdagen onder het vinkje, de dagen naast elkaar. */
.reeks-velden > div {
    margin: 1rem 0;
}

.reeks-dagen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0;
    padding: 0;
    border: 0;
}

.reeks-dagen legend {
    width: 100%;
    margin-bottom: 0.5rem;
}

.reeks-overzicht {
    margin-top: 1rem;
}


/* ── ../base/drop.css ── */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  border: 0.125rem dashed rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}

.drop:hover {
  border-color: rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.02);
}

.drop label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  margin: 0;
}

.drop input[type="file"] {
  width: auto;
  padding: 1rem;
  margin: 0;
  /* De browser zet achter de knop nog "no file chosen", en in een sleepzone met
     een eigen regel eronder is dat ruis die bovendien buiten de zone uitsteekt.
     Alleen de tekst van het veld gaat weg; de knop hieronder zet zijn eigen
     kleur terug, en wat je koos zie je aan de voorbeeldkaart ernaast. */
  color: transparent;
}

.drop input[type="file"]::file-selector-button {
  background-color: #fff;
  color: black;
  border: 0.125rem solid;
  border-radius: 0.25rem;
  padding: 0 1rem;
  min-height: 2rem;
  font-variant: all-small-caps;
  cursor: pointer;
}

@media (hover: hover) {
  .drop input[type="file"]::file-selector-button:hover {
    opacity: 0.85;
  }
}

.drop span {
  text-align: center;
  font-size: 0.9375rem;
  opacity: 0.7;
}

/* De waarschuwing hoort bij de zone eromheen, niet bij één bestand: hij staat
   direct onder de streepjesrand en houdt de volle breedte. */
.upload-waarschuwing {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 0.25rem solid #b3261e;
  border-radius: 0.25rem;
  background-color: rgba(179, 38, 30, 0.08);
  color: #7a1a15;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* ── Het Bunny-sleepvak ──────────────────────────────────────────────

   Stond als inline stijlen in de component. Verhuisd naar hier omdat het vak
   inmiddels in twee maten bestaat: het grote vak bovenaan een scherm, en het
   strookje onderin elk kaartje van de bioscoop. Een inline stijl is met CSS
   niet te overrulen, dus een tweede maat kon er niet naast bestaan.

   De zweefstand komt van de hook (`is-hover`), niet van `:hover`: het gaat om
   een bestand dat boven het vak zweeft, en dat is geen muispositie. */
.bunny-upload [data-bunny-dropzone] {
    padding: 1.5rem;
    border: 0.125rem dashed #bbb;
    border-radius: 0.375rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.bunny-upload [data-bunny-dropzone].is-hover {
    border-color: #29d;
    background: #f0f7ff;
}

.bunny-upload [data-bunny-dropzone] p {
    margin: 0;
}

.bunny-upload [data-bunny-dropzone] small {
    color: #888;
}

.bunny-upload input[type="file"] {
    display: none;
}

.bunny-upload [data-bunny-progress] {
    margin-top: 0.5rem;
}

.bunny-upload-balk {
    height: 0.5rem;
    border-radius: 0.25rem;
    background: #eee;
    overflow: hidden;
}

.bunny-upload-balk [data-bunny-progress-bar] {
    width: 0%;
    height: 100%;
    background: #29d;
    transition: width 0.2s;
}

/* Het strookje in een kaartje: dezelfde streepjeslijn, maar op één regel. */
.bunny-upload.compact [data-bunny-dropzone] {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
}

.bunny-upload.compact [data-bunny-dropzone] p {
    display: inline;
}

.bunny-upload.compact [data-bunny-dropzone] small {
    display: block;
}

/* De eigen knop van `bestand_kiezen/1` in een sleepzone: de regel voor
   `.drop span` hierboven (doorschijnend, kleiner) is voor de uitleg eronder,
   niet voor de knop en de bestandsnaam. */
.drop .bestand-kiezen {
  flex-direction: column;
}

.drop .bestand-kiezen-knop,
.drop .bestand-kiezen-knop span {
  opacity: 1;
  font-size: inherit;
}

.drop .bestand-kiezen-naam,
.bestand-kiezen-naam {
  font-size: 0.875rem;
  opacity: 0.7;
}


/* ── ../base/progress.css ── */
.progress {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
  }
  
  .progress .value {
    min-width: 2.25rem;
    font-size: .875rem;
    font-weight: 600;
    color: #333;
  }
  
  .progress .bar {
    flex: 1;
    height: .5rem;
    background-color: #e0e0e0;
    border-radius: .25rem;
    overflow: hidden;
  }
  
  .progress .bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    border-radius: .25rem;
    transition: width 0.3s ease;
  }
  
  .progress + button {
    padding: .375rem .625rem;
    background-color: #f3f4f6;
    border: .0625rem solid #d1d5db;
    border-radius: .25rem;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .progress + button:hover {
    background-color: #e5e7eb;
  }
  
  .progress + button:active {
    background-color: #d1d5db;
  }
  
  .progress .error {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #dc2626;
  }

/* ── ../base/gallery.css ── */
section .production-gallery h3 {
    opacity: 0;
    height: 0;
    margin: 0;
}

.image-gallery {
    margin: 2rem 0;
}

.image-gallery span {
    display: inline-block;
    margin: 0.25rem 0 0 0.0625rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-item:first-of-type {
    display: block;
}

.gallery-image-button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 9/6;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 1rem;
    font-size: 0.9rem;
    display: none;
}

.gallery-item {
    position: relative;
    border-radius: 0.0625rem;
    overflow: hidden;
    display: none;
}

.image-gallery span {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Masonry-variant — alle foto's zichtbaar, elk in de eigen verhouding.
   CSS Grid bepaalt het aantal kolommen; de MasonryGrid-hook zet per item
   `grid-row-end: span N` op basis van rijen van 1px.

   De verticale ruimte zit bewust in het item (padding-bottom) en niet in
   `row-gap`: met een row-gap wordt de spanberekening korrelig (rij + gap) en
   krijgt elk item een eigen afrondingsrest, waardoor de gaten verticaal groter
   en ongelijk worden. Met `row-gap: 0` is een span exact één pixel. */
.gallery-grid.masonry {
    --gallery-gap: 1.25rem;
    /* min() zodat een kolom op een smal scherm niet breder wordt dan de ruimte. */
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    grid-auto-rows: 1px;
    align-items: start;
    column-gap: var(--gallery-gap);
    row-gap: 0;
    /* Compenseert de padding onder de onderste rij. */
    margin-bottom: calc(-1 * var(--gallery-gap));
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.gallery-grid.masonry.masonry-ready {
    opacity: 1;
}

.gallery-grid.masonry .gallery-item {
    display: block;
    padding-bottom: var(--gallery-gap);
}

.gallery-grid.masonry .gallery-image-button {
    display: block;
    line-height: 0;
}

/* Niet bijsnijden: de hoogte van de foto bepaalt de hoogte van het item.
   `auto 3 / 2` = de eigen verhouding zodra de foto geladen is, daarvoor 3/2 als
   plaatshouder — anders klapt de grid in tot de laadmomenten binnen zijn. */
.gallery-grid.masonry .gallery-image {
    height: auto;
    aspect-ratio: auto 3 / 2;
}

/* De lightbox-stijlen stonden hier; ze staan nu in base/lightbox.css,
   samen met die van de nieuwe Lightbox-hook. Eén uiterlijk voor beide. */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gallery-container {
    display: flex;
    flex-direction: column-reverse;
    padding: 2rem 1rem 0 2rem;
}

.gallery-container .gallery-actions {
    padding: 1rem;
}

.gallery-container .current-gallery-images .sortable-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.gallery-container .current-gallery-images .gallery-item-image {
    width: 100%;
    border: 0.25rem solid #fff;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
    background-color: #f7f7f7;
}

.gallery-container .current-gallery-images .gallery-item-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.gallery-item-controls {
    display: flex;
    padding: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.gallery-item-controls .button {
    font-size: 0.875rem;
}

.button.delete::before {
    content: "!";
    color: var(--color-red, #c41c1c);
    font-weight: bold;
    font-size: 1.5rem;
    margin-right: 0.25rem;
}

.drag-handle .icon-dragdrop {
    background-color: #333;
    padding: 0 0.5rem 0.5rem 0.5rem;
}

/* DOCUMENTS */
.document-upload-section {
    background-color: #f7f7f7;
    padding: 2rem 0 2rem 1rem;
}

.document-upload-section header .icon-doc {
    background-color: #333;
    margin-left: 0.5rem;
}

.document-upload-section header {
    display: flex;
    align-items: center;
}

/* ── Beheerkaarten: galerij en bibliotheek ───────────────────────────

   Twee schermen, één uiterlijk. De sorteerbare galerij van het
   productieformulier en de fotobibliotheek tonen dezelfde foto's met dezelfde
   gegevens eronder; ze hoorden er nooit anders uit te zien. Daarom staan de
   regels hier onder één selectorpaar in plaats van twee keer nagebouwd — dan
   lopen ze bij de eerste wijziging niet weer uit elkaar.

   Beide liggen op de masonry uit `.gallery-grid.masonry` hierboven. De galerij
   laat hem leggen door de sorteerhook (SortableJS wil de container voor
   zichzelf, en twee LiveView-hooks op één element gaat niet); de bibliotheek
   heeft niets te slepen en gebruikt gewoon de MasonryGrid-hook. */

.gallery-container .current-gallery-images .sortable-gallery.masonry,
.image-grid.masonry {
    --card-gap: 1rem;
    display: grid;
    /* Vast op drie: met auto-fill kreeg je op een breed scherm vier of vijf
       kaarten naast elkaar en werd het een contactvel. Drie houdt de foto's
       groot genoeg om te herkennen wat je voor je hebt. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1px;
    align-items: start;
    column-gap: var(--card-gap);
    row-gap: 0;
    margin-bottom: calc(2rem - var(--card-gap));
    padding: 0;
    list-style: none;
}

/* De bibliotheek wacht op de hook voor hij zich laat zien; de galerij niet.
   Daar legt de sorteerhook de kaarten, en die draait pas ná de eerste render —
   met een verborgen grid zou je in dat gat een lege galerij zien. */
.image-grid.masonry {
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.image-grid.masonry.masonry-ready {
    opacity: 1;
}

/* De galerij in het voorstellingsformulier staat op vier. Dat is dezelfde
   afweging als hierboven, maar met een andere uitkomst: hier staat er geen
   tekst meer onder de foto's, dus een kaart is niet veel meer dan de foto
   zelf. Vier van die kaarten naast elkaar scheelt een kwart van de hoogte, en
   dat is precies waar het om gaat — dit blok stond tussen de rest van een lang
   formulier in, en wie naar de filmpjes wil scrolt er nu niet meer aan voorbij.
   De bibliotheek houdt drie: daar staat wél tekst onder elke foto, en daar kies
   je uit driehonderd bestanden in plaats van er twintig te ordenen. */
.gallery-container .current-gallery-images .sortable-gallery.masonry {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sortable-gallery.masonry .gallery-item-manager,
.image-grid.masonry .image-item {
    padding-bottom: var(--card-gap);
}

/* De kaart is het ijkpunt voor de knoppen rechtsonder. */
.sortable-gallery .gallery-item-image,
.image-grid.masonry .image-item {
    position: relative;
}

/* Niet bijsnijden op een vaste hoogte: de foto bepaalt de hoogte van de kaart,
   en dat is precies wat de masonry meet. Een staande en een liggende foto zijn
   zo ook op het oog uit elkaar te houden — in een bibliotheek van driehonderd
   bestandsnamen die op elkaar lijken is dat het eerste waar je op zoekt.
   `auto 3 / 2` is de plaatshouder tot de foto binnen is. */
.sortable-gallery .gallery-item-image img.sortable-thumbnail,
.image-grid.masonry .image-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto 3 / 2;
    object-fit: cover;
}

/* De regels onder de foto staan onder elkaar in plaats van naast elkaar: als
   flex-items werden ze tot hun langste wóórd samengeknepen en liepen ze de
   kaart uit. Onderaan blijft ruimte vrij voor de knoppen. */
.sortable-gallery .gallery-item-controls,
.image-grid.masonry .image-info {
    display: block;
    padding: 0.5rem 0.5rem 1.75rem;
    line-height: 1.35;
}

.image-grid.masonry .image-info p {
    margin: 0 0 0.15rem;
}

/* De knoppen verschijnen alleen in de beheerstand; in de kiesstand hoeft er
   dus geen ruimte voor vrij te blijven. */
.image-grid.masonry .image-item:not(:has(.image-actions)) .image-info {
    padding-bottom: 0.5rem;
}

/* Drie regels is genoeg om een foto te herkennen; de hele alt-tekst hangt in
   de tooltip. */
.sortable-gallery .image-caption-display,
.image-grid.masonry .image-alt-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    color: #333;
}

/* De galerij van een voorstelling toont de alt-tekst niet meer — die hangt in
   de tooltip van de foto. Wat er wél staat is de uitzondering: een foto zonder
   alt-tekst. Klein en in dezelfde maat als de rest van de kaart — het is geen
   alarm — maar wel in het rood, want tussen twintig kaarten die verder niets
   zeggen is dit de enige die om iets vraagt. */
.sortable-gallery .image-alt-ontbreekt {
    font-size: 0.8rem;
    font-variant: all-small-caps;
    line-height: 1.35;
    color: var(--color-red, #c41c1c);
    opacity: 0.8;
}

.sortable-gallery .image-credit,
.image-grid.masonry .image-credit {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #333;
}

.image-grid.masonry .image-title,
.image-grid.masonry .image-usage,
.image-grid.masonry .image-size,
.image-grid.masonry .image-dimensions {
    font-size: 0.8rem;
    color: #333;
}

/* ── De regel onderaan elke kaart ────────────────────────────────────

   Links wat de kaart zelf doet (slepen), rechts wat je ermee kunt (bewerken,
   verwijderen). Klein, dun en in dezelfde inkt: het zijn bijzaken naast de
   foto, geen knoppen die om aandacht vragen. Verwijderen kleurt pas rood als
   je erheen gaat. */

.sortable-gallery .drag-handle,
.sortable-gallery .gallery-item-delete,
.image-grid.masonry .image-actions button {
    color: #333;
    font-size: 0.8rem;
    font-weight: 400;
    font-variant: all-small-caps;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.sortable-gallery .drag-handle {
    padding: 0.25rem 0.5rem 0.5rem;
    padding-right: 7rem;
}

.sortable-gallery .drag-handle:hover,
.sortable-gallery .gallery-item-delete:hover,
.sortable-gallery .gallery-item-delete:focus-visible,
.image-grid.masonry .image-actions button:hover,
.image-grid.masonry .image-actions button:focus-visible {
    opacity: 1;
}

/* Bewust geen `.button`-uiterlijk: een rij vette knoppen trekt de aandacht weg
   van de foto's. */

/* De `z-index` is geen opsmuk maar het enige dat de knop klikbaar houdt. De
   sleepgreep eronder ligt op `opacity: 0.7`, en alles onder de 1 vormt een
   eigen stapellaag — die gaat vóór deze knop staan, ook al is die absoluut
   gepositioneerd, want de greep staat later in de HTML.

   Zonder deze regel raakte je in een lus zodra je de knop naderde: de greep
   ving de muis, `:hover` zette hem op 1, daarmee verloor hij zijn laag, de
   knop kwam bovenop en kleurde rood, de greep raakte zijn hover kwijt en zakte
   terug — en de greep lag er weer overheen. Zwart-rood-zwart-rood, met een
   sleep-handje boven een knop, en een klik die neerkwam op wat er toevallig
   net bovenop lag. */
.sortable-gallery .gallery-item-delete,
.image-grid.masonry .image-actions {
    position: absolute;
    z-index: 1;
    right: 0.5rem;
    bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.image-grid.masonry .image-actions button {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.sortable-gallery .gallery-item-delete:hover,
.sortable-gallery .gallery-item-delete:focus-visible,
.image-grid.masonry .image-actions .btn-delete:hover,
.image-grid.masonry .image-actions .btn-delete:focus-visible {
    color: var(--color-red, #c41c1c);
}

.sortable-gallery .drag-handle .icon-dragdrop,
.sortable-gallery .gallery-item-delete .icon-trash,
.image-grid.masonry .image-actions [class*="icon-"] {
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin-right: 0.25rem;
    background-color: currentColor;
}

/* Smallere schermen: liever twee grote kaarten dan drie postzegels. */
@media (width < 64rem) {
    .gallery-container .current-gallery-images .sortable-gallery.masonry,
    .image-grid.masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width < 40rem) {
    .gallery-container .current-gallery-images .sortable-gallery.masonry,
    .image-grid.masonry {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ── ../base/lightbox.css ── */
/* Lightbox — uiterlijk 1-op-1 van UIkit 3.25.
   Bron: `uikit/uikit-3.25.16/uikit.min.css` (lokale referentiekopie, staat in
   .gitignore en wordt niet geserveerd — vandaar dat de waarden hier overgetikt
   staan in plaats van geïmporteerd). Per blok staat welke uk-klasse hij
   naspeelt, zodat je bij een UIkit-upgrade kunt vergelijken.

   Deze klassen worden gebruikt door de `Lightbox`-hook (assets/js/hooks.js),
   die zijn eigen DOM bouwt. De oude LightboxModal-markup gebruikt dezelfde
   namen, dus die ziet er tijdens de overgang meteen hetzelfde uit. */

/* .uk-lightbox */
.lightbox-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* UIkit zet hier 1010, net boven zijn eigen navbar op 980. Die schaal
       houden de tenants niet aan: de balk van Hotel Modern staat op 1500 en de
       beheerbalk van zusjesvandijk en feikeshuis op 9999. De lightbox lag daar
       dus ónder, en precies de dingen die aan de rand liggen — de teller
       linksboven, het kruisje rechtsboven — verdwenen achter de kop van de
       site.

       De lightbox is per definitie de bovenste laag: hij vult het scherm en
       zet de pagina eronder stil (`body-no-scroll`). Vandaar één waarde boven
       alles wat tegelijk in beeld kan staan — de tenant-koppen (max 1500), de
       modals van Hotel Modern (2000), de beheerbalk (9999) en `.form-container`
       (10001). */
    z-index: 10500;
    background: #000;
    opacity: 0;
    transition: opacity 0.15s linear;
    touch-action: pinch-zoom;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* De foto schuift bij bladeren een volle breedte weg; zonder dit zou dat de
       pagina eronder verbreden. */
    overflow: hidden;
}

/* .uk-lightbox.uk-open */
.lightbox-overlay.is-open {
    opacity: 1;
}

.lightbox-overlay :focus-visible {
    outline-color: rgba(255, 255, 255, 0.7);
}

/* .uk-lightbox-items > * */
.lightbox-image-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .uk-lightbox-items-fit > * > *
   Absoluut gepositioneerd omdat er tijdens een crossfade twee foto's over
   elkaar liggen; ze moeten op dezelfde plek staan, niet naast elkaar. */
.lightbox-image {
    position: absolute;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    cursor: default;
    opacity: 1;
    /* Eén bron van waarheid: de hook leest deze duur uit met getComputedStyle
       voor zijn opruimtimer, dus hier aanpassen volstaat. */
    transition: opacity 0.7s ease;
}

/* Beginstand van de binnenkomende foto; de hook haalt deze klasse er direct na
   het inhangen af, waarna de overgang loopt. */
.lightbox-image.is-entering {
    opacity: 0;
}

.lightbox-image.is-leaving {
    opacity: 0;
}

/* .uk-lightbox-iframe */
.lightbox-iframe {
    width: 80%;
    height: 80%;
    border: 0;
    cursor: default;
}

/* .uk-lightbox-caption */
.lightbox-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    cursor: default;
}

.lightbox-caption:empty {
    display: none;
}

/* .uk-lightbox-counter */
.lightbox-counter {
    position: absolute;
    top: 10px;
    left: 15px;
    color: rgba(255, 255, 255, 0.7);
    cursor: default;
}

.lightbox-counter:empty {
    display: none;
}

/* .uk-slidenav, in de omkeerkleuren die UIkit op een donkere ondergrond
   gebruikt (.uk-light .uk-slidenav). De chevrons zijn de uikit-iconen. */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 10px;
    border: 0;
    background: none;
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.1s ease-in-out;
}

.lightbox-nav-btn::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.lightbox-nav-btn:hover {
    color: rgba(255, 255, 255, 0.95);
}

.lightbox-nav-btn:active {
    color: rgba(255, 255, 255, 0.7);
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-prev::before {
    mask-image: url(../../images/uikit-icons/chevron-left-66baa7923a58cdc14e4d91b1667c85b6.svg?vsn=d);
}

.lightbox-next {
    right: 1rem;
}

.lightbox-next::before {
    mask-image: url(../../images/uikit-icons/chevron-right-dd56d1008572fc326c0bd8dfb893d2e8.svg?vsn=d);
}

/* .uk-close-large — de tegenhanger van .uk-slidenav-large hierboven, en
   daarom in dezelfde maat en dezelfde omkeerkleuren als de chevrons.

   Hij stond op 2rem en 50% wit, tegenover 4rem en 70% voor de chevrons. Beide
   iconen zijn hetzelfde uikit-masker met een streek van ~1.05 in een viewBox
   van 20, dus die maat is meteen de streekdikte: 1,7px tegenover 2,3px voor de
   pijl ernaast. Fletser én dunner, in de hoek — met als gevolg dat hij over het
   hoofd gezien werd en mensen de lightbox met een klik naast de foto sloten.

   De schaduw is geen UIkit: daar houdt een lightbox een rand zwart om de foto,
   hier vult de foto het scherm (`max-width: 100vw`), dus het kruisje ligt óp
   het beeld. Boven een lichte hoek verdwijnt wit-op-wit. De schaduw volgt de
   vorm van het masker en niet het vierkant van de knop, vandaar `filter` op de
   ::before en niet `box-shadow`. */
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4rem;
    height: 4rem;
    padding: 10px 10px;
    border: 0;
    background: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.1s ease-in-out, opacity 0.1s ease-in-out;
}

.lightbox-close::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    mask-image: url(../../images/uikit-icons/close-15b2ed35fd5b392564d057667b0b9a0d.svg?vsn=d);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.8));
}

.lightbox-close:hover {
    color: rgba(255, 255, 255, 0.95);
}

.lightbox-close:active {
    color: rgba(255, 255, 255, 0.7);
}

/* Om dezelfde reden ook onder de pijlen: die liggen midden op de foto. */
.lightbox-nav-btn::before {
    filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.8));
}

/* Achtergrond niet mee laten scrollen zolang de lightbox open staat. */
body.body-no-scroll {
    overflow: hidden;
}


/* ── ../base/button.css ── */
.button,
input[type="file"]::file-selector-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.button,
input[type="file"]::file-selector-button:not(:last-of-type) {
  margin-right: 1.25rem;
}

.button span {
  margin: 0 0.25rem;
}

.button.alt {
  background-color: transparent;
  border: 0.125rem solid;
}

.button.new-agenda-item {
  position: absolute;
  bottom: -4rem;
  right: 0;
  border: 0;
  font-size: 0.875rem;
}

footer.actions {
  position: sticky;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  width: fit-content;
  background-color: #fff;
  border-radius: 0.25rem;
}

footer.actions p {
  margin-right: 2rem;
}

@media (hover: hover) {
  .button:hover {
    opacity: 0.85;
  }
}

.logout-link span {
  font-size: 0.7rem;
  display: block;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: normal;
}

@media (width < 48rem) {
  .button.new-agenda-item {
    bottom: -5rem;
    font-size: 0.7rem;
  }
}

/* Visueel disabled — Phoenix zet `disabled` via phx-disable-with tijdens een
   server-roundtrip; zonder deze regels blijft de knop er gewoon klikbaar uitzien. */
button.button[disabled],
button.button:disabled,
.button[disabled],
.button:disabled {
  opacity: 0.55;
  cursor: progress;
  filter: grayscale(0.3);
  pointer-events: none;
}


/* ── ../base/tooltip.css ── */
.tooltip {
    display: flex;
    color: #333;
    padding: .5rem 0;
    position: relative;
    z-index: 1;
    margin-right: 1rem;
    font-variant: all-small-caps;
}

.tooltip::after {
    content: "";
    width: 100%;
    width: 1.5rem;
    background-color: #f1e740;
    height: 1.5rem;
    /* background-color: #f1e740; */
    top: -.125rem;
    left: .1875rem;
    position: absolute;
    z-index: -1;
    /* transform: rotate(1deg); */
    border-radius: 50%;
    /* background-image: linear-gradient(
        to right,
        #f1e740 1%,
        #f1e740 50%,
        transparent
    );


    background-image: linear-gradient(
        to right,
        #f1e740 0,
        #f1e740 1rem,
        transparent 3.5rem) */
}

.tooltip span {
    /* background-color: #333; */
    display: inline-block;
    margin: 0 .25rem;
}

.tooltip span.icon-bulb {
    background-color: #333;
}

/* ── ../base/flash.css ── */
.flash-container {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 28rem;
}

.flash-container > * {
    pointer-events: auto;
}

/* De verbindingsmelding. Ze staat in de opmaak met `hidden` en wordt door
   LiveView zichtbaar gemaakt — maar alleen als ze binnen de LiveView staat, en
   in deze app staat de chrome eromheen. `app.js` zet daarom zelf de klasse op
   <body>; hier staat wat die klasse doet. De regel is specifieker dan het
   `hidden`-attribuut van de browser, dus die wint. */
body.verbinding-weg #client-error[hidden] {
    display: block;
}

#flash-group > div[role="alert"] {
    backdrop-filter: blur(.5rem);
    border: .0625rem solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 .5rem 2rem rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    width: 26rem;
    padding: 0 2rem;
    position: relative;
    border-radius: 1rem 1rem 1rem .25rem;
}

#flash-group > div[role="alert"]:not([class*="rose"]) {
    background-color: rgb(0 102 158 / 70%);
    color: #fff;
}

/* Error flash styling (rose colors) */
#flash-group > div[role="alert"][class*="rose"] {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border-left: .25rem solid #ef4444;
    color: #7f1d1d;
}

 /* Enhanced button styling */
#flash-group button[aria-label="close"] {
    transition: all 0.2s ease;
    width: 1.25rem;
    height: 1.25rem;
}

#flash-group button[aria-label="close"]:hover {
    background: rgba(255,255,255,.7);
    transform: scale(1.1);
}

/* Progress bar for auto-dismiss */
.flash-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: .1875rem;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 0 0 .5rem .5rem;
    animation: flashProgress 5s linear;
}

.flash-progress.error {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

@keyframes flashProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Pulse animation for better visibility */
#flash-group > div[role="alert"]:not([hidden]) {
    animation: flashPulse 0.5s ease-out;
}

@keyframes flashPulse {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }
    50% {
      transform: scale(1.02);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
}

  /* Dark mode enhancements */
  /* @media (prefers-color-scheme: dark) {
    #flash-group > div[role="alert"]:not([class*="rose"]) {
      background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
      color: #a7f3d0;
      border-left-color: #34d399;
    }

    #flash-group > div[role="alert"][class*="rose"] {
      background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
      color: #fca5a5;
      border-left-color: #f87171;
    }

    #flash-group button[aria-label="close"] {
      background: rgba(255, 255, 255, 0.1);
    }

    #flash-group button[aria-label="close"]:hover {
      background: rgba(255, 255, 255, 0.2);
    }
  } */

.flash-close {
    position: absolute;
    top: .5rem;
    right: 0.5rem;
    color: aliceblue;
    font-size: 2.25rem;
}

/* Mobile responsiveness */
@media (max-width: 48rem) {
    .flash-container {
      left: 1rem;
      right: 1rem;
      max-width: none;
    }

    #flash-group > div[role="alert"] {
      width: calc(100vw - 2rem) !important;
    }
}
/* Het bedankje van het contactformulier. De flash-melding bovenaan komt na het
   versturen niet in beeld: die staat in de root-layout, en die rendert maar één
   keer. Daarom zet de contactpagina zelf deze melding neer, en na vijf seconden
   weer weg. Zonder opmaak belandt ze als losse regel onderaan de pagina; dit is
   de basis. `:where` houdt de specificiteit op nul, zodat een tenant met een
   eigen `.success-banner` (Evrim, Kiki, Margje) gewoon wint. */
:where(.success-banner) {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.9rem 1.5rem;
    background: rgb(0 0 0 / 80%);
    color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%);
    line-height: 1.3;
    animation:
        melding-in 0.4s ease-out both,
        melding-uit 0.5s ease 4.5s both;
}

:where(.success-banner__icon) {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-weight: 700;
}

:where(.success-banner__text) {
    margin: 0;
}

@keyframes melding-in {
    from { opacity: 0; transform: translate(-50%, 1.5rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes melding-uit {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, 0.75rem); }
}

@media (prefers-reduced-motion: reduce) {
    :where(.success-banner) {
        animation: none;
        transform: translateX(-50%);
    }
}

/* De foutmelding van het contactformulier, op dezelfde plek als het bedankje.
   Ze verdwijnt niet vanzelf: ze blijft tot een nieuwe poging of tot de
   bezoeker haar wegklikt. */
:where(.error-banner) {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 0.9rem 1rem 0.9rem 1.5rem;
    background: #fef2f2;
    color: #7f1d1d;
    border-left: 0.25rem solid #ef4444;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 25%);
    line-height: 1.3;
    animation: melding-in 0.4s ease-out both;
}

:where(.error-banner__icon) {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
}

:where(.error-banner__text) {
    margin: 0;
}

:where(.error-banner__close) {
    flex: 0 0 auto;
    padding: 0 0.5rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    :where(.error-banner) {
        animation: none;
        transform: translateX(-50%);
    }
}


/* ── ../base/settings-production.css ── */
.settings-production-layout {
  max-width: 1200px;
  margin: 0 auto;
}

.settings-production-layout header {
  margin-bottom: 2rem;
}

.settings-production-layout header h2 {
  margin-bottom: 0.5rem;
}

.settings-production-layout header p {
  color: #666;
  font-size: 1rem;
}

.settings-actions {
  margin-bottom: 2rem;
  text-align: right;
}

.layout-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.column-config {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
}

.column-config h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.column-config .help-text {
  font-size: 0.9rem;
  color: #666;
  margin: 0 0 1.5rem;
}

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

.section-item {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.section-item:hover {
  border-color: #999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.section-name {
  font-weight: 500;
  flex: 1;
}

.section-actions {
  display: flex;
  gap: 0.5rem;
}

.button.small {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
}

.settings-info {
  background: #e7f3ff;
  border: 1px solid #b3d9ff;
  border-radius: 4px;
  padding: 1rem;
  margin: 2rem 0;
}

.settings-info p {
  margin: 0;
  color: #004085;
}

.sortable-sections {
  min-height: 150px; /* Zodat je kan slepen naar lege kolom */
  background: #fafafa;
  padding: 1rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.sortable-sections.drag-over {
  background-color: #e3f2fd; /* Licht blauw als je erover dragged */
  border: 2px dashed #2196f3;
}

.section-item {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: move;
}

.section-item:hover {
  border-color: #999;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.drag-handle {
  cursor: grab;
  color: #333;
  /* font-size: .7rem; */
  display: flex;
  /* flex-direction: row-reverse; */
  align-items: center;
  font-variant: all-small-caps;
  /* text-transform: uppercase; */
}

.drag-handle:active {
  cursor: grabbing;
}

.section-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.sortable-ghost {
  opacity: 0.4;
  background: #f0f0f0;
}

.sortable-drag {
  opacity: 0.8;
  transform: rotate(2deg);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .layout-columns {
    grid-template-columns: 1fr;
  }
  
  .section-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .section-actions {
    width: 100%;
    justify-content: space-between;
  }
}
/* De schakelaar "Tonen" per sectie. Een uitgezette sectie blijft in de lijst
   staan en op zijn plek: dat is het verschil met weggooien — aanzetten zet
   hem terug waar hij hoorde. Hij ligt alleen zichtbaar stil. */
.section-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.875rem;
  white-space: nowrap;
  cursor: pointer;
}

.section-toggle input {
  width: auto;
  margin: 0;
}

.section-item.is-uit {
  background: #f4f4f4;
  border-style: dashed;
}

.section-item.is-uit .section-name {
  opacity: 0.55;
  text-decoration: line-through;
}


/* ── ../base/document-grid.css ── */
.document-grid {
    padding: 2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.document-grid li{
    background-color: rgba(255,255,255,.7);
    padding: 2rem 1rem;
    border-radius: 1rem;
}

/* ── ../base/documents.css ── */
.index.documents {
    padding: 3.5rem clamp(1rem, calc(0.2727rem + 2.2727vw), 3rem);
    position: relative;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.index.documents .actions {
    display: flex;
    justify-content: flex-end;
    padding: clamp(1rem, 0.737rem + 1.404vw, 2rem) 0;
}

.index.documents .content h2 {
    margin: 2rem 0;
}

ul.documents-list li {
    display: grid;
    align-items: baseline;
    position: relative;
    height: 10rem;
    grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding: 1rem 1.5rem;
    background-color: rgba(255, 255, 255, .85);
    margin-bottom: 2.5rem;
    border-radius: .5rem;
}

ul.documents-list li .type {
    display: none
}

.index.documents ul.documents-list li footer.actions {
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    bottom: -1.5rem;
    right: 50%;
    transform: translateX(50%);
    background-color: transparent;
    box-shadow: none;
}

.current-document,
.selected-document,
.document-item {
    border: .25rem solid #fff;
    padding: 2rem 1rem 4rem;
    background-color: rgba(255,255,255,.5);
    position: relative;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.document-info {
    flex-grow: 1;
}

.current-document p,
.selected-document p,
.document-item p {
   line-height: 1.25;
}

.current-document h4,
.selected-image h4,
.selected-document header {
   font-size: 1.35rem;
   color: #555;
}

.current-document [class*=icon-],
.selected-document [class*=icon-],
.document-item [class*=icon-] {
    background-color: #555;
}

.current-document .document-icon span.icon-pdf,
.selected-document .document-icon span.icon-pdf,
.document-item span.icon-pdf {
    width: 3rem;
    height: 3rem;
}

.document-title,
.document-type,
.document-size {
   background-color: #555;
   color: #fff;
   padding: .5rem;
}

.document-type {
    color: #555;
    display: inline-block;
}

.document-size {
    display: block;
    width: fit-content;
}

.document-info .document-title span,
.current-document .document-type span,
.selected-document .document-type span,
.selected-document .document-size span {
    font-weight: normal;
    font-style: italic;
    font-size: .875rem;
 }

 .document-actions,
 .current-document .document-info a,
 .document-preview a,
 .current-document button,
 .document-item button,
 .document-item a {
    display: flex;
    align-items: center;
 }

 .document-actions {
   justify-content: space-between;
 }

 .current-document .document-info a span {
    display: inline-block;
    margin-right: .25rem;
 }

 .current-document button {
    position: absolute;
    right: 1rem;
    bottom: .5rem;
    display: flex;
    align-items: center;
 }

 .document-preview a,
 .current-document button,
 .document-item button,
 .document-item a {
    font-variant: all-small-caps;
    color: #333;
 }


/* ── ../vendors/quill-editor.css ── */
.quill-container {
  background: white;
  border-radius: .25rem;
  border: none;
  max-width: 50rem;
}

.quill-container .ql-toolbar {
  border-bottom: .0625rem solid #ccc;
  border-top: none;
  border-left: none;
  border-right: none;
}

.quill-container .ql-container {
  border: none;
  font-family: inherit;
}

.quill-container .ql-editor {
  min-height: 9.25rem;
  font-size: .875rem;
  line-height: 1.5;
}

.quill-container .ql-editor p {
  margin: .75rem 0;
  min-height: 1.5em;
}

.quill-container .ql-editor.ql-blank::before {
  color: #999;
  font-style: italic;
}

.quill-container .ql-softbreak {
  font-size: 1rem;
  width: auto !important;
  padding: 0 .5rem !important;
}


/* ── base/fonts.css ── */
/* De Stokerij Schiedam — fonts */
@font-face {
    font-family: "Dosis Book";
    src: url("fonts/dosis.book-1bac20afaeea9245d99bfac964821e5b.woff2?vsn=d") format("woff2"),
         url("fonts/dosis.book-ba735d6750440c952c1ba0793adf7a71.ttf?vsn=d") format("truetype");
}

@font-face {
    font-family: "Dosis Medium";
    src: url("fonts/dosis.medium-d9ceb7582e539060414b85f2c928b382.woff2?vsn=d") format("woff2"),
         url("fonts/dosis.medium-39e264b36985746779360ea14f00ab63.ttf?vsn=d") format("truetype");
}

@font-face {
    font-family: "Dosis Bold";
    src: url("fonts/dosis.extrabold-fe4b064771f33219407592f1db96925c.woff2?vsn=d") format("woff2"),
         url("fonts/dosis.extrabold-e18ccb71462eb63d23530a8a5aae8026.ttf?vsn=d") format("truetype");
}

@font-face {
    font-family: "Cubano Regular";
    src: url("fonts/cubano_regular-b457b07932dacb0e104e6e2cb93b01d2.woff2?vsn=d") format("woff2"),
         url("fonts/cubano_regular-c78cbe0927fa996d0bcc176a11584e20.ttf?vsn=d") format("truetype");
    font-weight: bold;
    font-style: normal;
}

:root {
    --font-display: "Cubano Regular";
    --font-default: "Dosis Medium";
    --font-thin: "Dosis Book";
    --font-bold: "Dosis Bold";
}

body {
    font-family: var(--font-normal);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
}

h2,
section.anbi .col-body .side h3 {
    font-size: clamp(1.5rem, 1.171rem + 1.754vw, 2.75rem);
}
.section-title,
.news-detail .main .text h2 {
    font-size: clamp(2.5rem, 1.776rem + 3.86vw, 5.25rem);
    line-height: 1;
    letter-spacing: -0.0625rem;
    word-spacing: -0.0625rem;
    margin: 0;
    padding: 0.25rem 0 1rem;
    word-break: break-word;
    hyphens: auto;
}

h3.section-title {
    font-size: clamp(2rem, 1.5417rem + 2.037vw, 3.375rem);
}

b,
strong {
    font-family: var(--font-bold);
    font-weight: 700;
}

.button {
    font-size: 1.75rem;
    font-family: var(--font-display);
}

.admin .button,
.actions .button {
    font-family: var(--font-default) !important;
    text-transform: uppercase;
}



/* In de volgorde waarin de Wagtail-site ze laadde; die doet ertoe, want
   productions.css en stokerij.css zetten dezelfde regels. */
/* ── site/reset.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/reset.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

html,body,div,p,h1,h2,h3,h4,h5,h6,pre,figure,
ul,ol,li,dl,dt,dd,form,fieldset,caption,legend,
table,tr,td,th,address,blockquote,img {
  margin:0;
  padding:0;
}

img, fieldset {
  border:none;
}

blockquote, q {
  quotes:none;
}

body *, *:after, *:before {
  box-sizing:border-box;
}

legend {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display:block;
}

button, label, summary {
  cursor:pointer;
}

html, body {
  height:100%;
}

body, button, input, table, textarea, select {
  font-size:1rem;
  line-height:1.5;
}

h1,h2,h3,h4,h5,h6 {
  text-transform: uppercase;
}

h1,h2 {
    letter-spacing: .125rem;
}

a,
a:hover {
  color: currentColor;
}

/* ── site/productions.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/productions.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

.production-detail {
    background-color: var(--color-beige);
}

.production-detail p {
    font-size: clamp(1.125rem, 1.0000rem + 0.5556vw, 1.5rem);
}

.production-detail h2.section-title {
    color: var(--color-orange);
}

.production-content {
    margin: 0 1rem;
}

.production-content p {
    margin: 1rem 0;
}

.production-summary,
.production-side article {
    margin: 1.5rem 0 3rem;
}

.production-side img {
    object-fit: contain;
    width: 100%;
    border-radius: .5rem .5rem .5rem .5rem;
}

.production-side article p {
    margin: 1rem 0;
}

.production-credits {
    padding: 2rem 0;
    margin: 2rem 0;
    position: relative;
}

.production-credits > * {
    padding: 0 .75rem;
}

.production-credits::after {
    bottom: 0 !important;
}

.production-quotes blockquote,
.news-quotes blockquote,
.production-info,
.news-info {
    background-color: var(--color-orange);
    color: rgba(0,0,0, .85);
    margin-left: clamp(-1rem, -0.3333rem + -2.9630vw, -3rem);
    margin-right: clamp(-1rem, -0.3333rem + -2.9630vw, -3rem);
    margin-top: 2rem;
    padding: 2rem;
    border-radius: .5rem .5rem.5rem.5rem;
}

.production-quotes blockquote:not(:last-of-type),
.news-quotes blockquote:not(:last-of-type),
.production-info:not(:last-of-type),
.news-info:not(:last-of-type) {
    margin-bottom: 2rem;
}

.production-main-quote {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.5000rem + 1.1111vw, 2.5rem);
    text-align: center;
    padding: 3rem 1rem;
    line-height: 1;
}

/* AGENDA */
.production-agenda {
    margin: 2rem 0;
}

.production-agenda .section-title .section-subtitle {
    color: var(--color-pink);
}

.production-gallery {
    margin: 2rem -3rem;
    padding: 1rem;
}
.masonry-gallery {
    columns: 2;
    column-gap: 1rem;
}

.masonry-gallery img {
    display: inline-block;
    padding-bottom: .5rem;
}

.production-agenda > * {
    padding: 0 .75rem;
}

.production-agenda .agenda {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.agenda-list {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap: clamp(.25rem, 1.111vw, 1rem);
    max-width: 70rem;
    position: relative;
}

#agenda .agenda-list {
    grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
}

.agenda-list.agenda-header {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 0.8750rem + 1.1111vw, 1.875rem);
}

.agenda-list.agenda-items li {
    padding: .5rem 0;
    /* padding-left: clamp(.25rem, 1.111vw, 1rem); */
    padding-right: clamp(.25rem, 1.111vw, 1rem);
    font-size: clamp(1.125rem, 0.8750rem + 1.1111vw, 1.875rem);
    line-height: 1.1;
    overflow-x: hidden;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* S L I D E R / L I G H T B O X */
.production-slider-gallery .slider {
    position: relative;
    overflow: hidden;
}
  
.production-slider-gallery .slides-wrapper {
    display: flex;
    transition: transform 0.5s ease;
}
  
.production-slider-gallery .slide {
    flex: 0 0 33.333%;
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.production-slider-gallery .slide img {
    height: 25vh;
    max-width: 100%;
    object-fit: cover;
}
  
.production-slider-gallery .slider .icon-prev,
.production-slider-gallery .slider .icon-next {
    position: absolute;
    top: 50%;
    width: clamp(3rem, 2.3333rem + 2.9630vw, 5rem);
    height: clamp(3rem, 2.3333rem + 2.9630vw, 5rem);
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
}
  
.production-slider-gallery .slider .icon-next {
    right: clamp(1rem, -0.3333rem + 5.9259vw, 5rem);
}
  
.production-slider-gallery .slider .icon-prev {
    left: clamp(1rem, -0.3333rem + 5.9259vw, 5rem);
}

.agenda-list.agenda-items li:not(:last-of-type) {
    border-right: .125rem solid;
}

.agenda-list.agenda-items li span.tickets {
    font-family: var(--font-bold);
    font-weight: 700;
    font-size: .9em;
}

.agenda-list.agenda-items li .comment {
    font-size: 1rem;
    font-family: var(--font-bold);
    display: inline-block;
    padding: .5rem 0;
    line-height: 1;
}

.production-boek-ons {
    padding: 2rem 0 4rem;
}

.production-boek-ons .boek-ons {
    background-color: var(--color-orange);
}

.production-info,
.news-info {
    background-color: var(--color-pink);
    padding: 2rem;
    border-radius: .5rem .5rem.5rem.5rem;
}

.production-videos {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}

.production-videos-item .section-title {
    font-size: 2.25rem;
}

section.production-slider-gallery {
    margin: 2rem 0;
    background-color: var(--color-orange);
}

/* MEDIA QUERIES */
@media (width < 48rem) {
    .agenda-list.agenda-header li.price,
    .agenda-list.agenda-items li.price {
        display: none;
    }
    
    .agenda-list.agenda-items li.hour-visible {
        border-right: none !important;
    }

    .production-slider-gallery .slide {
        flex: 0 0 50%;
    }

    .production-main-quote {
        padding: 1rem;
    }

    .production-agenda,
    .production-agenda > * {
        padding: 0;
    }

    #agenda .agenda-list {
       grid-template-columns: 1fr 1fr 2fr 1fr;
    }
}


@media (width > 48rem) {
    .production-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1rem, -0.6667rem + 7.4074vw, 6rem);
    }
}

@media (width > 60rem) {

    .agenda-list.agenda-items li span.tickets {
        position: absolute;
        right: 0;
    }
}

@media (width > 70rem) {

    .agenda-list.agenda-items li span.tickets {
        right: .5rem;
    }
}

/* ── site/stokerij.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/stokerij.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

:root {
  --color-beige: #fdf7e8;
  --color-pink: #fdb8ff;
  --color-black: #3c3b3c;
  --color-blue: #90c5fe;
  --color-green: #88c9c3;
  --color-orange: #f9b71b;
  --color-green: #ccd82e;
  --color-lightgreen: #eff2b9;
  --font-normal: 'Dosis Book', sans-serif;
  --font-medium: 'Dosis Medium', sans-serif;
  --font-display: 'Cubano Regular', cursive;
  --font-bold: 'Dosis Bold', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-normal);
  color: var(--color-black);
}

body.no-scroll {
  overflow-y: hidden;
}

h2, h3, h4 {
  font-family: var(--font-display);
  margin: 1.5rem 0;
  letter-spacing: .125rem;
  line-height: 1.1;
}

img {
  max-width: 100%;
  height: auto;
}

.page-title {
  padding: 0 0 2rem 2rem;
  font-size: 1.75rem;
  letter-spacing: .5rem;
}

.section-title {
  font-size: clamp(2.5rem, 4.5vw, 5.25rem);
  line-height: 1;
  letter-spacing: -.0625rem;
  word-spacing: -.0625rem;
  margin: 0;
  padding: .25rem 0 1rem;
}

.section-subtitle {
  display: block;
  font-size: clamp(1.5rem, 1.2500rem + 1.1111vw, 2.25rem);
  font-family: var(--font-display);
  line-height: 1;
  margin-bottom: 1rem;
}


h3.section-title {
  font-size: clamp(2rem, 1.5417rem + 2.0370vw, 3.375rem);
}

h4.section-title {
  font-size: clamp(1.75rem, 1.3333rem + 1.8519vw, 3rem);
}

.outer {
  width: 100%;
  min-height: 100%;
}

.inner {
  max-width: 90rem;
  margin: auto;
  min-height: 100vh;
  background-color: var(--color-beige);
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 .0625rem 2rem .125rem rgba(0,0,0,.1);
}

.main {
  flex-grow: 1;
}

.inner,
.header,
.menu-list,
.menu-icons,
.footer,
.footer-icons,
.footer-text,
.button,
.menu-active .menu-list {
  display: flex;
}

a {
  text-decoration: none;
}

.text p a {
  text-decoration: underline;
}

.menu-list li:not(.active) a,
.footer-text a,
.anbi a {
  position: relative;
}

.menu-list li:not(.active) a::after,
.footer-text a::after,
.anbi a::after {
  content: '';
  position: absolute;
  background-color: var(--color-orange);
  top: 50%;
  translate: 0 -25%;
  left: .5rem;
  width: 0;
  height: 25%;
  transition: all .25s;
  z-index: -1;
  border-radius: .25rem .25rem .25rem .25rem;
  opacity: .7;
  rotate: -1deg;
}

.menu-list li:not(.active) a:hover,
.footer-text a:hover,
.anbi a:hover {
  z-index: 1;
}

.menu-list li:not(.active) a:hover::after,
.footer-text a:hover::after,
.anbi a:hover::after {
  width: 100%;
}


b, strong {
  font-family: var(--font-bold);
  font-weight: 700;
}

.header,
.footer {
  background-color: var(--color-beige);
  justify-content: space-between;
  padding: 2rem;
}

.header,
.footer,
.production-content,
.production-credits,
.production-agenda,
.production-boek-ons .boek-ons,
.productions,
.about-content,
.tiles-section,
.anbi-verslagen,
.js-content,
.boek-ons-content,
section.contact,
.anbi-content,
.contact-content,
.latest_productions,
.agenda,
section.news,
.section-news,
.news-content,
.home .js-section,
.home .section-about,
.home .newsletter-section,
section.production-videos,
section.production-slider-gallery {
  padding-left: clamp(1rem, -0.1250rem + 5.0000vw, 4.375rem);
  padding-right: clamp(1rem, -0.1250rem + 5.0000vw, 4.375rem);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.header {
  height: clamp(8rem, 6.5000rem + 6.6667vh, 12.5rem);
  padding-top: clamp(1rem, 0.6667rem + 1.4815vh, 2rem);
  padding-bottom: clamp(1rem, 0.6667rem + 1.4815vh, 2rem);
  position: relative;
}

.header .icon-search {
  position: absolute;
  right: 5rem;
  top: 20%;
}

.header .icon-menu,
.header .icon-close {
  position: absolute;
  right: 1rem;
  top: 2rem;
  background-color: var(--color-black);
  z-index: 100;
}

.menu.active {
  display: block;
}

.menu.active .menu-list {
  background-color: var(--color-green);
  position: fixed;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  z-index: 99;
}

.menu-list,
.menu-icons {
  justify-content: flex-end;
}

.menu-list > li,
.menu-icons > li {
  line-height: 1.25;
}

.menu-list > li:not(:first-of-type),
.menu-icons > li:not(:first-of-type) {
  margin-left: .75rem;
}

.menu-list > li:not(:last-of-type),
.menu-icons > li:not(:last-of-type) {
  margin-right: .75rem;
}

.menu-list { 
  font-size: 1.625rem;
  word-spacing: -.125rem;
  margin-top: 1rem;
  text-transform: uppercase;
  font-family: var(--font-display);
  flex-wrap: wrap;
}

.menu-list li.active {
  color: var(--color-orange);
}

.menu-list a {
  text-decoration: none;
}

.footer {
  position: relative;
  height: 17.5rem;
  font-size: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem);
}

.footer::before,
.production-credits::before,
.js-content blockquote::before,
.latest_productions::before {
  content: '';
  height: .625rem;
  width: calc(100% - clamp(2rem, 0.0000rem + 8.8889vw, 8rem));
  background-color: var(--color-black);
  position: absolute;
  left: clamp(1rem, -0.3333rem + 5.9259vw, 5rem);
  left: clamp(1rem, 0.0000rem + 4.4444vw, 4rem);
  top: 0;
  border-radius: 4rem 4rem 4rem 4rem;
}

header::after,
.production-credits::after,
.js-content blockquote::after {
  content: '';
  height: .625rem;
  width: calc(100% - clamp(2rem, 0.0000rem + 8.8889vw, 8rem));

  background-color: var(--color-black);
  position: absolute;
  left: clamp(1rem, -0.3333rem + 5.9259vw, 5rem);
  left: clamp(1rem, 0.0000rem + 4.4444vw, 4rem);

  bottom: 3rem;
  border-radius: 4rem 4rem 4rem 4rem;
}

.footer-text {
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.footer-text span:last-of-type {
  font-size: .875rem;
}

.footer-text a {
  text-decoration: none;
}

button {
  background-color: transparent;
  border: none;
}

.button {
  background-color: var(--color-green);
  font-size: 1.75rem;
  font-family: var(--font-display);
  border-radius: .5rem;
  padding: .25rem 2rem .5rem;
  text-decoration: none;
  margin: 1rem 0;
  text-align: center;
  transition: box-shadow .2s;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-height: 6rem;
}

.button:hover {
  text-decoration: none;
  box-shadow: 0 0 1rem rgba(0,0,0,.125);
  transition: box-shadow .3s;
}

.button:active {
  scale: .9;
  box-shadow: none;
}

ul {
  list-style: none;
  padding: 0;
}

/* T I L E S */
.tiles-section {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.tiles-section h3 {
  height: 0;
  opacity: 0;
}

.tiles-section .tiles li:nth-of-type(odd) .text {
  background-color: var(--color-pink);
}

.tiles-section .tiles li:nth-of-type(2) .text {
  background-color: var(--color-green);
}

.tiles li .image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: .75rem .75rem .75rem .75rem;

}

.tiles li .text {
  min-height: 22rem;
  direction: ltr;
  position: relative;
  border-radius: .75rem .75rem .75rem .75rem;
  z-index: 0;
  overflow-y: hidden;
}

.tiles li .text::after {
  position: absolute;
  z-index: 1;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      to bottom,
      transparent 70%,
      #fdf7e8 80%
  );
}

.tiles-section .tiles li .text::after {
  visibility: hidden;
}

.tiles li .text p {
  font-size: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);
  font-size: clamp(1.125rem, 1.0000rem + 0.5556vw, 1.5rem);

  line-height: 1.5;
  padding-right: clamp(1rem, 0.0000rem + 4.4444vw, 4rem);
}

.tiles li .text .button {
  position: absolute;
  bottom: 0;
  z-index: 2;
}

#spinner {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

#totop {
  position: fixed;
	right: .25rem;
	bottom: 7rem;
	display: none;
  background-color: var(--color-green);
  border-radius: 50%;
  border: .1875rem solid #fff;
  box-shadow: 0 0 2.5rem var(--color-lightgreen);
  z-index: 1000;
}

.section-title,
.template-jonge_stokerijpage,
.news-card-text h3,
.latest_productions h3 {
  word-break: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* MEDIA QUERIES */
@media (width < 48rem) {

  .header .icon-menu,
  .header .icon-close {
    top: 1.5rem;
  }

  .tiles li .text {
    margin-bottom: 1.5rem;
  }

  .footer {
    flex-direction: column;
    justify-content: space-between;
    padding-top: 2rem;
    height: 20rem;
    align-items: center;
  }
}

@media (width >= 48rem) {
  .tiles li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.5rem, 0.0000rem + 2.2222vw, 2rem);
    aspect-ratio: 1.75;
    padding-bottom: clamp(0.5rem, 0.0000rem + 2.2222vw, 2rem);
  }

  .tiles li:nth-of-type(odd) {
    direction: rtl;
  }

  #totop {
    right: 1rem;
  }
}

@media (width >= 60rem) {
  .tiles li {
      aspect-ratio: 2;
  }

  .tiles li .text {
    padding: 0 2rem 2rem 2rem;
  }

  .menu {
    display: block;
  }
}

@media (width > 90rem) {

  #totop {
    right: 2rem;
  }
}

@media (width > 100rem) {
  .outer {
    padding-top: 2rem;
  }

  #totop {
    right: 3rem;
  }
}

@media (width > 120rem) {

  #totop {
    right: 10%;
  }
}

@media (width > 160rem) {

  #totop {
    right: 20%;
  }
}

@media screen and (min-width: 48rem) and (max-width: 80rem) {
  .menu-list {
    padding-right: 6rem;
  }

  .tiles li .text {
    max-height: 40rem;
    overflow-y: hidden;
  }
}

/* ── site/search.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/search.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

#search-input {
    position: absolute;
    top: 60%;
    right: 6rem;
    opacity: 0;
    transition: opacity .2s;
    border: .375rem solid var(--color-orange);
    padding: .25rem .5rem;
    width: 15rem;
    font-family: var(--font-default);
    font-size: 1.25rem;
    box-shadow: -.125rem .125rem 2rem .25rem rgba(0,0,0,.15);
}

#search-input.visible {
    opacity: 1;
    transition: opacity .25s ease-out;
    z-index: 1;
}

:focus-visible {
    outline: none;
}

.template-searchresults .main {
    background-color: var(--color-beige);

}

.search-results {
    padding: 2rem 0;
    padding-left: clamp(1rem, -0.1250rem + 5.0000vw, 4.375rem);
    padding-right: clamp(1rem, -0.1250rem + 5.0000vw, 4.375rem);
    height: 100%;
}

/* ── site/home.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/home.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

/* SLIDER */

.slide-text.dark {
    color: var(--color-orange) !important;
    text-shadow: .0625rem .0625rem rgba(255, 255, 255, .85);
}

.slider.dark-nav button::before,
.slider.dark-nav button::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-orange);
}

.home .slider {
    width: 100%;
    height: 35.625rem;
    max-height: 50vh;
    position: relative;
    overflow: hidden;
    background-color: #555;
}

@media (width >= 48rem) {
    .smaller {
        display: none;
    }
}

@media (width < 48rem) {
    .larger {
        display: none;
    }
}

.home .slider img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.home .slider .icon-prev,
.home .slider .icon-next {
    position: absolute;
    top: 40%;
    width: clamp(3rem, 2.3333rem + 2.9630vw, 5rem);
    height: clamp(3rem, 2.3333rem + 2.9630vw, 5rem);
    z-index: 2;
}

.home .slider .icon-next {
    right: clamp(1rem, -0.3333rem + 5.9259vw, 5rem);
}

.home .slider .icon-prev {
    left: clamp(1rem, -0.3333rem + 5.9259vw, 5rem);
}

.home .slider .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: opacity .5s;
    background-size: cover;
    background-position: top;
}

.home .slider .slide.active {
    transition: opacity .75s;
    opacity: 1;
    z-index: 1;
}

.home .slider .slide::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient(
        to bottom,
        transparent 65%,
        rgba(0,0,0,.5)
    ); */
}

.home .slider .slide .slide-text {
    position: absolute;
    left: 45%;
    translate: -45% 0;
    bottom: 3rem;
    color: #fff;
    text-align: center;
    z-index: 1;
}

.home .slider .slide .slide-text h2 {
    font-size: clamp(1.75rem, 1.5833rem + 0.7407vw, 2.25rem);
    margin: 0;
}  
.home .slider .slide .slide-text span {
    font-size: clamp(1.25rem, 1.0833rem + 0.7407vw, 1.75rem);
    text-transform: lowercase;
    font-family: var(--font-normal);
    line-height: 1;
}

.home .slider .slide .slide-text a {
    color: currentColor;
    text-decoration: none;
}

.home .slider .slide .slide-text a:hover {
    color: currentColor;
    text-decoration: none;
}

.home .slider .slide .slide-image {
    object-fit: cover;
    width: 100%;
    height: 100vh;
}

.home .slider .slide .slide-image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.home .slider h1 {
    position: absolute;
    color: rgba(255,255,255,.7);
    left: 45%;
    bottom: 4rem;
    font-size: 2rem;
}

/* LATEST PRODUCTIONS */
.home .latest_productions {
    padding-top: clamp(1rem, -0.1667rem + 5.1852vw, 4.5rem);
    padding-bottom: clamp(0.5rem, 0.0000rem + 2.2222vw, 2rem);
    position: relative;
}

.home .latest_productions::before {
    top: 3rem;
}
.home .latest_productions  p {
    margin-bottom: 1.5rem;
}

.home .latest_productions .tiles {
    margin-top: 3rem;
}

.home .latest_productions .tiles li .text {
    min-height: 26rem;
}

.home .latest_productions .tiles .text h2.section-title {
    padding: 0;
}

/* NEWS */
.home .section-news {
    width: 100%;
    overflow-x: hidden;
    background-color: var(--color-orange);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* JONGE STOKERIJ */
.home .js-section {
    background-color: var(--color-orange);
    height: 60rem;
    overflow-y: hidden;
    position: relative;
    margin-bottom: 2rem;
    z-index: 1;
}

.home .js-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: linear-gradient(
        to bottom,
        rgb(249, 183, 27, 0) 80%,
        rgb(249, 183, 27) 90%

    );
}

.home .js-section img {
    object-fit: cover;
    height: 32rem;
    width: 100%;
}

.home .js-section p {
    font-size: 1.5rem;
}

.home .js-section .button {
    position: absolute;
    z-index: 2;
    bottom: 2rem;
}

.news-card-text h3,
.latest_productions h3 {
    font-size: clamp(1.5rem, 1.1667rem + 1.4815vw ,2.5rem);
    margin: .125rem 0;
    letter-spacing: -.0625rem;
    line-height: 1;
}

.latest_productions h3 a {
    position: relative;
    z-index: 10;
}

.newsletter-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 1.3333rem + 2.9630vw, 4rem);
}

.newsletter-section img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media (width < 48rem) {
    .home .slider {
        height: 25rem;
    }

    .home .slider .slide .slide-text {
        left: 0;
        translate: 0 0;
        padding: 0 1rem;
    }

    .home .js-section img {
        height: 20rem;
    }

    .section-about li {
        aspect-ratio: .5;
    }

    .newsletter-section {
        display: flex;
        flex-direction: column;
    }

    .newsletter-section .image {
        height: 45vh;
    }

    .home .latest_productions .tiles {
        margin-top: 5rem;
    }
}

@media (width < 70rem) {
    .home .latest_productions .tiles li,
    .home .latest_productions .tiles li .image img {
        aspect-ratio: unset;
    }
}

/* ── site/about.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/about.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

.about img,
.jonge-stokerij img,
.contact img,
.anbi img,
.page404 img,
.boek-ons img {
    object-fit: cover;
    width: 100%;
    max-height: 50vh;
    height: 35.625rem;
}

.about-content,
.anbi-content,
.js-content,
section.contact,
.contact-content,
.boek-ons-content {
   padding-top: 2rem;
   padding-bottom: 2rem;
}

.about-content p,
.anbi-content p,
.js-content p,
section.contact p,
.contact-content p,
.boek-ons-content p {
    margin: 1rem 0;
    font-size: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);
}

.about-content blockquote,
.anbi-content blockquote,
.js-content blockquote,
section.contact blockquote,
.contact-content blockquote,
.boek-ons-content blockquote {
    position: relative;
    padding: clamp(2rem, 1.6667rem + 1.4815vw, 3rem);
    font-size: clamp(2rem, 1.8333rem + 0.7407vw, 2.5rem);
    text-align: center;
    line-height: clamp(2.5rem, 2.3333rem + 0.7407vw, 3rem);
    color: var(--color-orange);
    font-family: var(--font-display);
    margin: 4rem 0;
}

.about-content blockquote::before,
.anbi-content blockquote::before,
.js-content blockquote::before,
section.contact blockquote::before,
.contact-content blockquote::before,
.boek-ons-content blockquote::before {
    width: 100%;
    left: 0;
}

.about-content blockquote::after,
.anbi-content blockquote::after,
.js-content blockquote::after,
section.contact blockquote::after,
.contact-content blockquote::after,
.boek-ons-content blockquote::after {
    width: 100%;
    left: 0;
    bottom: 0;
}

.about-content a,
.anbi-content a,
.js-content a,
section.contact a,
.contact-content a,
.boek-ons-content a {
    text-decoration: underline;
}

.anbi-content h3 {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0;
}

.anbi-verslagen {
    background-color: var(--color-orange);
    margin-bottom: 4rem;
}

.anbi-verslagen h3 {
    font-size: 2.75rem;
    letter-spacing: -.0625rem;
}

.anbi-verslagen a {
    font-size: 1.25rem;
    text-transform: uppercase;
    text-decoration: underline;
}

.contact {
    position: relative;
}

.contact label, input, textarea,
.newsletter-section label, input, textarea {
    display: block;
    background-color: var(--color-beige);
    font-family: var(--font-medium);
    border-radius: .25rem .25rem .25rem .25rem;
    outline: none;
    border-width: .0625rem;
    border-color: var(--color-black);
    width: 100%;
    padding: .25rem .5rem;
}

.contact label,
.newsletter-section label {
    padding: 0;
    margin-top: 2rem;
}

.contact .input-fields,
.newsletter-section .input-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.contact form,
.newsletter-section form {
    width: 80%;
}

.contact textarea,
.newsletter-section textarea {
    height: 16rem;
}

.contact .button,
.newsletter-section .button {
    background-color: var(--color-pink);
}

#response-container {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -25%);
    z-index: 1;
    transition: opacity .5s;
    font-family: var(--font-medium);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .0625rem;
    padding: 3rem 6rem;
    background-color: var(--color-pink);
    border-radius: .5rem .5rem .5rem .5rem;
    color: var(--color-black);
    border: .25rem solid;
}

div.about section.tiles-section ul.tiles li div.text {
    padding: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
}

@media (width > 48rem) {
    .anbi-verslagen ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

@media (width > 60rem) {
    .about-content p,
    .anbi-content p,
    .js-content p,
    section.contact p,
    .contact-content p,
    .boek-ons-content p {
        width: 95%;
    }
}

/* ── site/agenda.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/agenda.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

.template-agendapage .main {
    background-color: var(--color-beige);
}

.agenda {
    background-color: var(--color-beige);
}

section.tour {
    padding: 2rem 0;
}

section.tour .section-title {
    padding: 0 0 1rem 12.5%;
}


section.tour ul.agenda-list a.hover-link,
.agenda-list.agenda-items a.hover-link {
    display: contents;
}

section.tour ul.agenda-list a.hover-link[href="#"],
.agenda-list.agenda-items a.hover-link[href="#"] {
    cursor: default;
}

@media (hover:hover) {
    section.tour ul.agenda-list.agenda-items:hover {
        background-color: var(--color-orange);
    }

    .agenda-list.agenda-items:hover {
        background-color: var(--color-pink);
    }
}

.agenda-button {
    padding: 5rem 0 2rem;
    display: flex;
    justify-content: center;
}

/* ── site/news.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/news.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

.news-card {
    height: 31rem;
    overflow-y: hidden;
}

.news-card a img {
    display: block;
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
    border-radius: .5rem .5rem .5rem .5rem;
}

.news-card-text {
    padding: 1rem;
    position: relative;
    height: 50%;
}

.news-card-text::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: linear-gradient(
        to bottom,
        transparent 60%,
        rgb(253, 247, 232) 90%
    );
}

.home .section-news .news-card-text::after {
    background-image: linear-gradient(
        to bottom,
        transparent 60%,
        rgb(249, 183, 27) 90%
    );
} 

.news-card-img {
    height: 50%;
}

.news-card-text p,
.news-content p {
    font-size: clamp(1.125rem, 1.0000rem + 0.5556vw, 1.5rem);
    margin-top: .5rem;
    line-height: 1.1;
}

.news-content p:last-of-type {
    padding-bottom: 2rem;
}

.news-content p {
    line-height: 1.25;
    margin-top: 1.5rem;
}

.news-card .button {
    position: absolute;
    bottom: 1rem;
    z-index: 2;
}

.news-content {
    display: flex;
    flex-direction: column-reverse;
}

.news-content img {
   object-fit: contain;
   object-position: top;
   width: 100%;
   border-radius: .75rem .75rem .75rem .75rem;
}

@media (width <= 48rem) {
    .news-card {
        height: auto;
    }

    .news-card-img {
        height: 12rem;
    }

    .news-card-text {
        padding: 1rem 0;
    }

    .news-card-text article {
        margin-bottom: 5rem;
    }
}

@media (width >= 48rem) {
    .news-cards,
    .news-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1rem, 0.6667rem + 1.4815vw, 2rem); 
    }

    .news-card .button {
        bottom: -1rem;
    }

    .home .news-card .button {
        bottom: 0;
    }
}

/* ── site/icons.css ── */
/* Overgenomen van destokerijschiedam.nl (Wagtail), /static/css/icons.css, 7 okt 2026.
   Alleen de paden naar de beelden zijn aangepast; wijzigingen voor KK staan in kk.css. */

[class*=icon-] {
	display: inline-block;
	background-position: center;
	background-color: var(--color-black);
	mask-size: cover;
	mask-repeat: no-repeat;
	width: 1.5rem;
	height: 1.5rem;
}

.icon-facebook,
.icon-mail,
.icon-insta {
	width:  clamp(1.75rem, 1.6667rem + 0.3704vw, 2rem);
	height:  clamp(1.75rem, 1.6667rem + 0.3704vw, 2rem);
}

.icon-bars {
	mask-image: url(/images/destokerij/icon-bars-41be620bd259f7e26ffc52c8c079ec9e.svg?vsn=d);
	width: 2.5rem;
	height: 2.5rem;
}

.icon-close {
	mask-image: url(/images/destokerij/icon-close-cbd0ccee8356ef080096658ba056c407.svg?vsn=d);
	width: 2.5rem;
	height: 2.5rem;
}

.icon-facebook {
	mask-image: url(/images/destokerij/icon-facebook-321f8cf22548ed852630f1440b5cfaa4.svg?vsn=d);
	margin-right: 1rem;
}

.icon-insta {
	mask-image: url(/images/destokerij/icon-insta-d2205c5220672c44939b0e0261b04689.svg?vsn=d);
}

.icon_logo-klein {
	background-image: url(/images/destokerij/logo-klein-1aa9ec3fe1d5eacd16b719c465ce597f.svg?vsn=d);
	display: inline-block;
	background-size: cover;
}

.icon-logo {
	display: inline-block;
	mask-image: url(/images/destokerij/logo-stokerij-black-864b5737ed593239ea3b1887997bf559.svg?vsn=d);
	width: 10rem;
	height: 3.5rem;
	background-size: cover;
	background-position: center;
}

@media (min-width: 48rem) {
	.icon-logo {
		width: 12rem;
		height: 4rem;
	}
}

.icon-mail {
	mask-image: url(/images/destokerij/icon-mail-893ead09ee635f6bd38b6fc7f35da61f.svg?vsn=d);
	margin: 0 1rem;
}

.icon-menu {
	mask-image: url(/images/destokerij/icon-menu-66e73b107b1680134d62fa3e1cd6f78c.svg?vsn=d);
	width: 3rem;
	height: 3rem;
	z-index: 1;

	@media (min-width: 60rem) {
		display: none;
	}
}

.icon-next {
	mask-image: url(/images/destokerij/icon-next-d5ebb7b1c570bf649b9c09682e3768cd.svg?vsn=d);
	background-color: #fff;
}

.icon-prev {
	mask-image: url(/images/destokerij/icon-prev-c2469870f4488bbe0c0f17969bda1692.svg?vsn=d);
	background-color: #fff;
}

.icon-search {
	mask-image: url(/images/destokerij/icon-search-12450b69ebb01960f770962c89fba581.svg?vsn=d);
	width: 3rem;
	height: 3rem;
	background-color: var(--color-black);
}

.icon-up {
	mask-image: url(/images/destokerij/icon-up-f67a01b5cf9225ff591f5e598bef9d17.svg?vsn=d);
	width: 3rem;
	height: 3rem;
	background-color: #fff;
}

@media (width < 48rem) {
	.icon-up {
		width: 2.5rem;
		height: 2.5rem;
	}
}


/* ── site/kk.css ── */
/* De Stokerij op KK: wat de overgenomen CSS van de Wagtail-site (de andere
   bestanden in deze map) nodig heeft om op de KK-pagina's te passen. Alleen
   aanvullingen; waar iets van de oude site anders moest, staat erbij waarom. */

/* Voor een schermlezer wel, op het scherm niet. */
.sr-only {
  position: absolute;
  width: .0625rem;
  height: .0625rem;
  padding: 0;
  margin: -.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* De naar-boven-knop: de hook `BackToTop` zet `visible`; de oude site zette
   `display: flex` met de hand. */
#totop.visible {
  display: flex;
}

#totop button {
  cursor: pointer;
}

/* Het logo in de kop is een link; de oude site had een lege <a>. */
.header h1 a.icon-logo {
  display: inline-block;
}

/* Het menu: de oude site gaf <nav> het attribuut `hidden` en liet de CSS het
   tonen; hier doet de CSS het allebei. */
.menu {
  display: none;
}

@media (width >= 60rem) {
  .menu {
    display: block;
  }
}

/* De beheerbalk boven de kop, alleen voor wie ingelogd is. */
.stokerij-beheerbalk ul {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  margin: 0;
  padding: .375rem clamp(1rem, -0.1250rem + 5.0000vw, 4.375rem);
  font-family: var(--font-medium);
  font-size: .9375rem;
  background-color: var(--color-black);
  color: var(--color-beige);
}

.stokerij-beheerbalk a:hover {
  text-decoration: underline;
}

/* De zoekvelden: het zoekvak in de kop krijgt de klik pas als het zichtbaar
   is, anders vangt het onzichtbare veld klikken op het menu. */
#search-input {
  pointer-events: none;
}

#search-input.visible {
  pointer-events: auto;
}

.search-results .zoek-opnieuw {
  display: flex;
  gap: 1rem;
  align-items: center;
  max-width: 40rem;
  margin-bottom: 2rem;
}

.search-results .zoek-opnieuw input {
  font-size: 1.25rem;
}

.search-results ul li {
  margin: 1rem 0;
}

/* Bewerklinks bij elk blok, alleen voor wie mag bewerken. */
.stokerij-bewerk {
  font-family: var(--font-medium);
  font-size: 1rem !important;
  margin: .5rem 0;
}

.stokerij-bewerk a {
  text-decoration: underline;
  color: #555;
}

.tiles li .text .stokerij-bewerk {
  position: absolute;
  bottom: 0;
  right: 2rem;
  z-index: 3;
}

.section-slider {
  position: relative;
}

.section-slider .stokerij-bewerk {
  position: absolute;
  right: 2rem;
  bottom: 1rem;
  z-index: 3;
  background-color: var(--color-beige);
  padding: 0 .5rem;
  border-radius: .25rem;
}

/* De speellijst. Op de oude site stond elke rij als <ul> met de link er
   middenin (`display: contents`); hier is een rij een <li> met de link als
   rooster, en zijn de cellen <span>s. Dezelfde regels als in
   productions.css, voor die cellen. */
ul.agenda-rijen {
  list-style: none;
  padding: 0;
  margin: 0;
}

a.agenda-list.agenda-items {
  text-decoration: none;
  color: inherit;
}

.agenda-list.agenda-items > span {
  padding: .5rem 0;
  padding-right: clamp(.25rem, 1.111vw, 1rem);
  font-size: clamp(1.125rem, 0.8750rem + 1.1111vw, 1.875rem);
  line-height: 1.1;
  overflow-x: hidden;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.agenda-list.agenda-items > span:not(:last-of-type) {
  border-right: .125rem solid;
}

.agenda-list.agenda-items > span span.tickets {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: .9em;
}

.agenda-list.agenda-items > span .comment {
  font-size: 1rem;
  font-family: var(--font-bold);
  display: inline-block;
  padding: .5rem 0;
  line-height: 1;
}

@media (hover: hover) {
  section.tour .agenda-list.agenda-items:hover {
    background-color: var(--color-orange);
  }
}

@media (width < 48rem) {
  .agenda-list.agenda-items > span.price {
    display: none;
  }

  .agenda-list.agenda-items > span.hour-visible {
    border-right: none;
  }
}

@media (width > 60rem) {
  .agenda-list.agenda-items > span span.tickets {
    position: absolute;
    right: 0;
  }
}

@media (width > 70rem) {
  .agenda-list.agenda-items > span span.tickets {
    right: .5rem;
  }
}

.agenda-leeg {
  font-size: 1.5rem;
  padding: 2rem 0;
}

/* De nieuwsbrief: het val-veld voor bots buiten beeld, zoals op de oude site. */
.sender-veld-weg {
  position: absolute;
  left: -312.5rem;
}

.sender-fout {
  font-family: var(--font-bold);
  margin-top: 1rem;
}

.sender-form-successBody p {
  font-size: 1.5rem;
}

/* De melding na het aanmelden voor de Jonge Stokerij. */
#response-container.zichtbaar {
  opacity: 1;
}

/* Citaten en video's naast een nieuwsbericht. */
.news-videos iframe,
.production-videos iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.news-videos-item {
  margin-top: 2rem;
}

/* De galerij op een productiepagina: een foto is een link naar de grote. */
.production-slider-gallery .slide a {
  display: block;
  width: 100%;
}

/* Een concept in de lijsten, alleen zichtbaar voor wie mag bewerken. */
.badge--concept {
  font-family: var(--font-medium);
  font-size: .875rem;
  background-color: var(--color-pink);
  padding: 0 .375rem;
  border-radius: .25rem;
  vertical-align: middle;
}

/* Velden op de site (nieuwsbrief, aanmelden Jonge Stokerij): de formulierstijl
   van het KK-beheer haalt de rand en de tekstkleur weg; op de oude site
   hadden ze de rand van de browser. */
.newsletter-section input[type="email"],
.contact input:not([type="hidden"]),
.contact textarea,
.search-results input[type="search"] {
  border: .0625rem inset var(--color-black);
  color: #000;
  margin: 0;
}

/* De KK-reset geeft elke alinea regelafstand 1.8; op de oude site erfden ze
   die van de body (1.5). Alleen het element: elke regel van de oude site met
   een class ervoor gaat er nog steeds boven. */
p {
  line-height: inherit;
}

/* De fotostrook: Wagtail gaf elke foto een breedte mee, waardoor hij de hele
   strook vulde en `object-fit: cover` hem bijsneed. */
.production-slider-gallery .slide img {
  width: 100%;
}

/* De KK-reset houdt altijd ruimte vrij voor een scrollbalk; de oude site niet.
   Op een smal scherm scheelt dat net genoeg om "Bekijk speellijst" over twee
   regels te laten breken. */
html {
  scrollbar-gutter: auto;
}

/* Bewerken en verwijderen onder een speelbeurt, alleen voor wie mag bewerken. */
.speelbeurt-beheer {
  display: flex;
  gap: 1.25rem;
  margin: 0 0 .5rem;
  font-family: var(--font-medium);
  font-size: .95rem;
  color: #555;
}

.speelbeurt-beheer a,
.speelbeurt-beheer button {
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
}

/* De streep onder de kop van de site. De oude site zette hem op elk <header>
   (stokerij.css: `header::after`), en daar had ze er maar één van. De
   formulieren van het beheer hebben er tientallen, en kregen allemaal een
   zwarte balk, dwars door velden heen. */
header:not(#header)::after {
  content: none;
}

/* De lijnen tussen de onderdelen van de ANBI-pagina. Op de oude site waren dat
   <hr>'s in de tekst, maar de editor kent die niet en gooit ze bij de eerste
   keer opslaan weg. Dus tekent de pagina ze zelf, boven elke kop behalve de
   eerste, op dezelfde plek en in dezelfde stijl als de <hr> van de browser. */
.anbi-content hr {
  display: none;
}

.anbi-content h3:not(:first-of-type)::before {
  content: "";
  display: block;
  border-top: .0625rem inset #808080;
  border-bottom: .0625rem inset #808080;
  margin: -.5rem 0 1.5rem;
}

/* De beheerbalk boven `header .admin.actions` uit base/admin.css: dat is een
   doorzichtig vlak over de volle breedte met z-index 4, dat anders de klikken
   op de balk opvangt. */
.stokerij-beheerbalk {
  position: relative;
  z-index: 10;
}

/* Het naambordje van de formulieren (base/admin.css) staat vast rechtsboven, en
   lag daar over "Uitloggen" in de beheerbalk. Het zakt eronder, zoals het bij
   de sprongbalk ook doet. */
body:has(.stokerij-beheerbalk):not(:has(.form-sprongbalk)) .user-badge {
  top: 2.6rem;
}


/* ── components/admin.css ── */
/* De Stokerij Schiedam — admin overrides */
header .admin.actions {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  justify-content: end;
  padding: 0 !important;
  margin-top: 0;
}

.index.abouts header.admin.actions {
  position: absolute;
}

.admin .button span,
footer .actions span,
.button.new-agenda-item span {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

.admin .button,
.actions .button,
.button.new-agenda-item {
  background-color: transparent !important;
  font-size: clamp(0.875rem, 0.809rem + 0.351vw, 1.125rem) !important;
  color: #777 !important;
  transition: scale 0.3s;
}

.button.new-agenda-item {
  position: relative;
  bottom: -1rem;
  margin: 0 0 2rem 0 !important;
  padding-left: 0 !important;
}

button.active,
.selected-production span {
  background-color: var(--color-orange);
  padding: 0.25rem;
  border-radius: 0.125rem;
  text-transform: uppercase;
}

/*.admin .button {
    padding: 1rem 2rem 2rem 0 !important;
}*/

@media (hover: hover) {
  .admin .button:hover,
  .actions .button:hover,
  .button.new-agenda-item:hover {
    box-shadow: none;
    opacity: 1;
    scale: 1.025;
    transition: scale 0.15s;
  }
}

@media (width < 60rem) {
  header .admin.actions {
    top: 6rem;
    padding: 0 !important;
    margin: 0;
    left: 1rem;
  }
}

@media (width < 48rem) {
  header .admin.actions {
    display: none;
  }

  a.logout-link {
    display: none;
  }
}



/* Het beheer in de huisstijl van Kaap Kunst; als laatste, zie het bestand. */
/* ── ../base/admin-kaapkunst.css ── */
/* ===== Kaap Kunst-beheer =====
   Het beheer in de huisstijl van kaapkunst.nl: wit, Oswald voor koppen,
   gespatieerde Roboto Condensed voor labels, Inter voor wat je leest en
   typt, rood als enige accent. Wie op meer sites werkt, krijgt overal
   dezelfde werkplaats, los van hoe de site eruitziet.

   Een laag bovenop `admin-delfts-blauw.css`: dat thema regelt de bouw
   (panelen, rangen van knoppen, sprongbalk) via zijn variabelen, dit bestand
   alleen kleur en letter. Laden als laatste, ná de componenten van de tenant,
   zodat de letter van de site het beheer niet meer raakt. Alles staat binnen
   het werkblad (`.index.admin.wrap`) en de sprongbalk: de knoppen in de kop
   van de site blijven van de site. */

@font-face {
  font-family: "KK Oswald";
  src: url("../kaapkunst/fonts/oswald-latin-5f49329007f1e2c86462fd68a5f3affe.woff2?vsn=d") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: "KK Roboto Condensed";
  src: url("../kaapkunst/fonts/roboto-condensed-latin-9e5e97447fcc00eca79e97de3b337831.woff2?vsn=d") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "KK Inter";
  src: url("../fonts/ServaesNelissen/inter/Inter-Regular-3875f83574973c732136a45f628e64a6.woff2?vsn=d") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "KK Inter";
  src: url("../fonts/ServaesNelissen/inter/Inter-Medium-7b7f3cfa2944edbd2fcbb478547b22bd.woff2?vsn=d") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "KK Inter";
  src: url("../fonts/ServaesNelissen/inter/Inter-Bold-66894432e7ff485b0d4810f6aa95573f.woff2?vsn=d") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Het blauw van Delfts Blauw wordt zwart en grijs; het rood van kaapkunst.nl
   doet wat het daar doet: aanwijzen. */
:root {
  --admin-blue-dark: #111;
  --admin-blue: #333;
  --admin-blue-light: #f5f5f5;
  --admin-blue-border: #e2e2e2;
  --admin-white: #fff;
  --admin-text: #333;
  --admin-text-light: #777;
  --admin-danger: #dc2626;
  --admin-radius: 0;
  --kk-rood: #dc2626;
  --kk-kop: "KK Oswald", "Oswald", "Arial Narrow", sans-serif;
  --kk-label: "KK Roboto Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --kk-tekst: "KK Inter", "Inter", system-ui, sans-serif;
}

/* ── Het werkblad ─────────────────────────────────────────────────────────── */

.index.admin.wrap {
  font-family: var(--kk-tekst);
  font-size: 1rem;
  font-variant: normal;
  letter-spacing: 0.01em;
  word-spacing: normal;
  text-transform: none;
  line-height: 1.5;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 0;
  box-shadow: none;
}

.index.admin.wrap p {
  line-height: 1.5;
}

/* De paginakop zoals de kaarten op kaapkunst.nl: Oswald, kapitalen. */
.index.admin.wrap > header {
  border-bottom: 0.125rem solid #111;
}

.index.admin.wrap > header h2,
.index.admin.wrap h2,
.index.admin.wrap h3 {
  font-family: var(--kk-kop);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  word-spacing: normal;
  color: #111;
}

.index.admin.wrap > header h2 {
  font-size: 2rem;
  line-height: 1.1;
}

/* De regel eronder zoals "Sites op Kaap Kunst": klein, rood, wijd gespatieerd. */
.index.admin.wrap > header p {
  font-family: var(--kk-label);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--kk-rood);
  margin-top: 0.5rem;
}

.index.admin.wrap .form-hoofdstuk {
  font-size: 1.5rem;
}

.index.admin.wrap .form-hoofdstuk::after {
  background: var(--kk-rood);
  height: 0.0625rem;
}

/* Sectiekoppen en labels: de onderste treden, in de gespatieerde smalle letter. */
.index.admin.wrap section > header,
.index.admin.wrap .thumbnail > header,
.index.admin.wrap .document-upload-section > header,
.index.admin.wrap label {
  font-family: var(--kk-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: normal;
  color: #555;
}

.index.admin.wrap section > header,
.index.admin.wrap .thumbnail > header {
  font-size: 0.9rem;
  color: #111;
}

.index.admin.wrap label {
  font-size: 0.8rem;
}

/* Uitleg onder een kop is gewone tekst, geen label. */
.index.admin.wrap section > header p,
.index.admin.wrap .thumbnail > header p {
  font-family: var(--kk-tekst);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--admin-text-light);
}

/* Een keuze naast een vinkje leest als tekst, niet als label. */
.index.admin.wrap .label-radio,
.index.admin.wrap .label-radio span {
  font-family: var(--kk-tekst);
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--admin-text);
  font-size: 0.95rem;
}

/* ── Velden ───────────────────────────────────────────────────────────────── */

.index.admin.wrap input[type="text"],
.index.admin.wrap input[type="email"],
.index.admin.wrap input[type="number"],
.index.admin.wrap input[type="url"],
.index.admin.wrap input[type="tel"],
.index.admin.wrap input[type="password"],
.index.admin.wrap input[type="date"],
.index.admin.wrap input[type="time"],
.index.admin.wrap input[type="search"],
.index.admin.wrap textarea,
.index.admin.wrap select {
  font-family: var(--kk-tekst);
  font-size: 1rem;
  letter-spacing: 0.01em;
  word-spacing: normal;
  text-transform: none;
  color: #111;
  background: #fff;
  border: 0.0625rem solid #ccc;
  border-radius: 0;
  box-shadow: none;
}

/* `base/form.css` geeft elke placeholder de gespatieerde kleine letter van de
   site; in het beheer is het gewoon de letter van het veld, wat lichter. */
.index.admin.wrap ::placeholder {
  color: var(--admin-text-light);
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  padding: 0;
}

/* De zoekvelden in een formulier (makers, producties) hebben hun eigen,
   wijd gespatieerde letter uit het zoekveld van de site. */
.index.admin.wrap .search-field input {
  font-family: var(--kk-tekst);
  font-size: 1rem;
  letter-spacing: 0.01em;
  word-spacing: normal;
  text-transform: none;
}

.index.admin.wrap input:focus,
.index.admin.wrap textarea:focus,
.index.admin.wrap select:focus {
  border-color: #111;
  box-shadow: 0 0 0 0.0625rem #111;
}

.index.admin.wrap .ql-toolbar,
.index.admin.wrap .ql-container {
  border-color: #ccc;
}

.index.admin.wrap .ql-container,
.index.admin.wrap .ql-editor {
  font-family: var(--kk-tekst);
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* ── Knoppen ──────────────────────────────────────────────────────────────── */

/* De hoofdhandeling: een zwart blok met Oswald-kapitalen, rood onder de muis.
   De letterstijl van de site (Discordia: rode onderstreepte kleinkapitalen)
   wordt hier helemaal teruggezet. */
.index.admin.wrap footer.actions .button,
.index.admin.wrap button.button,
.index.admin.wrap a.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--kk-kop);
  font-weight: 500;
  font-size: 1rem;
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  word-spacing: normal;
  text-decoration: none;
  border-radius: 0;
}

.index.admin.wrap footer.actions .button:not(.secondary):not(.back),
.index.admin.wrap button.button:not(.secondary):not(.back) {
  background-color: #111;
  color: #fff;
  padding: 0.7rem 1.5rem;
}

.index.admin.wrap footer.actions .button:not(.secondary):not(.back):hover,
.index.admin.wrap button.button:not(.secondary):not(.back):hover {
  background-color: var(--kk-rood);
}

.index.admin.wrap .button [class*="icon-"] {
  background-color: currentColor;
}

/* Het pijltje van "Terug" is een teken, geen icoon: sommige sites kleuren elke
   span in een knop als icoonvlak (Alles voor de Kunsten), en dan stond er een
   blauw blokje met de pijl er onzichtbaar in. */
.index.admin.wrap .button .pijl {
  background: none;
  color: inherit;
}

/* Omlijnd: de gewone handelingen. */
.index.admin.wrap .button.secondary,
.index.admin.wrap a.button.back {
  background: #fff;
  color: #111;
  box-shadow: inset 0 0 0 0.0625rem #111;
  padding: 0.7rem 1.5rem;
}

.index.admin.wrap .button.secondary:hover,
.index.admin.wrap a.button.back:hover {
  color: var(--kk-rood);
  box-shadow: inset 0 0 0 0.0625rem var(--kk-rood);
  background: #fff;
}

/* De eigen knop van een bestandsveld (`bestand_kiezen/1`): een span, dus
   niet geraakt door de regels voor `button.button` en `a.button` hierboven. */
.index.admin.wrap .drop .bestand-kiezen-knop,
.index.admin.wrap .bestand-kiezen-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  font-family: var(--kk-kop);
  font-weight: 500;
  font-size: 1rem;
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: #111;
  background: #fff;
  box-shadow: inset 0 0 0 0.0625rem #111;
}

.index.admin.wrap .bestand-kiezen:hover .bestand-kiezen-knop {
  color: var(--kk-rood);
  box-shadow: inset 0 0 0 0.0625rem var(--kk-rood);
}

.index.admin.wrap .bestand-kiezen-naam {
  font-family: var(--kk-tekst);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Uitwegen en kleine links: zoals "discordia.nl →" onder een kaart. */
.index.admin.wrap .uitweg,
.index.admin.wrap .btn-small {
  font-family: var(--kk-label);
  font-weight: 400;
  font-size: 0.8rem;
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: normal;
  color: #777;
  text-decoration: none;
}

.index.admin.wrap .uitweg:hover,
.index.admin.wrap .btn-small:hover {
  color: var(--kk-rood);
  text-decoration: none;
}

.index.admin.wrap a[href]:not(.button) {
  color: #111;
  text-decoration: underline;
  text-decoration-color: var(--kk-rood);
  text-underline-offset: 0.2em;
}

/* De balk onderaan: wit, met een lijn erboven, zoals het werkblad zelf. */
.index.admin.wrap footer.actions {
  background: #fff;
  border: 0;
  border-top: 0.0625rem solid #111;
}

/* ── De vragen bij het aanmaken ───────────────────────────────────────────── */

/* Zelfde selector als in `base/form.css` en in het knoppenbestand van de
   tenant, hier als laatste: Vorige, Nu al aanmaken en Annuleren als uitwegen. */
.index.admin.wrap.wizard footer.wizard-actions .btn-small,
.index.admin.wrap.wizard footer.wizard-actions a.back {
  font-family: var(--kk-label);
  font-weight: 400;
  font-size: 0.85rem;
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #777;
  text-decoration: none;
  background: none;
  box-shadow: none;
  padding: 0;
}

.index.admin.wrap.wizard footer.wizard-actions .btn-small:hover,
.index.admin.wrap.wizard footer.wizard-actions a.back:hover {
  color: var(--kk-rood);
  background: none;
  box-shadow: none;
}

.index.admin.wrap.wizard .wizard-question h3 {
  font-size: 1.6rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

.index.admin.wrap.wizard .wizard-question header p,
.index.admin.wrap.wizard .hint,
.index.admin.wrap.wizard .wizard-footnote {
  font-family: var(--kk-tekst);
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--admin-text-light);
}

.index.admin.wrap.wizard .wizard-answers {
  font-family: var(--kk-tekst);
}

/* ── Nieuw… ────────────────────────────────────────────────────────────────

   De keuzepagina (`NieuwLive`): elke keuze zoals een kaart op kaapkunst.nl,
   de naam in Oswald-kapitalen, de uitleg eronder in het grijs. */
.index.admin.wrap .nieuw-keuzes {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 42rem;
}

.index.admin.wrap .nieuw-keuzes li {
  padding: 1.25rem 0;
  border-bottom: 0.0625rem solid var(--admin-blue-border);
}

.index.admin.wrap .nieuw-keuzes a[href] {
  font-family: var(--kk-kop);
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111;
  text-decoration: none;
}

.index.admin.wrap .nieuw-keuzes a[href]::after {
  content: " →";
  color: var(--kk-rood);
}

.index.admin.wrap .nieuw-keuzes a[href]:hover {
  color: var(--kk-rood);
}

.index.admin.wrap .nieuw-keuzes p {
  margin: 0.25rem 0 0;
  color: var(--admin-text-light);
}

.index.admin.wrap .nieuw-annuleren {
  margin: 2.5rem 0 0;
}

/* ── Te doen ───────────────────────────────────────────────────────────── */

.index.admin.wrap.te-doen section {
  margin: 0 0 2.5rem;
  max-width: 42rem;
}

.index.admin.wrap.te-doen h3 {
  font-size: 1.3rem;
  margin: 0 0 0.25rem;
}

.index.admin.wrap.te-doen section > p,
.index.admin.wrap.te-doen .te-doen-niets {
  margin: 0 0 0.75rem;
  color: var(--admin-text-light);
}

.index.admin.wrap .te-doen-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index.admin.wrap .te-doen-lijst li {
  padding: 0.6rem 0;
  border-bottom: 0.0625rem solid var(--admin-blue-border);
}

.index.admin.wrap .te-doen-lijst a[href]::after {
  content: " →";
  color: var(--kk-rood);
}

/* ── De sprongbalk ────────────────────────────────────────────────────────── */

.form-sprongbalk {
  background-color: #111;
  font-family: var(--kk-label);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85rem;
}