/* This file is for Rutger Kroon main application CSS */
/* ── ../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/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/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/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/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/variables.css ── */
:root {
    --color-green: #CAF5DE;
    --color-yellow: #fef2d3;
    --color-light-yellow: #fef2d360;
    --color-lilac: #976797;
    --color-metalic: #40A1AF;
    --color-dark: #294E3C;

    --color-red: #842600;
    --color-blue: #006d7b;
    --color-lightblue: #befbff;
    --color-pink: #dd71a3;
    --color-purple: #90538d;
    --color-redpurple: #9b3d64;
    --font-special: "LeHavre";
    --font-thin: "Helvetica Neue UltraLight";
    --font-italic: "Helvetica Neue Italic";
}


/* ── base/base.css ── */
/* RESET */
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 {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

body,
button,
input,
table,
textarea,
select {
    font-size: 1rem;
    line-height: 1.5;
}

/* BASE */

h1,
h2,
h3,
h4 {
    font-family: var(--font-special);
}

body {
    font-family: "Helvetica Neue Light";
}

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

p {
    margin: 0.5rem 0;
}

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

.outer {
    width: 100%;
    min-height: 100vh;
    background-color: #777;
}

.inner {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    background-image: url(images/20140805_151417-ec2fbfb995a2e18039a35f4dd1127d50.jpg?vsn=d);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.inner::after {
    content: "";
    background-color: rgba(0, 0, 0, 0.15);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.inner > * {
    max-width: 90rem;
    padding: clamp(0.5rem, 0.105rem + 2.105vw, 2rem);
    z-index: 2;
}

/* Variant zonder achtergrondfoto (bedankpagina). */
.inner.no-img,
.inner.no-img::after {
    background-color: #f4f4f4;
    background-image: none;
}

.bg-toneel-detail .inner {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.bg-toneel-detail .inner::after {
    background-color: rgba(0, 0, 0, 0.5);
}

main.main {
    flex-grow: 1;
    width: 100%;
}

header.header {
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

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

h1 {
    font-size: clamp(1.875rem, 1.429rem + 1.19vw, 2.5rem);
    letter-spacing: 0.5rem;
    color: var(--color-yellow);
    line-height: 1.1;
}

h2 {
    color: var(--color-yellow);
    line-height: 1;
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    margin-bottom: clamp(1rem, 0.868rem + 0.702vw, 1.5rem);
    font-size: clamp(1.25rem, 1.184rem + 0.351vw, 1.5rem);
    letter-spacing: clamp(1rem, 0.737rem + 1.404vw, 2rem);
    opacity: 0.85;
}

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

a.active {
    color: var(--color-yellow);
}

.no-scroll {
    overflow: hidden;
}

p {
    line-height: 1.7;
    font-size: clamp(1rem, 0.912rem + 0.376vw, 1.25rem);
}

/* RESETS KKUNSTVLIJT */

.bg-home .hero-section {
    display: none;
}


/* ── base/fonts.css ── */
@font-face {
    font-family: "LeHavre";
    src: url(fonts/lehavre/LeHavreLayers-Primary-82b78a9d3e736530dffa3b03c91082aa.woff2?vsn=d) format('woff2');
}

@font-face {
    font-family: "Helvetica Neue Light";
    src: url(fonts/helveticaneue/Light-e81b897b5dac971d649a1f4d913e1e6a.woff2?vsn=d) format('woff2');
}

@font-face {
    font-family: "Helvetica Neue UltraLight";
    src: url(fonts/helveticaneue/HelveticaNeueUltraLightv130-c06c1ab8d8a48b817f105bd37ac3f685.woff2?vsn=d) format('woff2');
}

@font-face {
    font-family: "Hevetica Neue Italic";
    src: url(fonts/helveticaneue/HelveticaNeueIt-d2b9e7a1729484e679ca591422779139.woff2?vsn=d) format('woff2');
}

/* ── base/index.css ── */
/* De oude site zette de zijkanten van de websites-index hier neer:

       .websites-index { padding: 4rem 2rem; }

   Die klasse bestaat op KK niet — het platform rendert de wrapper als
   `.index.productions` — dus deed de regel niets. Hij staat nu op
   `.bg-websites .index.productions` in components/websites.css. */


/* ── base/icons.css ── */
[class*="icon-"] {
    display: inline-block;
    background-position: center;
    background-size: cover;
    width: clamp(2.5rem, calc(2.375rem + 0.3906vw), 3rem);
    height: clamp(2.5rem, calc(2.375rem + 0.3906vw), 3rem);
    mask-size: cover;
}

/* De beheericoontjes. Deze tenant heeft er geen eigen tekening voor; het
   platform zet ze in assets/base/icons.css op dezelfde bestanden, maar dat
   bestand importeert rutgerkroon niet — `@import "base/icons.css"` in app.css
   wijst naar dít bestand. Zonder mask-image bleef er alleen het lege vlak van
   de regel hierboven over: dat zijn de witte blokjes in de beheerknoppen.

   Het gedeelde bestand alsnog meeladen kan niet zonder schade: daar hebben
   `.icon-next`/`.icon-prev` een absolute plaatsing die deze tenant niet heeft.
   Daarom alleen de iconen die op de beheerschermen langskomen. Formaat en
   kleur staan in components/admin-actions.css en components/admin-form.css. */
.icon-add {
    mask-image: url(/images/uikit-icons/plus-circle-acba33e1739f4298501db3a8d3cf6c83.svg?vsn=d);
}

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

.icon-edit {
    mask-image: url(/images/uikit-icons/pencil-a0bc4622f024e5d0b964c0d88bc3a04e.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-trash {
    mask-image: url(/images/uikit-icons/trash-42b373e524cc75a4a5eaccf616d1974a.svg?vsn=d);
}

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

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

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

.icon-linkedin {
    mask-image: url(/assets/rutgerkroon/images/icon-linkedin-dee1e5737af5380d2c3d7e4ca9177654.svg?vsn=d);
    background-color: rgba(255, 255, 255, 0.5);
}

.icon-github {
    mask-image: url(/assets/rutgerkroon/images/icon-github-b2a5893a68bc7c52979365fee91a809d.svg?vsn=d);
    background-color: rgba(255, 255, 255, 0.5);
}

.icon-close {
    mask-image: url(/assets/rutgerkroon/images/icon-close-cbd0ccee8356ef080096658ba056c407.svg?vsn=d);
    background-color: #f7f7f7;
    z-index: 10;
    top: 6rem;
    right: 2rem;
    position: absolute;
}

.icon-home {
    mask-image: url(/assets/rutgerkroon/images/icon-home-f0f6265d09877b832af01d1282b08399.svg?vsn=d);
    background-color: var(--color-metalic);
}

.icon-next {
    mask-image: url(/assets/rutgerkroon/images/icon-next-d5ebb7b1c570bf649b9c09682e3768cd.svg?vsn=d);
}

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

.icon-logo {
    background-image: url(/assets/rutgerkroon/images/tss.svg);
    width: 6rem;
    height: 8rem;
    margin-left: auto;
    margin-right: 2rem;
    margin-top: 0.5rem;
}

.icon-menu {
    mask-image: url(/assets/rutgerkroon/images/icon-menu-66e73b107b1680134d62fa3e1cd6f78c.svg?vsn=d);
    background-color: #f7f7f7;
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.icon-search {
    mask-image: url(/assets/rutgerkroon/images/icon-search-12450b69ebb01960f770962c89fba581.svg?vsn=d);
    background-color: var(--color-metalic);
}

.icon-arrow-right {
    mask-image: url(/assets/rutgerkroon/images/icon-arrow-right-9f330066f5f00ce1140f2bab6d8cf13f.svg?vsn=d);
    background-color: rgba(#f7f7f7, 0.85);
}

@media (width > 48rem) {
    .icon-close {
        top: 1rem;
    }
}

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



/* ── components/header.css ── */
header.header {
    color: #f7f7f7;
    height: 8rem;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    position: relative;
    z-index: 3;
}

header.header .header-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

header.header .header-inner .icon-close {
    top: 2rem;
}

/* Het platform rendert `nav.navi` met een `ul` erin, en zet de klasse
   `visible` erop vanuit de hamburgerknop `#icon-menu`. */
header.header nav.navi {
    display: none;
    color: #f7f7f7;
    font-family: var(--font-special);
    font-size: 1.5rem;
}

header.header nav.navi ul {
    display: flex;
    align-items: center;
    gap: 1rem;
}

header.header nav.navi.visible {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--color-metalic);
    top: 0;
    left: 0;
    z-index: 4;
}

header.header nav.navi.visible ul {
    flex-direction: column;
}

/* De actieve link is geel, niet onderstreept: dat staat als `a.active` in
   base.css en geldt voor de hele tenant. `header.header nav.navi` zet alleen de
   rustkleur (#f7f7f7), die de links via `currentColor` overnemen. */

ul.admin-menu {
    display: none;
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-special);
    z-index: 1000;
}

ul.admin-menu li:not(:last-of-type) {
    margin-right: 1rem;
}

@media (width > 48rem) {
    header.header nav.navi {
        display: flex;
    }

    /* Boven de breekpunt is het menu altijd open; de hamburger is overbodig. */
    header.header .icon-menu {
        display: none;
    }

    ul.admin-menu {
        display: flex;
    }
}

@media (width <= 48rem) {
    header.header nav.navi.visible ul {
        gap: 1.5rem;
    }
}

/* ── components/cards.css ── */
/* `.index.productions` is de wrapper die het platform om een productie-index
   zet; `.performances-index` was de naam in de losse app. */
.index.productions,
.index.contact-forms,
.performances-index,
.admin-index,
.performance-show,
.about-page,
.thank-you-container {
    background-color: rgba(0, 0, 0, 0.7);
    padding: clamp(1rem, 0.211rem + 4.211vw, 4rem);
    border-radius: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12rem;
}

.bg-toneel .inner {
    background-image: url(/assets/rutgerkroon/images/paradise-2-89213f7ba234f8911b9e566d602ab182.jpg?vsn=d);
}

.performances-index header,
.websites-index header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.125rem solid rgba(255, 255, 255, 0.35);
    padding-bottom: 2rem;
}

.cards li {
    aspect-ratio: 0.6;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
    border-radius: 0.25rem;
}

.cards li .image,
.websites li .image {
    height: 50%;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border: 0.5rem solid transparent;
    border-radius: 0.25rem 0.25rem 0 0;
}

.websites li .image {
    background-color: transparent;
}

.cards li .image a {
    display: contents;
}

.cards li img,
.websites li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0.25rem solid var(--color-yellow);
    border-radius: 0.25rem;
}

.cards li:nth-of-type(4n + 2) img {
    border-color: var(--color-green);
}

.cards li:nth-of-type(4n + 3) img {
    border-color: var(--color-lightblue);
}

.cards li:nth-of-type(4n + 4) img {
    border-color: var(--color-metalic);
}

.cards li .text,
.websites li .text {
    height: 50%;
    padding: clamp(0.5rem, 0.105rem + 2.105vw, 2rem);
    background-color: rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    border-radius: 0 0 0.25rem 0.25rem;
    position: relative;
    z-index: 1;
    overflow-y: hidden;
}

.websites li .text {
    background-color: rgba(0, 0, 0, 0);
}

.cards li .text::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.85) 80%);
}

/* Het platform zet de samenvatting in `div.body` in plaats van in een `p`. */
.cards li .text p,
.cards li .text .body,
.bg-websites .cards li .text .body,
.websites li .text p {
    font-size: 1.25rem;
    opacity: 0.7;
    line-height: 1.25;
}

.websites li .text p {
    font-style: italic;
}

.cards li .text h3,
.websites li .text h3 {
    font-size: clamp(1.5rem, 1.368rem + 0.702vw, 2rem);
    line-height: 0.86;
    color: var(--color-yellow);
}

.cards li .text h3 span {
    font-size: 0.6em;
    letter-spacing: 0.125rem;
    color: inherit;
}

.bg-websites .cards li .text a.external-link,
.websites li .text a.external-link {
    display: block;
    font-size: 1.5rem;
    margin: 0.5rem 0 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5rem;
    padding-left: 0.25rem;
    font-family: var(--font-thin);
    /* font-weight: 700; */
}

.bg-websites .cards li .text a.button,
.websites li .text a.button {
    margin: 1rem 0;
    max-width: 24rem;
    bottom: 1rem;
    color: var(--color-yellow);
}

.cards li:nth-of-type(4n + 2) .text h3,
.bg-websites .cards li:nth-of-type(4n + 2) .text a.button,
.websites li:nth-of-type(4n + 2) .text h3,
.websites li:nth-of-type(4n + 2) .text a.button {
    color: var(--color-green);
}

.cards li:nth-of-type(4n + 3) .text h3,
.bg-websites .cards li:nth-of-type(4n + 3) .text a.button,
.websites li:nth-of-type(4n + 3) .text h3,
.websites li:nth-of-type(4n + 3) .text a.button {
    color: var(--color-lightblue);
}

.cards li:nth-of-type(4n + 4) .text h3,
.bg-websites .cards li:nth-of-type(4n + 4) .text a.button,
.websites li:nth-of-type(4n + 4) .text h3,
.websites li:nth-of-type(4n + 4) .text a.button {
    color: #f7f7f7;
}

.cards li .date {
    font-family: var(--font-special);
    opacity: 0.3;
    font-size: 1.675rem;
    position: absolute;
    right: 1.5rem;
    bottom: 1rem;
    z-index: 2;
    /* transform: rotate(-1deg); */
}

.bg-websites .cards li .text span.date,
.websites li .text span.date {
    font-size: clamp(1.5rem, 1.237rem + 1.404vw, 2.5rem);
    letter-spacing: 0.5rem;
    color: var(--color-green);
    opacity: 0.7;
    font-family: var(--font-special);
}

.cards li:nth-of-type(5n + 2) .date {
    /* transform: rotate(-1deg); */
}

.cards li:nth-of-type(5n + 3) .date {
    /* transform: rotate(-2deg); */
}

.cards li:nth-of-type(5n + 4) .date {
    /* transform: rotate(2deg); */
}

.cards li:nth-of-type(5n + 5) .date {
    /* transform: rotate(-1deg); */
}

.cards li .button {
    background-color: #000;
    left: 2rem;
    bottom: 2rem;
    color: var(--color-yellow);
    position: absolute;
}

.cards li:nth-child(4n + 1) .button {
    color: var(--color-yellow);
}

.cards li:nth-child(4n + 2) .button {
    color: var(--color-green);
}

.cards li:nth-child(4n + 3) .button {
    color: var(--color-lightblue);
}

.cards li:nth-child(4n + 4) .button {
    color: var(--color-metalic);
}

@media (width >= 48rem) {

    .websites li .text a.button,
    .cards li .text a.button {
        position: absolute;
    }

    .cards li {
        aspect-ratio: 0.925;
    }

    .cards li .image,
    .websites li .image {
        height: 60%;
    }

    .cards li .text,
    .websites li .text {
        height: 40%;
    }
}

@media (width >= 60rem) {
    .cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1rem, 0.571rem + 2.143vw, 2.5rem);
        justify-content: space-between;
    }

    .cards li {
        aspect-ratio: .75;
    }
}

@media (width < 48rem) {
    .cards li {
        margin: 2rem 0;
    }

    .cards li .button {
        left: 1rem;
        bottom: 3.5rem;
    }
}


/* ── components/show.css ── */
.performance-show {
    border: .5rem solid var(--color-green);
    min-height: 67vh;
    margin-top: clamp(1rem, 0.714rem + 1.429vw, 2rem);
}

.performance-show .image {
    min-height: clamp(31rem, 30.143rem + 4.286vw, 34rem);
}

.performance-show .image img {
    border-radius: 1rem;
    justify-self: center;
}

.performance-show .image h2 {
    font-size: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
    letter-spacing: normal;
}

.performance-show .image h2 span {
    font-size: .5em;
    font-style: italic;
    letter-spacing: .5rem;
    line-height: 1.25;
    display: inline-block;
}

.performance-show .image .title {
    position: relative;
}

.performance-show .image .title .date {
    font-size: clamp(1.375rem, 1.054rem + 1.607vw, 2.5rem);
    font-family: var(--font-thin);
    letter-spacing: .5rem;
    opacity: .7;
}

.performance-show .text {
    background-color: rgba(0,0,0,.5);
    padding: clamp(0.5rem, -0.5rem + 5vw, 4rem) clamp(0.5rem, -2.786rem + 16.429vw, 12rem) clamp(0.5rem, -0.5rem + 5vw, 4rem) clamp(0.5rem, -1.071rem + 7.857vw, 6rem);
    margin-top: clamp(0rem, -0.857rem + 4.286vw, 3rem);
    font-size: clamp(1rem, 0.964rem + 0.179vw, 1.125rem);
    letter-spacing: .0625rem;
    line-height: 2;
    border-radius: .5rem;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.performance-show .text .credits {
    margin: 2rem 0;
    font-size: 1rem;
}

ul.cats {
    display: flex;
    font-family: var(--font-special);
    margin-top: clamp(1rem, 0.143rem + 4.286vw, 4rem);
}

ul.cats li:not(:first-of-type) {
    margin-left: 2rem;
}

ul.cats li:first-of-type {
    margin-left: .5rem;
}

ul.cats li {
    background-color: var(--color-lilac);
    padding: .25rem 1rem;
    border-radius: .25rem;
    border: .0625rem solid rgba(255,255,255,.2);
}

@media (width > 48rem) {
    .performance-show .image {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 2.5rem;
        /* min-height: 34rem; */
    }

    ul.cats {
        position: absolute;
        left: 0;
        bottom: 2rem;
    }
}


/* ── components/form.css ── */
.form-container {
    position: relative;
    background-color: var(--color-pink);
    max-width: 60rem;
    padding: clamp(1rem, 0.1429rem + 4.2857vw, 4rem);
    z-index: 10001;
    box-shadow: 0 0 2rem rgba(0,0,0, .25);
    width: 98%;
}

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

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

.form-container p {
    color: #fff;
    font-size: 1.125rem;
    letter-spacing: .125rem;
}

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

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

input {
    padding: .75rem .25rem;
    width: 20rem;
    border-radius: .25rem;
}

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

label {
    /* color: var(--color-blue); */
    padding-bottom: .25rem;
}

input,
textarea {
    margin-bottom: 1rem;
    background-color: #777;
    color: #f7f7f7;
    padding-left: .5rem;
}

textarea {
    width: clamp(20rem, 16.479rem + 15.023vw, 30rem);
    height: 12.5rem;
    border-radius: .5rem;
}

#formResponse {
    opacity: 0;
}

#formContainer {
    display: flex;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    height: 0;
    transition: all .3s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: rgba(0,0,0, .5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#formContainer.visible {
    opacity: 1;
    visibility: visible;
    z-index: 1001;
    transition: opacity .5s;
    height: 100vh;
}

#formContainer .icon-close {
    position: absolute;
    top: clamp(1rem, 0.6364rem + 1.1364vw, 2rem);
    right: clamp(1rem, 0.6364rem + 1.1364vw, 2rem);
}

#formResponse {
    position: absolute;
    width: clamp(18rem, 17.4286rem + 2.8571vw, 20rem);
    height: 7rem;
    background-color: var(--color-blue);
    color: #fff;
    left: 50%;
    top: 50%;
    border-radius: .25rem;
    border: .25rem solid;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    letter-spacing: .125rem;
    padding: 0 1rem .125rem;
    box-shadow: 0 0 1rem rgba(0,0,0,.25);
}

.form-container .spinner {
    bottom: 4rem;
    right: 2rem;
}

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

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

form .thumbnail {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 3fr 2fr;
    margin: 1rem 0;
    /* border-top: .0625rem solid rgba(255, 255, 255, .2); */
}

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

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

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

form .thumbnail .drop span {
    background-color: #777;
    padding: .75rem 1rem;
    width: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .125rem;
}

form .thumbnail img {
    object-fit: contain;
    width: 100%;
    max-height: 9rem;
}


form .thumbnail .entry {
    height: 20rem;
}

.popup {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #FFF265;
    color: #333;
    border: .5rem solid;
    transform: translate(-50%, -50%);
    transition: all .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: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

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

  span.error {
    font-size: .875rem;
    font-family: var(--font-thin);
    font-style: italic;
    letter-spacing: .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;
  }

/* ── components/websites.css ── */
.bg-websites .inner {
    background-image: url(/assets/rutgerkroon/images/work-405ea3b0ecbfbb0323efdf8c07471059.jpg?vsn=d);
    /* background-color: #40a1af; */
    color: rgba(255, 255, 255, 0.7);
    position: relative;
}

.bg-websites .inner .websites-index {
    margin-bottom: 8rem;
}

.bg-websites .inner::after {
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(
        89.85deg,
        transparent 9%,
        var(--color-blue) 11%,
        var(--color-blue) 94%,
        transparent 96%
    );
}

/* Het platform rendert ook hier `ul.cards` in een tweekoloms raster met
   staande kaarten. Op /websites willen we de oude opzet terug: één brede rij
   per site, beeld links en tekst rechts. Alle `.cards`-regels die daar dwars
   voor liggen (aspect-ratio, donker tekstvlak, fade-out) worden hier
   teruggedraaid. */
.bg-websites ul.cards {
    display: block;
}

.bg-websites ul.cards li,
ul.websites li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 30rem;
    margin-bottom: 2rem;
    border-radius: 0.125rem;
}

.bg-websites ul.cards li {
    aspect-ratio: auto;
    box-shadow: none;
}

.bg-websites ul.cards li .image,
.bg-websites ul.cards li .text,
ul.websites li .image,
ul.websites li .text {
    height: 100%;
}

.bg-websites ul.cards li .image,
.bg-websites ul.cards li .text {
    background-color: transparent;
    overflow-y: visible;
}

.bg-websites ul.cards li .text::after {
    content: none;
}

.bg-websites ul.cards li .text .body {
    font-style: italic;
}

ul.websites li .text {
    min-height: 25vh;
}

.bg-websites ul.cards li .image a,
ul.websites li .image a {
    height: 100%;
}

.bg-websites ul.cards li img,
ul.websites li img {
    object-fit: cover;
    object-position: top;
    padding: 0.25rem;
    aspect-ratio: 16/9;
}

@media (width < 80rem) {
    .bg-websites ul.cards li,
    ul.websites li {
        display: flex;
        flex-direction: column;
        height: auto;
    }
}


@media (width >= 60rem) {
    .bg-websites .inner::after {

        background-image: linear-gradient(
            89.5deg,
            transparent 19%,
            var(--color-blue) 20%,
            var(--color-blue) 87%,
            transparent 89%
        );
    }
}

@media (width < 48rem) {
    ul.websites li {
        align-items: center;
    }

    ul.websites li .image {
        width: 130%;
    }

    ul.websites li .image img {
        aspect-ratio: 3/2;
    }
}
/* /websites heeft geen genres en dus geen filter; het platform zou hier
   anders terugvallen op de status-knoppen (Speelt/Verwacht/Archief). */
.bg-websites #filter-form {
    display: none;
}

/* Op /websites staan de kaarten los op de blauwe baan, zonder het donkere
   paneel dat /toneel wel heeft.

   De oude site gaf deze pagina bovendien smallere zijkanten dan de andere
   indexen: `.websites-index { padding: 4rem 2rem }`. Die klasse staat hier niet
   op de wrapper — het platform rendert `.index.productions` — dus viel de
   pagina terug op de rondom-clamp van cards.css (bijna 4rem in plaats van 2rem
   links en rechts). Dat scheelt zo'n 4rem kaartbreedte, en onder 80rem volgt de
   fotohoogte uit `aspect-ratio: 16/9`: smallere kaart, lagere foto. */
.bg-websites .index.productions {
    background-color: transparent;
    padding: 4rem 2rem;
}

/* De oude site zette deze kaarten in `ul.websites`, buiten bereik van
   `.cards li .button` (zwart vlak, `left: 2rem`, `bottom: 2rem`). Hier delen we
   die klasse wel, dus draaien we die drie eigenschappen terug: de knop is een
   omlijnd kader zonder vulling, links uitgelijnd op de tekstkolom (`left: auto`
   laat hem op zijn statische plek staan) en 1rem boven de onderrand. */
.bg-websites .cards li .text a.button {
    background-color: transparent;
    left: auto;
    bottom: 1rem;
    margin: 1rem 0;
}

/* Onder 48rem kende de oude site geen absolute knop: daar liep hij gewoon mee
   in de kolom. `.cards li .button` zet hem onvoorwaardelijk absoluut, dus
   zetten we dat hier terug. */
@media (width < 48rem) {
    .bg-websites .cards li .text a.button {
        position: static;
    }
}

/* `.cards li .date` plakt de datum absoluut rechtsonder in de kaart (dat is de
   toneel-variant); op /websites hoort hij gewoon in de kolom, tussen de
   klantnaam en de tekst. */
.bg-websites .cards li .text span.date {
    position: static;
    display: block;
    opacity: 0.7;
    margin: 1.5rem 0;
}


/* ── components/filter-btns.css ── */
/* Het platform rendert de filters als `<button>` binnen `.filter-btns`,
   waar de oude site radio-labels gebruikte. De vormgeving blijft hetzelfde:
   tekstlinks gescheiden door een pipe, geen knopvlakken. */
.filter-btns {
    display: flex;
    padding: 1rem 0;
    flex-wrap: wrap;
    align-items: center;
}

.filter-btns button,
.filter-btns a {
    color: rgba(255, 255, 255, 0.7);
    height: clamp(2rem, 1.868rem + 0.702vw, 2.5rem);
    display: flex;
    align-items: center;
    font-family: var(--font-special);
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: clamp(1.125rem, 1.092rem + 0.175vw, 1.25rem);
}

.filter-btns button:not(:last-of-type)::after {
    content: "|";
    display: block;
    margin-left: clamp(0.5rem, 0.368rem + 0.702vw, 1rem);
}

.filter-btns button:not(:first-of-type),
.filter-btns a {
    margin-left: clamp(0.5rem, 0.368rem + 0.702vw, 1rem);
}

.filter-btns button.active {
    color: #f7f7f7;
}

/* De oude site had geen zoekveld op /toneel en /websites. */
#filter-form .search-field {
    display: none;
}


/* ── components/button.css ── */
.button {
    border: .25rem solid;
    outline: none;
    padding: .5rem clamp(1rem, 0.737rem + 1.404vw, 2rem);
    z-index: 2;
    font-family: var(--font-special);
    border-radius: .25rem;
    letter-spacing: .25rem;
    background-color: transparent;
    font-size: clamp(1rem, 0.934rem + 0.351vw, 1.25rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

.button.danger {
    background-color: rgba(132, 38, 0, .7);;
}

/* ── components/admin-actions.css ── */
/* De beheerknoppen: die boven een overzicht of detailpagina ("Nieuwe website",
   "Pagina-indeling", "Pagina-instellingen") en de Edit-knop op de kaart zelf.

   Het platform hangt de bovenste absoluut boven aan de pagina (base/admin.css:
   `header .admin.actions`), met z-index 4 tegenover z-index 3 van de header:
   ze liggen dan dwars over de nav heen. Hier horen ze gewoon in de flow, onder
   de nav, en als tekstknopjes in plaats van de omkaderde `.button` — die is
   voor "Bekijk website" en soortgelijke publieksknoppen. */

header .admin.actions {
    position: static;
    width: auto;
    justify-content: flex-end;
    gap: 2rem;
    padding: 0 0 1rem;
}

/* De Edit-knop staat als `div.actions` náást `.text` in de `li`, niet erin.
   Zonder absolute plaatsing wordt hij een derde item in de tweekoloms grid en
   klapt de kaarthoogte van 30rem open; en omdat `.cards li .button` hem wél
   absoluut zet, zocht hij tot nu toe de dichtstbijzijnde gepositioneerde
   voorouder op — dat is `.inner`, dus belandden alle Edit-knoppen op één hoop
   linksonder in de pagina. We positioneren daarom het `.actions`-blok tegen de
   kaart: rechtsonder in de kaart is rechtsonder in de tekstkolom. */
.cards li {
    position: relative;
}

.cards li .actions {
    position: absolute;
    right: 2.5rem;
    bottom: 1rem;
    z-index: 3;
}

.cards li .actions .button {
    position: static;
}

header .admin.actions .button,
.cards li .actions .button {
    border: none;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-variant: all-small-caps;
    letter-spacing: 0.125rem;
    transition: color 0.2s ease;
}

/* De ruimte tussen de knoppen komt van `gap`; het platform zet daarnaast een
   marge op alles behalve de laatste knop. */
header .admin.actions .button:not(:last-of-type) {
    margin-right: 0;
}

header .admin.actions .button:hover,
header .admin.actions .button:focus-visible,
.cards li .actions .button:hover,
.cards li .actions .button:focus-visible {
    color: var(--color-yellow);
}

/* `[class*="icon-"]` reserveert standaard een vlak van ~3rem; dat blies deze
   knoppen op. Bij een tekstknop hoort het icoontje de hoogte van de letter te
   volgen en dezelfde kleur te hebben — het is een mask, dus de vulling komt van
   `background-color`. */
header .admin.actions .button [class*="icon-"],
.cards li .actions .button [class*="icon-"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.375rem;
    background-color: currentColor;
}


/* ── components/admin-form.css ── */
/* De beheerformulieren (`div.index.admin.wrap`, o.a. /settings/page/...).

   Het gedeelde Delfts-blauwe thema doet het werk; wat hier misging is de
   tenant-typografie die erdoorheen lekt. `h2` uit base.css geeft elke kop
   1–2rem letterspacing plus `hyphens: auto`, wat "PAGINA-INSTELLIN-GEN"
   opleverde, en `.button` uit button.css zet LeHavre met 0.25rem spatiëring op
   de formulierknoppen. Verder stond het paneel op 60rem en zaten de blokken
   krap op elkaar. */

.index.admin.wrap {
    max-width: 80rem;
    margin: 4rem auto 10rem;
    padding: 3.5rem 4rem 4rem;
}

.index.admin.wrap > header {
    padding-bottom: 1.75rem;
    margin-bottom: 3rem;
}

.index.admin.wrap > header h2 {
    display: block;
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: normal;
    word-break: normal;
    hyphens: none;
    opacity: 1;
}

/* Hulpteksten. Zonder eigen regel vallen ze terug op `p` uit base.css
   (`clamp(1rem … 1.25rem)`, bedoeld voor de leesteksten op de site) en dan
   staan ze even groot als het invulwerk zelf. Hier horen ze eronder te blijven:
   klein, rustig van kleur, en met genoeg regelafstand om leesbaar te zijn. */
.index.admin.wrap > header p,
.index.admin.wrap p,
.index.admin.wrap .help-text,
.index.admin.wrap .hint,
.index.admin.wrap .field-note,
.index.admin.wrap .section-info,
.index.admin.wrap .description,
.index.admin.wrap .file-info,
.index.admin.wrap .upload-info,
.index.admin.wrap small {
    font-size: 0.8125rem;
    line-height: 1.6;
    letter-spacing: normal;
    color: var(--admin-text-light);
}

.index.admin.wrap > header p {
    font-size: 0.875rem;
    margin: 0;
}

/* Wat je in een editor typt is geen hulptekst maar de inhoud zelf, en die
   blijft op leesformaat. De `p` in de regel hierboven pakt namelijk ook de
   alinea's ín de editor — dat is de valkuil van op elementnaam stylen in plaats
   van op wat iets betekent. Een blanco `<p>` is in deze beheerschermen alleen
   niet zeldzaam genoeg om weg te laten (page_settings, production_layout,
   page_live/form en production_live/form gebruiken hem allemaal voor
   hulptekst), dus staat de uitzondering hier.

   DIT IS DE PLEK OM UIT TE BREIDEN als er een editor bijkomt: elke editor heeft
   zijn eigen inhoudsvak. Vergeet je die, dan typt de beheerder opeens op
   hulptekstformaat. */
.index.admin.wrap .ql-editor {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--admin-text);
}

.index.admin.wrap .ql-editor :is(p, li, blockquote) {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* Lucht tussen de blokken onderling en binnen een blok. */
.index.admin.wrap .form-body,
.index.admin.wrap .thumbnail,
.index.admin.wrap section.checkbox-fields,
.index.admin.wrap section.status-section {
    margin-bottom: 3rem;
}

/* `form .thumbnail` in components/form.css zet hier een raster van vier
   kolommen (2fr 1fr 3fr 2fr) neer, terwijl deze schermen maar twee cellen
   hebben: label en veld werden samengeknepen in de linkerhelft en rechts bleef
   een lege baan over. Dat raster hoort bij de oude, bredere formulierrij. */
.index.admin.wrap .thumbnail {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 4fr;
    gap: 2rem;
    align-items: start;
    padding: 2rem;
}

.index.admin.wrap .thumbnail > * {
    justify-content: flex-start;
}

.index.admin.wrap .form-header,
.index.admin.wrap .thumbnail > header,
.index.admin.wrap section > header {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.index.admin.wrap .thumbnail .input {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
}

.index.admin.wrap .drop {
    align-self: stretch;
    padding: 2.5rem;
}

/* De grijze vlakken in het sleepveld komen uit de publieke formulierstijl:
   `input, textarea { background-color: #777 }` en `form .thumbnail .drop span`
   met een eigen balk van 20rem. Op het lichte paneel horen ze doorzichtig. */
.index.admin.wrap .drop span {
    display: block;
    width: auto;
    padding: 0;
    background-color: transparent;
    color: var(--admin-text-light);
    font-size: 0.875rem;
}

.index.admin.wrap .drop input[type="file"] {
    margin: 0;
    background-color: transparent;
    color: var(--admin-text);
}

/* De koptekst boven een reeds gekozen foto stond in de publieke tekstkleur
   (bijna wit) op het lichte paneel. */
.index.admin.wrap .current-image > header,
.index.admin.wrap .selected-image h4 {
    color: var(--admin-blue-dark);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

/* Knoppen krijgen lucht van het veld erboven; ze plakten tegen de rand van een
   invoerveld, een sleepvak of een voorbeeldfoto aan. */
.index.admin.wrap footer.actions {
    gap: 1.5rem;
    margin-top: 4rem;
}

.index.admin.wrap .current-image .button,
.index.admin.wrap .selected-image .button,
.index.admin.wrap .selected-image .btn-small,
.index.admin.wrap .drop + .button,
.index.admin.wrap input + .button,
.index.admin.wrap textarea + .button {
    margin-top: 1.5rem;
}

/* Knoppen lezen als gewone tekst; de gespatieerde LeHavre is voor het publieke
   deel van de site. */
.index.admin.wrap .button {
    font-family: inherit;
    letter-spacing: normal;
    gap: 0.5rem;
}

/* De icoontjes in die knoppen: op letterhoogte en in de tekstkleur. `.icon-*`
   krijgt in base/icons.css een vlak van ~3rem en `.icon-close` staat daar zelfs
   absoluut rechtsboven (dat is voor de sluitknop van het mobiele menu) — in de
   Annuleren-knop plakte het kruisje daardoor in de hoek van het scherm. De
   sluitknop van de fotobibliotheek staat los van `.button` en blijft dus wel
   absoluut. */
.index.admin.wrap .button [class*="icon-"] {
    position: static;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
}


/* ── components/table.css ── */
.grid-list {
    display: grid;
    gap: 1rem;
    padding: 1rem 0 6rem;
}

.grid-list li {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-bottom: .125rem solid rgba(255,255,255,.35);
    align-items: center;
}

.grid-list li * {
    overflow: hidden;
}

.grid-list li .button {
    max-width: 8rem;
    font-size: 1rem;
    border-width: .1875rem;
    padding: .125rem .5rem;
}

.grid-list li span.title {
    font-family: var(--font-special);
    font-size: 1.25rem;
    display: inline-block;
    line-height: 1;
}

.grid-list li span img {
   width: 10rem;
   max-height: 6rem;
   object-fit: contain;
}

/* ── components/flash.css ── */
.flash-message {
    position: relative;
    z-index: 1000;
    background-color: rgba(0,0,0, .7);
    width: 100%;
    max-width: 50rem;
    color: rgba(255,255,255,1);
    padding: 2rem;
    border-radius: .5rem;
    font-size: 1.125rem;
    letter-spacing: .25rem;
    font-family: var(--font-thin);
}

.flash-message .icon-close {
   background-color: rgba(255,255,255,.7);
   width: 1.75rem;
   height: 1.75rem;
}
/* Het bedankje van het contactformulier. De flash-melding hierboven komt na
   het versturen niet in beeld (die staat in de root-layout, en die rendert maar
   één keer); de contactpagina zet daarom zelf deze melding neer, en haalt hem
   na vijf seconden weer weg. In de letter en het donker van `.flash-message`. */
.success-banner {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 1.25rem 2rem;
    background-color: rgba(0,0,0, .8);
    color: #fff;
    border: .0625rem solid rgba(255,255,255, .5);
    border-radius: .5rem;
    font-family: var(--font-thin);
    font-size: 1.125rem;
    letter-spacing: .25rem;
    animation:
        rk-melding-in .4s ease-out both,
        rk-melding-uit .5s ease 4.5s both;
}

.success-banner__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: .0625rem solid #fff;
    border-radius: 50%;
    letter-spacing: 0;
}

.success-banner__text {
    margin: 0;
}

@keyframes rk-melding-in {
    from { opacity: 0; transform: translate(-50%, 1.5rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes rk-melding-uit {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, .75rem); }
}

@media (prefers-reduced-motion: reduce) {
    .success-banner {
        animation: none;
        transform: translateX(-50%);
    }
}

/* De foutmelding, op dezelfde plek. Blijft staan tot een nieuwe poging of tot
   de bezoeker haar wegklikt. */
.error-banner {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding: 1.25rem 1.25rem 1.25rem 2rem;
    background-color: rgba(0,0,0, .8);
    color: #fff;
    border: .0625rem solid #e8a0a0;
    border-radius: .5rem;
    font-family: var(--font-thin);
    font-size: 1.125rem;
    letter-spacing: .25rem;
    animation: rk-melding-in .4s ease-out both;
}

.error-banner__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: .0625rem solid #e8a0a0;
    border-radius: 50%;
    color: #e8a0a0;
    letter-spacing: 0;
}

.error-banner__text {
    margin: 0;
}

.error-banner__close {
    flex: 0 0 auto;
    padding: 0 .5rem;
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .error-banner {
        animation: none;
        transform: translateX(-50%);
    }
}


/* ── components/blobby-headers.css ── */
h2.author,
h2.acteur,
h2.developer {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    position: absolute;
    z-index: 0;
}

h2.author {
    font-size: clamp(1.125rem, 1.026rem + 0.526vw, 1.5rem);
    color: #f7f7f7;
    border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
    left: 60%;
    top: 55%;
    width: clamp(12rem, 10.684rem + 7.018vw, 17rem);
    height: clamp(9rem, 7.684rem + 7.018vw, 14rem);
    background-image: url(/assets/rutgerkroon/images/schrijver-352c044a621590852ca3ad2fc2869137.svg?vsn=d);
    background-size: 144%;
    padding: clamp(0.5rem, 0.105rem + 2.105vw, 2rem);
    letter-spacing: 0.5rem;
    letter-spacing: clamp(0.25rem, 0.184rem + 0.351vw, 0.5rem);
}

h2.acteur {
    font-size: clamp(1.125rem, 1.026rem + 0.526vw, 1.5rem);
    color: #fff;
    left: 70%;
    top: 40%;
    background-image: url(/assets/rutgerkroon/images/acteur-ad356cba653b04493f2b8f318af7119f.svg?vsn=d);
    background-size: 115%;
    letter-spacing: clamp(0.25rem, 0.184rem + 0.351vw, 0.5rem);
    width: clamp(10rem, 8.947rem + 5.614vw, 14rem);
    height: clamp(10rem, 8.947rem + 5.614vw, 14rem);
    padding: 1rem;
    opacity: 0.7;
}

h2.developer {
    background-image: url(/assets/rutgerkroon/images/webontwikelaar-d9606aaa64c5326425a5398fd989f8e4.svg?vsn=d);
    width: clamp(17rem, 15rem + 10vw, 24rem);
    height: clamp(16rem, 14.857rem + 5.714vw, 20rem);
    background-size: 200%;
    top: 0;
    padding-top: clamp(5.5rem, 4.786rem + 3.571vw, 8rem);
    letter-spacing: 0.25rem;
    rotate: -1deg;
    line-height: 1.35;
    font-size: clamp(1.125rem, 1.054rem + 0.357vw, 1.375rem);
}

@media (width < 48rem) {
    h2.author {
        left: 46%;
        background-size: 129%;
        top: 55%;
    }

    h2.acteur {
        left: 55%;
        top: 35%;
    }
}


/* ── components/footer.css ── */
footer.footer {
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    padding: 3rem 0 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-size: 0.875rem;
    letter-spacing: 0.125rem;
    text-transform: lowercase;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition: opacity 0.6s ease;
    opacity: 1;
    font-family: var(--font-special);
}

footer.footer.hidden {
    opacity: 0;
    pointer-events: none;
}

footer.footer.visible {
    opacity: 1;
    pointer-events: auto;
}

footer.footer a {
    margin-left: 2rem;
}

footer.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 15rem;
    /* background-color: rgba(0,0,0,.75); */
    background-color: var(--color-lilac);
    background-color: var(--color-blue);
    /* background-color: #4e3d9b; */
    background-color: #888;
    opacity: 0.7;
    border-radius: 50%;
    z-index: -1;
}


/* ── components/about.css ── */
.about-page {
    outline: 0.0625rem solid rgba(255, 255, 255, 0.5);
    outline-offset: -0.5rem;
}

.about-page article {
    display: flex;
    flex-direction: column;
}

.about-page article .text p {
    word-break: break-word;

    word-wrap: break-word;
    hyphens: auto;
}

.about-page article .button {
    color: #f7f7f7;
    margin: 2rem 0;
}

.about-page .image img {
    object-fit: cover;
    height: clamp(16rem, 14.947rem + 5.614vw, 20rem);
    width: clamp(16rem, 14.947rem + 5.614vw, 20rem);
    border-radius: 50%;
    box-shadow: 0 0 0.125rem;
}

.about-page .image {
    display: flex;
    justify-content: center;
    padding: 1rem 0 3rem;
}

.about-page label {
    font-family: var(--font-special);
    font-size: .925rem;
    letter-spacing: .125rem;
}

section.contact {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: .0625rem solid rgba(255, 255, 255, 0.25);
}

@media (width > 48rem) {
    .about-page article {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 6rem;
    }
}

/* ------------------------------------------------------------------
   /contact in het platform: bio + portret boven, formulier eronder.
   Het platform rendert `.index.contact-forms > .img-panel + .content`
   waar de losse app `.about-page > article > .image + .text` gebruikte;
   deze regels geven die markup dezelfde vormgeving.
   ------------------------------------------------------------------ */
.index.contact-forms {
    outline: 0.0625rem solid rgba(255, 255, 255, 0.5);
    outline-offset: -0.5rem;
}

.index.contact-forms .img-panel {
    display: flex;
    flex-direction: column;
}

.index.contact-forms .img-panel figure {
    display: flex;
    justify-content: center;
    padding: 1rem 0 3rem;
    margin: 0;
}

.index.contact-forms .img-panel img {
    object-fit: cover;
    height: clamp(16rem, 14.947rem + 5.614vw, 20rem);
    width: clamp(16rem, 14.947rem + 5.614vw, 20rem);
    border-radius: 50%;
    box-shadow: 0 0 0.125rem;
}

.index.contact-forms .body p {
    word-break: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.index.contact-forms #contact-content {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.25);
}

.index.contact-forms label {
    font-family: var(--font-special);
    font-size: 0.925rem;
    letter-spacing: 0.125rem;
}

/* Portret links over de volle hoogte, bio en formulier rechts eronder, zoals
   de losse app het had. `.img-panel` lost op in het raster van de sectie, zodat
   `figure` en `.panel` naast `#contact-content` komen te staan. */
@media (width > 48rem) {
    .index.contact-forms {
        display: grid;
        grid-template-columns: 2fr 3fr;
        column-gap: 6rem;
        align-items: start;
    }

    .index.contact-forms > header {
        grid-column: 1 / -1;
    }

    .index.contact-forms .img-panel {
        display: contents;
    }

    .index.contact-forms .img-panel figure {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    .index.contact-forms .img-panel .panel,
    .index.contact-forms #contact-content {
        grid-column: 2;
    }
}

/* `.button` zet geen kleur; een `<button>` viel daardoor terug op zwart. */
.index.contact-forms .button {
    color: #f7f7f7;
}

/* Het platform nest het invoerveld ín het label ("<label>Naam <input></label>"),
   waar de losse app ze naast elkaar zette. Label boven veld, zoals voorheen. */
.index.contact-forms .form-group label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    gap: 0.25rem;
}

.index.contact-forms .form-group label[for^="message"] {
    width: auto;
}


/* ── components/confetti.css ── */
@keyframes popIn {
    0% {
        transform: scale(0.3) rotateY(90deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotateY(0deg);
        opacity: 1;
    }
}

/* Confetti Container */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* Individual Confetti Pieces */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ff6b6b;
    animation: confetti-fall 3s linear infinite;
}

.confetti:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    background: #ff6b6b;
}

.confetti:nth-child(2) {
    left: 20%;
    animation-delay: 0.2s;
    background: #4ecdc4;
}

.confetti:nth-child(3) {
    left: 30%;
    animation-delay: 0.4s;
    background: #45b7d1;
}

.confetti:nth-child(4) {
    left: 40%;
    animation-delay: 0.6s;
    background: #f9ca24;
}

.confetti:nth-child(5) {
    left: 50%;
    animation-delay: 0.8s;
    background: #f0932b;
}

.confetti:nth-child(6) {
    left: 60%;
    animation-delay: 1s;
    background: #eb4d4b;
}

.confetti:nth-child(7) {
    left: 70%;
    animation-delay: 1.2s;
    background: #6c5ce7;
}

.confetti:nth-child(8) {
    left: 80%;
    animation-delay: 1.4s;
    background: #a29bfe;
}

.confetti:nth-child(9) {
    left: 90%;
    animation-delay: 1.6s;
    background: #fd79a8;
}

.confetti:nth-child(10) {
    left: 15%;
    animation-delay: 1.8s;
    background: #00b894;
}

.confetti:nth-child(11) {
    left: 25%;
    animation-delay: 2s;
    background: #e17055;
}

.confetti:nth-child(12) {
    left: 35%;
    animation-delay: 2.2s;
    background: #0984e3;
}

.confetti:nth-child(13) {
    left: 45%;
    animation-delay: 2.4s;
    background: #00cec9;
}

.confetti:nth-child(14) {
    left: 55%;
    animation-delay: 2.6s;
    background: #fdcb6e;
}

.confetti:nth-child(15) {
    left: 65%;
    animation-delay: 2.8s;
    background: #e84393;
}

.confetti:nth-child(16) {
    left: 75%;
    animation-delay: 3s;
    background: #55a3ff;
}

.confetti:nth-child(17) {
    left: 85%;
    animation-delay: 0.3s;
    background: #26de81;
}

.confetti:nth-child(18) {
    left: 95%;
    animation-delay: 0.7s;
    background: #fc5c65;
}

.confetti:nth-child(19) {
    left: 5%;
    animation-delay: 1.1s;
    background: #fed330;
}

.confetti:nth-child(20) {
    left: 12%;
    animation-delay: 1.5s;
    background: #a55eea;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Different shapes for variety */
.confetti:nth-child(odd) {
    border-radius: 50%;
}

.confetti:nth-child(3n) {
    width: 6px;
    height: 12px;
    border-radius: 0;
}

.confetti:nth-child(4n) {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

.confetti:nth-child(5n) {
    width: 12px;
    height: 4px;
}

/* Trigger animation button */
.trigger-btn {
    margin-top: 30px;
    padding: 12px 30px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.trigger-btn:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40,167,69,0.3);
}



/* ── components/beheerbalk.css ── */
/* De beheerbalk boven de kop, alleen voor wie ingelogd is (Kaap Content,
   zoals bij Aafke Buringh). Boven de kop (z-index 3) en het opengeklapte menu
   op de telefoon (z-index 4), zodat Uitloggen altijd te bereiken is.
   `.inner` is een gecentreerde kolom die elk kind binnenruimte en een
   maximale breedte geeft (base.css); de balk loopt over de volle breedte. */
.beheerbalk {
    align-self: stretch;
    max-width: none;
    padding: 0;
    position: relative;
    z-index: 5;
    background-color: #111;
    color: #fff;
}

.beheerbalk ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 1.5rem;
    padding: 0.5rem 2rem;
    font-family: "KK Roboto Condensed", sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.beheerbalk a {
    color: inherit;
    text-decoration: none;
}

.beheerbalk a:hover,
.beheerbalk a.active {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.beheerbalk a:focus-visible {
    outline: 0.125rem solid #fff;
    outline-offset: 0.125rem;
}

/* Het naambordje van de formulieren (base/admin.css) staat vast rechtsboven, en
   lag daar over "Uitloggen". Het zakt eronder, zoals het bij de sprongbalk ook
   doet. */
body:has(.beheerbalk):not(:has(.form-sprongbalk)) .user-badge {
    top: 2.6rem;
}



/* 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;
}