/* ============================================================
   Bestand: public_html/assets/modules/stad/css/public.css
   ============================================================

   De publieke weergaven van de stadsrubrieken: nieuws, prikbord, verenigingen
   en 112-meldingen.

   Deze stijl hoort bij de MODULE, niet bij één thema. Het sjabloon laadt hem
   zelf met een <link>, net zoals de bedrijvenmodule dat doet. Zonder dit
   bestand zou /nieuws op elk thema behalve Franeker kale HTML zijn.

   Kleuren en letters staan als `var(--fr-x, terugval)`. Draait de module in het
   Franeker-thema, dan zet dat thema die tokens en volgt de module vanzelf de
   huisstijl (inclusief nachtstand). Elk ander thema krijgt de terugval: een
   neutrale, leesbare weergave die bij een lichte CMS-pagina past.
   ============================================================ */

.stad-lijst { display: flex; flex-direction: column; gap: 18px; }
.stad-nieuwskaart {
    display: flex;
    gap: 20px;
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    padding: 20px;
    text-decoration: none;
}
.stad-nieuwskaart:hover { border-color: var(--fr-rand3, #b6bcc6); }
/* `flex: none` met een losse breedte: dit kader staat in een kolom-flexcontainer
   (.stad-nieuwskaart-figuur), en daar is flex-basis de hoogte. */
.stad-nieuwskaart-beeld { flex: none; width: 200px; height: 134px; overflow: hidden; border-radius: 2px; }
.stad-nieuwskaart-beeld img { width: 100%; height: 100%; object-fit: cover; }
/* De figuur om de foto: het plaatje in zijn kader, de vermelding van de uitgever eronder. Ook als
   het tonen van een foto mag, heeft de maker recht op vermelding (art. 25 Auteurswet). */
.stad-nieuwskaart-figuur { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; }
.stad-nieuwskaart-fotobron { overflow-wrap: anywhere; font: 400 11px/1.3 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-stil2, #6b7280); }
.stad-nieuwskaart-tekst { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.stad-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font: 400 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--fr-stil2, #6b7280);
}
.stad-meta .stad-rubrieklabel {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-kicker, #6f5716);
}
.stad-prikbord-kaart {
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    padding: 20px;
}
.stad-club {
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}
.stad-club:hover { border-color: var(--fr-rand3, #b6bcc6); }
.stad-feiten {
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--fr-rand, #e2e4e8);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    overflow: hidden;
}
.stad-feit { background: var(--fr-kaart, #fff); padding: 16px 18px; }
.stad-feit dt {
    font: 400 10.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-stil, #6b7280);
    margin-bottom: 7px;
}
/* Een mailadres of webadres breekt nergens uit zichzelf; zonder dit loopt hij op een smalle
   kolom zijn cel uit. */
.stad-feit dd { margin: 0; overflow-wrap: anywhere; font: 500 15px/1.4 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
/* Stadsrubrieken: wat de moduleweergaven bovenop de gedeelde bouwstenen nodig hebben. */
.stad-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 3px double var(--fr-dubbel, #1b2130);
    padding-bottom: 10px;
    margin-bottom: 22px;
}
.stad-kop h1 { margin: 0; font: 500 40px/1.08 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); letter-spacing: -0.01em; }
.stad-teller { font: 400 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--fr-stil2, #6b7280); }
.stad-leeg { font: 400 15.5px/1.7 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst2, #4a5060); }
.stad-nieuwskaart-kop { font: 500 23px/1.25 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); }
.stad-nieuwskaart-lead { font: 400 14.5px/1.6 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst2, #4a5060); }
.stad-prikbord-kaart h2 { margin: 8px 0; font: 600 19px/1.25 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); }
.stad-prikbord-kaart p { margin: 0 0 8px; font: 400 14.5px/1.6 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst2, #4a5060); }
.stad-contact { font: 500 13.5px/1.5 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-link, #1d4ed8) !important; }
.stad-club-mono {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: var(--fr-nacht, #1b2130);
    color: #c39026;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 15px/1 var(--fr-serif, Georgia, "Times New Roman", serif);
}
.stad-club-naam { display: block; font: 600 15px/1.25 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
.stad-club-soort {
    display: block;
    font: 400 10.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fr-stil, #6b7280);
    margin-top: 5px;
}
.stad-melding {
    display: flex;
    gap: 16px;
    padding: 14px 18px;
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
}
.stad-melding-tijd { flex: 0 0 60px; font: 400 12.5px/1.5 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--fr-stil2, #6b7280); }
.stad-melding-dienst { display: block; font: 600 14.5px/1.35 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
.stad-melding-plaats { display: block; font: 400 12.5px/1.4 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-stil, #6b7280); }
.stad-kruimel {
    display: flex;
    gap: 8px;
    align-items: center;
    font: 400 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--fr-stil, #6b7280);
    margin-bottom: 18px;
}
.stad-detail h1 { margin: 10px 0 14px; font: 500 42px/1.06 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); letter-spacing: -0.01em; }
.stad-lead {
    font: 500 17px/1.55 var(--fr-serif, Georgia, "Times New Roman", serif);
    font-style: italic;
    color: var(--fr-tekst2, #4a5060);
    border-bottom: 1px solid var(--fr-lijn, #eceef1);
    padding-bottom: 18px;
    margin: 0 0 18px;
}
.stad-detail-beeld { margin: 0 0 22px; }
.stad-detail-beeld img { width: 100%; height: auto; border-radius: 2px; }
.stad-bijschrift { margin-top: 6px; font: italic 400 12.5px/1.4 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-stil2, #6b7280); }
.stad-tekst { font: 400 15.5px/1.7 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
.stad-tekst p { margin: 0 0 14px; max-width: 64ch; }
.stad-tekst h2 { font: 500 27px/1.2 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); margin: 28px 0 10px; }
.stad-website { font: 500 14.5px/1.5 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); }
/* De bladerbalk onder en boven een rubriek (View::bladeren(), vorm in assets/shared/css/bladeren.css).
   Hier alleen de kleuren van de module, met dezelfde terugvallen als de rest van dit blad. Onderaan
   een lijn erboven, bovenaan een lijn eronder: zo hoort de balk bij de lijst en niet bij de kop. */
.stad-bladeren {
    --cms-bladeren-kleur: var(--fr-kop, #1b2130);
    --cms-bladeren-rand: var(--fr-lijn, #d9dce2);
    --cms-bladeren-vlak: var(--fr-kaart, #fff);
    --cms-bladeren-stand-kleur: var(--fr-tekst2, #4a5060);
    --cms-bladeren-radius: 10px;
    font-family: var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.stad-bladeren.cms-bladeren--onder { --cms-bladeren-marge: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--fr-lijn, #eceef1); }
.stad-bladeren.cms-bladeren--boven { --cms-bladeren-marge-boven: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--fr-lijn, #eceef1); }


/* Het prikbord als briefjes op een bord, dezelfde vorm als op de dorpsthema's (.fr-briefje in
   fr-gedeeld.css). Dit was een vlakke kaart met een metaregel erboven, en dat is wat elke andere
   rubriek ook is; een prikbord hoort eruit te zien als een prikbord. Twee kolommen waar het past,
   en om en om een halve graad scheef zodat het bord leeft zonder rommelig te worden. */
.stad-lijst:has(.stad-briefje) {
    /* De briefjes staan een halve graad scheef; hun hoeken steken daardoor een pixel buiten de lijst.
       Knippen op de lijst voorkomt dat de pagina daarvoor opzij gaat schuiven. */
    overflow-x: clip;
    padding-inline: 2px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.9rem;
    align-items: start;
}

.stad-briefje {
    position: relative;
    /* Het briefje is altijd licht papier, ook in een donker thema; de tekst krijgt daarom zijn eigen
       donkere kleur en erft niet de lichte tekstkleur van een nachtstand (testronde 28 september 2026). */
    color: #1b1c18;
    background: #fffdf6;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.stad-briefje.is-links { transform: rotate(-0.5deg); }
.stad-briefje.is-rechts { transform: rotate(0.5deg); }

/* Wie minder beweging wil, wil ook geen scheve vlakken die het lezen lastiger maken. */
@media (prefers-reduced-motion: reduce) {
    .stad-briefje.is-links,
    .stad-briefje.is-rechts { transform: none; }
}

.stad-punaise {
    position: absolute;
    top: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    background: #dcab48;
    border: 2px solid #fff;
}

.stad-briefje-cat {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.07);
    color: #5b6878;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* Twee klassen: een thema dat koppen een eigen kleur geeft (body.site-theme-x h2, 0,1,2) mag de kop op het
   lichte papier niet licht maken. */
.stad-briefje .stad-briefje-kop,
.stad-briefje .stad-briefje-tekst,
.stad-briefje .stad-briefje-contact { color: #1b1c18; }
.stad-briefje .stad-briefje-meta { color: #5b6878; }
.stad-briefje-kop { margin: 0.45rem 0 0; font-size: 1rem; line-height: 1.4; font-weight: 700; }

.stad-briefje-tekst { margin: 0.2rem 0 0; font-size: 0.9375rem; line-height: 1.55; }

.stad-briefje-voet {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.stad-briefje-meta { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: #5b6878; }

.stad-briefje-contact { font-size: 0.875rem; font-weight: 600; }

/* Alleen hoorbaar: voor wie de pagina beluistert zegt een knop met alleen een adres niets. Zichtbaar
   weglaten, hoorbaar houden. */
.stad-alleen-hoorbaar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Smal scherm ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .stad-kop h1 { font-size: 30px; }
    .stad-detail h1 { font-size: 30px; }
    .stad-nieuwskaart { flex-direction: column; }
    .stad-nieuwskaart-figuur { flex: 0 0 auto; width: 100%; }
    .stad-nieuwskaart-beeld { flex: none; width: 100%; height: 180px; }
}

/* Een vereniging zonder eigen verhaal is geen link. Hij houdt dezelfde vorm, alleen zonder
   klikgedrag: anders klik je op een regel die je terugbrengt op dezelfde pagina. */
.stad-club.is-plat { cursor: default; }
.stad-club.is-plat:hover { background: inherit; }

/* De weg om zelf iets aan te leveren. Stond er niet, en dan is een prikbord alleen om
   naar te kijken. */
.stad-aanleveren {
    margin: 0 0 18px;
    font: 400 13.5px/1.5 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-stil, #6b6d62);
}
.stad-aanleveren a { color: var(--fr-link, #24407c); font-weight: 600; }
.stad-aanleveren a:hover { color: var(--fr-messingdonker, #8c6612); }

/* ── Zelf een oproep plaatsen ──────────────────────────────────────────────────────────
   Het formulier onderaan het prikbord. Zelfde `var(--fr-x, terugval)`-aanpak als de rest van
   deze module: in het Franeker-thema volgt het vanzelf de huisstijl, elk ander thema krijgt de
   neutrale terugval. Ingeklapt als <details>, zodat het bord het bord blijft. */
.stad-plaatsen {
    /* Na het insturen springt de pagina naar #plaatsen; de vaste kop mag de melding niet bedekken. */
    scroll-margin-top: 7rem;
    margin: 26px 0 0;
    border: 1px solid var(--fr-lijn, #d9d5c8);
    border-radius: var(--fr-radius, 2px);
    background: var(--fr-vlak, #fbfaf6);
}
.stad-plaatsen > summary {
    padding: 14px 16px;
    font: 600 15px/1.2 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-tekst, #1b1c18);
    cursor: pointer;
    list-style: none;
}
/* Het standaard driehoekje van de browser past niet in de huisstijl; een eigen teken wel. */
.stad-plaatsen > summary::-webkit-details-marker { display: none; }
.stad-plaatsen > summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: var(--fr-messingdonker, #8c6612);
    font-weight: 700;
}
.stad-plaatsen[open] > summary::before { content: "−"; }

.stad-plaatsen-form {
    display: grid;
    gap: 14px;
    padding: 4px 16px 18px;
}
.stad-veld { display: grid; gap: 5px; }
.stad-veld > span {
    font: 600 12.5px/1.3 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-stil, #6b6d62);
}
.stad-veld-bij { font-weight: 400; opacity: .8; }
.stad-veld input,
.stad-veld select,
.stad-veld textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fr-lijn, #d9d5c8);
    border-radius: var(--fr-radius, 2px);
    background: var(--fr-papier, #fff);
    color: var(--fr-tekst, #1b1c18);
    font: 400 15px/1.4 var(--fr-sans, system-ui, sans-serif);
}
.stad-veld textarea { resize: vertical; min-height: 90px; }
.stad-veld input:focus,
.stad-veld select:focus,
.stad-veld textarea:focus {
    outline: 2px solid var(--fr-messing, #b5893a);
    outline-offset: 1px;
}
/* Twee velden naast elkaar zolang er ruimte is; op een telefoon onder elkaar. */
.stad-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) {
    .stad-veld-rij { grid-template-columns: 1fr; }
    /* Het feitenblok trekt zijn rasterlijnen met de achtergrond van de lijst erachter. Bij een
       oneven aantal feiten bleef op smal scherm de laatste halve cel als grijs vlak liggen. Twee
       vaste kolommen maken de telling voorspelbaar, en een laatste feit dat een rij alleen begint
       loopt over de volle breedte door. */
    .stad-feiten { grid-template-columns: repeat(2, 1fr); }
    .stad-feit:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.stad-plaatsen-knop {
    justify-self: start;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--fr-radius, 2px);
    background: var(--fr-messing, #b5893a);
    color: var(--fr-nacht, #16203a);
    font: 700 14px/1 var(--fr-sans, system-ui, sans-serif);
    cursor: pointer;
}
.stad-plaatsen-knop:hover { background: var(--fr-messingdonker, #8c6612); color: #fff; }

.stad-plaatsen-klein {
    margin: 0;
    font: 400 12.5px/1.5 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-stil, #6b6d62);
}
.stad-plaatsen-goed,
.stad-plaatsen-fout {
    margin: 0 16px 12px;
    padding: 11px 13px;
    border-left: 3px solid;
    font: 500 14px/1.45 var(--fr-sans, system-ui, sans-serif);
}
.stad-plaatsen-goed { border-color: #2f7d4f; background: rgba(47, 125, 79, .08); color: #1f5936; }
.stad-plaatsen-fout { border-color: #b42318; background: rgba(180, 35, 24, .07); color: #8a1c14; }

/* Het honeypot-veld. Weg uit beeld én uit de tabvolgorde, maar niet met display:none: een
   bot die daarop let slaat het veld dan juist over, en dan vangt het niets. */
.stad-plaatsen-vangst {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* De 112-koppeling (v014.11.297): de stand van de verbinding, de bronvermelding en de uitnodiging
   om lid te worden. In de dorpsthema's krijgen deze klassen hun eigen vorm mee uit fr-gedeeld.css;
   hier staat de neutrale terugval, net als de rest van deze module. */
.stad-melding-app,
.stad-melding-storing {
  margin: 1.25rem 0 0;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--fr-rand, #e2e8f0);
  border-radius: var(--fr-hoek, 10px);
  background: var(--fr-kaart, #f8fafc);
  font: 400 14px/1.55 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--fr-tekst, #1b2130);
}

.stad-melding-storing {
  border-color: var(--fr-amber, #f59e0b);
}

.stad-melding-bron {
  margin: 0.75rem 0 0;
  font: 400 12.5px/1.5 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--fr-stil, #6b7280);
}

/* Het pijltje bij een kop die naar de uitgever gaat. Kleiner en stiller dan de kop zelf: het is
   een aanwijzing, geen tweede titel. */
.stad-extern {
  font-size: 0.8em;
  color: var(--fr-stil, #6b7280);
}

/* ── Het venster bij een 112-melding ───────────────────────────────────────────
   Eén vormgeving voor alle vier de dorpen: de lijst eromheen verschilt per dorp,
   dit venster niet. De kleuren komen uit de themavariabelen, dus hij volgt vanzelf
   de dag- en nachtmodus van de site waar hij op staat. */

/* De knop ligt over de hele meldingregel. Een echte `<button>` en geen `role="button"` op de
   regel zelf: die rol overschrijft `listitem` en dan houdt de lijst voor een schermlezer nul
   items over. Zo levert de browser Enter, spatie en de focusring gratis, en blijft de lijst een
   lijst. De knop is doorzichtig; wat je ziet is de regel eronder. */
.stad-melding.heeft-venster,
li.heeft-venster {
  position: relative;
}

.stad-melding-knop,
.fr-112-regel-knop {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: inherit;
  cursor: pointer;
  /* Boven de regel, onder het venster. */
  z-index: 1;
}

/* De focusring mag niet uit een themavariabele komen die niet overal bestaat: op een thema zonder
   `--fr-blauw` viel hij terug op een vast blauw dat in de nachtstand onder de 3:1 van WCAG 1.4.11
   zakte -- juist voor wie hem het hardst nodig heeft. `currentColor` volgt altijd de tekstkleur van
   de site en haalt die grens in beide standen. */
.stad-melding-knop:focus-visible,
.fr-112-regel-knop:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* De tekst eronder blijft aanwijsbaar; anders lijkt alleen de rand te reageren. */
.stad-melding.heeft-venster,
li.heeft-venster {
  cursor: pointer;
}

/* De pagina eronder mag niet meescrollen zolang het venster openstaat. */
.stad-venster-open,
.stad-venster-open body {
  overflow: hidden;
}

.stad-venster[hidden] { display: none; }
.stad-venster {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.stad-venster-doek {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.stad-venster-kaart {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 20px 20px;
  background: var(--fr-kaart, #fff);
  color: var(--fr-tekst, #111827);
  border: 1px solid var(--fr-rand, #e5e7eb);
  border-radius: 14px 14px 0 0;
  /* De lift komt van de beweging, niet van een halfdoorzichtige kaart: een venster dat
     zelf doorschijnend is leest slecht op een drukke pagina. */
  animation: stadVensterOp 0.18s ease-out;
}

@keyframes stadVensterOp {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stad-venster-kaart { animation: none; }
}

/* Op een groter scherm staat hij midden in beeld in plaats van tegen de onderrand. */
@media (min-width: 641px) {
  .stad-venster { align-items: center; padding: 24px; }
  .stad-venster-kaart { border-radius: 14px; }
}

.stad-venster-kruis {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  font-size: 26px;
  line-height: 1;
  color: var(--fr-stil, #6b7280);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

 /* Geen vaste lichte terugval: `--fr-tint` bestaat niet in elk thema, en dan werd het kruis bij
    hover een lichte pil met lichte tekst erop -- contrast 1,09:1, dus praktisch onzichtbaar in de
    nachtstand. Een half doorzichtig grijs werkt in beide standen, want het neemt de kleur van wat
    eronder ligt mee. */
.stad-venster-kruis:hover {
  background: var(--fr-tint, rgba(128, 128, 128, 0.16));
  color: var(--fr-tekst, currentColor);
}

.stad-venster-kaart:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.stad-venster-kicker {
  margin: 0 44px 6px 0;
  font: 600 12.5px/1.5 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fr-stil, #6b7280);
}

.stad-venster-kop {
  margin: 0 0 16px;
  font-size: 1.15rem;
  line-height: 1.4;
  /* De P2000-tekst is één lange regel zonder spaties op de rare plekken; zonder dit
     duwt een lang ritnummer het venster breder dan het scherm. */
  overflow-wrap: anywhere;
}

.stad-venster-lijst {
  display: grid;
  grid-template-columns: minmax(8.5rem, auto) 1fr;
  gap: 7px 16px;
  margin: 0;
  font-size: 14px;
}

.stad-venster-lijst dt {
  margin: 0;
  color: var(--fr-stil, #6b7280);
}

.stad-venster-lijst dd {
  margin: 0;
  overflow-wrap: anywhere;
}


.stad-venster-voet {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--fr-rand, #e5e7eb);
  font: 400 12.5px/1.55 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--fr-stil, #6b7280);
}

/* ── De verantwoording onder de nieuwslijst ────────────────────────────────────
   Op deze pagina staan koppen, samenvattingen en foto's van andermans werk. Dat
   verdient een leesbaar stuk en geen regel muistekst: wie de uitgever is, dat het
   hele artikel bij hem staat, en waar hij ons bereikt als hij eraf wil. Rustig
   van toon en duidelijk afgescheiden van de berichten erboven. */
.stad-verantwoording {
  margin: 28px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--fr-rand, #e5e7eb);
  border-radius: 10px;
  /* De gewone kaartkleuren, niet een eigen tint: die combinatie is in het thema al op leesbaarheid
     afgestemd. Op een tint zakte het contrast naar 4,07 overdag en 3,28 in het donker, en juist
     déze tekst wil je dat mensen kunnen lezen. Het onderscheid komt van de rand. */
  background: var(--fr-kaart, #fff);
  font: 400 13.5px/1.65 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--fr-tekst, #374151);
}

.stad-verantwoording h2 {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.stad-verantwoording p {
  margin: 0 0 10px;
}

.stad-verantwoording p:last-child {
  margin-bottom: 0;
}

.stad-verantwoording a {
  color: inherit;
  text-decoration: underline;
}

.stad-verantwoording-storing {
  padding: 9px 12px;
  border-left: 3px solid var(--fr-amber, #d97706);
  background: var(--fr-tint, rgba(128, 128, 128, 0.08));
  border-radius: 0 6px 6px 0;
}

/* De uitgevers zelf mogen opvallen: dat is de bronvermelding waar het om gaat. */
.stad-verantwoording-bronnen {
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--fr-tint, rgba(128, 128, 128, 0.08));
  overflow-wrap: anywhere;
}

.stad-verantwoording-label {
  color: var(--fr-stil, #6b7280);
}

.stad-verantwoording-contact {
  padding-top: 10px;
  border-top: 1px solid var(--fr-rand, #e5e7eb);
}

/* ── Verenigingspagina: het visitekaartje (v014.11.338) ─────────────────────────
   Het middenstuk van een clubpagina, naar design/verenigingspagina/README.md. Eén
   opmaak voor alle sites: de kleuren en letters komen uit de thematokens
   (`var(--fr-x, terugval)`), de clubkleur uit een klasse `stad-kleur-<naam>` op het profiel.
   Zonder gekozen kleur is de clubkleur de knopkleur van de site: dat is op elk van
   de vier sites een donkere tint waar witte tekst op leesbaar is. De tint voor
   pillen en tegels is een mengsel van de clubkleur met de kaartkleur, zodat hij in
   de nachtstand vanzelf donker wordt.

   VOLGORDE TELT. De standaardkleur staat op :root en het palet op één klasse: zo wint
   de gekozen kleur op élk element (het profiel én de regel in de rechterkolom) zonder dat
   er per element een tweede lijst nodig is. De tint staat op de elementen zelf, want een
   eigen waarde voor --stad-club op een element moet in de tint van dát element doorwerken;
   op :root zou de tint één keer met de standaardkleur worden uitgerekend en zo overerven.
   Het palet en de tint staan daarom ná de elementregels, aan het eind van dit bestand. */
:root {
    --stad-club: var(--fr-knop, #1f2430);
    /* De tekst óp de clubkleur (monogram, dagnummer, vinkje). Bij een paletkleur wit; bij de
       standaard de knoptekst van het thema, want in de nachtstand is de knopkleur juist licht en
       dan is wit onleesbaar (2,1:1 op julianadorp). */
    --stad-club-ink: var(--fr-knoptekst, #fff);
}
.stad-profiel {
    --stad-vk-kaart: var(--fr-kaart, #fff);
    --stad-vk-lijn: var(--fr-rand, #e2e4e8);
    --stad-vk-tekst: var(--fr-tekst, #1f2430);
    --stad-vk-stil: var(--fr-stil, #5f6472);
    --stad-vk-link: var(--fr-link, #1d4ed8);
    --stad-vk-linkhover: var(--fr-messingdonker, #8c6612);
    --stad-vk-serif: var(--fr-serif, Georgia, "Times New Roman", serif);
    --stad-vk-sans: var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
    --stad-vk-mono: var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    display: flex;
    flex-direction: column;
    gap: 20px;
    font: 400 15px/1.5 var(--stad-vk-sans);
    color: var(--stad-vk-tekst);
}

/* Het kaartje zelf. */
.stad-vk {
    background: var(--stad-vk-kaart);
    border: 1px solid var(--stad-vk-lijn);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(20, 25, 40, 0.04), 0 16px 36px -24px rgba(20, 25, 40, 0.28);
}
.stad-vk-omslag { height: 280px; background: var(--stad-club-tint); }
.stad-vk-omslag img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zonder foto een band in de clubkleur: dan begint de kaart niet met een kale kop. */
.stad-vk-omslag.is-band { height: 120px; background: linear-gradient(115deg, var(--stad-club), var(--stad-club-tint)); }
.stad-vk-inhoud { padding: 0 28px 26px; }
.stad-vk-boven { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
/* De logotegel hangt over de foto heen; zonder logo staat het monogram erin. */
.stad-vk-logo {
    flex: none;
    width: 104px;
    height: 104px;
    margin-top: -48px;
    border-radius: 24px;
    background: var(--stad-club);
    border: 4px solid var(--stad-vk-kaart);
    box-shadow: 0 8px 20px -10px rgba(20, 25, 40, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.stad-vk-logo img { width: 100%; height: 100%; object-fit: contain; padding: 12px; background: var(--stad-vk-kaart); }
.stad-vk-logo span { font: 700 34px/1 var(--stad-vk-serif); color: var(--stad-club-ink); letter-spacing: -0.02em; }
.stad-vk-tekst { flex: 1 1 320px; min-width: 0; padding-top: 16px; }
/* Het kleine kopje boven elk blok. */
.stad-bloklabel {
    margin: 0;
    font: 700 11px/1 var(--stad-vk-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stad-vk-stil);
}
.stad-vk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.stad-vk-stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stad-club); }
.stad-vk-naam {
    margin: 8px 0;
    font: 700 clamp(30px, 4vw, 40px)/1.1 var(--stad-vk-serif);
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--stad-vk-tekst);
}
.stad-vk-zin { margin: 0; font: 400 17px/1.5 var(--stad-vk-sans); color: var(--stad-vk-stil); max-width: 62ch; text-wrap: pretty; }
.stad-vk-knoppen { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Elke knop minstens 44 px hoog: een vinger moet hem raken. */
.stad-vk-knop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--stad-vk-lijn);
    background: var(--stad-vk-kaart);
    color: var(--stad-vk-tekst);
    font: 600 15px/1.2 var(--stad-vk-sans);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.stad-vk-knop:hover { border-color: var(--stad-vk-link); color: var(--stad-vk-link); }
.stad-vk-knop.is-primair {
    padding: 12px 18px;
    border-color: transparent;
    background: var(--fr-knop, #1f2430);
    color: var(--fr-knoptekst, #fff);
    font-weight: 700;
}
.stad-vk-knop.is-primair:hover { filter: brightness(0.94); color: var(--fr-knoptekst, #fff); }
.stad-vk-knop:focus-visible,
.stad-blok-link:focus-visible,
.stad-foto:focus-visible,
.stad-chip:focus-visible,
.stad-vk-beheerknop:focus-visible,
.stad-beheerbalk-uit:focus-visible { outline: 3px solid var(--stad-club); outline-offset: 3px; }
.stad-vk-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.2 var(--stad-vk-sans); color: var(--stad-vk-stil); }
.stad-vk-vink { width: 16px; height: 16px; border-radius: 50%; background: var(--stad-club); color: var(--stad-club-ink); font: 800 10px/16px var(--stad-vk-sans); text-align: center; }

/* De blokken eronder: "Over" en "In het kort" naast elkaar, agenda en foto's over de volle breedte. */
.stad-profiel-rij { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.stad-blok {
    background: var(--stad-vk-kaart);
    border: 1px solid var(--stad-vk-lijn);
    border-radius: 18px;
    padding: 24px 28px;
    min-width: 0;
}
.stad-over { flex: 1 1 380px; }
.stad-over-tekst { margin-top: 12px; font: 400 16.5px/1.65 var(--stad-vk-sans); color: var(--stad-vk-tekst); max-width: 68ch; text-wrap: pretty; }
.stad-over-tekst p { margin: 0 0 14px; }
.stad-over-tekst p:last-child { margin-bottom: 0; }
.stad-kort { flex: 1 1 260px; padding: 24px 24px 18px; }
.stad-kort-lijst { margin: 6px 0 0; }
.stad-kort-rij { padding: 11px 0; border-bottom: 1px solid var(--stad-vk-lijn); }
.stad-kort-rij dt { font: 700 12px/1.3 var(--stad-vk-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stad-vk-stil); }
/* Een mailadres breekt nergens uit zichzelf; zonder dit loopt hij op een smalle kolom zijn vak uit. */
.stad-kort-rij dd { margin: 3px 0 0; font: 600 15px/1.4 var(--stad-vk-sans); color: var(--stad-vk-tekst); overflow-wrap: anywhere; }
.stad-blok-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font: 700 14px/1.3 var(--stad-vk-sans); color: var(--stad-vk-link); text-decoration: none; }
.stad-blok-link:hover { color: var(--stad-vk-linkhover); }
.stad-kort-route { margin-top: 4px; }
.stad-blok-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.stad-blok-titel { margin: 6px 0 0; font: 700 24px/1.2 var(--stad-vk-serif); color: var(--stad-vk-tekst); }

/* Agenda: datumtegel in de clubkleur, tekst, en een pil met het etiket. */
.stad-agenda-lijst { list-style: none; margin: 14px 0 0; padding: 0; }
.stad-agenda-item { position: relative; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--stad-vk-lijn); }
.stad-agenda-datum {
    flex: none;
    width: auto;
    min-width: 58px;
    border-radius: 14px;
    background: var(--stad-club);
    color: var(--stad-club-ink);
    text-align: center;
    padding: 9px 6px 8px;
    display: flex;
    flex-direction: column;
}
.stad-agenda-datum strong { white-space: nowrap; font: 800 22px/1 var(--stad-vk-sans); }
.stad-agenda-datum span { margin-top: 4px; font: 700 11px/1 var(--stad-vk-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.stad-agenda-tekst { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stad-agenda-tekst strong { font: 700 16.5px/1.3 var(--stad-vk-sans); color: var(--stad-vk-tekst); }
.stad-agenda-tekst span { font: 400 14px/1.4 var(--stad-vk-sans); color: var(--stad-vk-stil); }
.stad-agenda-tekst a::after { content: ""; position: absolute; inset: 0; }
.stad-agenda-tag { font: 700 12.5px/1.2 var(--stad-vk-sans); padding: 5px 11px; border-radius: 999px; background: var(--stad-club-tint); color: var(--stad-vk-tekst); }
/* Een leeg blok staat er op élke verenigingspagina, dus het moet ook leeg rustig zijn. */
.stad-leegtekst { margin: 12px 0 0; font: 400 15px/1.55 var(--stad-vk-sans); color: var(--stad-vk-stil); }
.stad-leegtekst a { color: var(--stad-vk-link); }
.stad-leegtekst a:hover { color: var(--stad-vk-linkhover); }
.stad-leegknop { margin: 14px 0 0; }

/* Foto's: de eerste groot links, de rest in tegels. */
.stad-fotos { padding-bottom: 26px; }
.stad-fotos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 156px; gap: 10px; margin-top: 16px; }
.stad-foto { display: block; border-radius: 14px; overflow: hidden; background: var(--stad-club-tint); }
.stad-foto:first-child { grid-row: span 2; }
.stad-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Lege tegels: een rustig streepvlak in de clubkleur, zodat je ziet dat hier beeld hoort te komen.
   Ze zijn geen knop en geen link -- de weg naar boven loopt via de knop in de kop. */
/* Vaste kolommen voor de lege tegels: met auto-fit valt er op tabletbreedte één tegel als wees
   op een tweede rij. */
.stad-fotos-grid.is-leeg { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 132px; }
.stad-fotos-grid.is-leeg .stad-foto:first-child { grid-row: auto; }
.stad-foto-plaats {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--stad-vk-lijn);
    background: repeating-linear-gradient(135deg,
        var(--stad-club-tint) 0 10px,
        color-mix(in srgb, var(--stad-club-tint) 45%, transparent) 10px 20px);
}
.stad-foto-plaats span {
    font: 600 11.5px/1 var(--stad-vk-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--stad-vk-stil);
    background: var(--stad-vk-kaart);
    padding: 5px 10px;
    border-radius: 999px;
}

.stad-redactieregel { margin: 0; padding: 0 4px; font: 400 13px/1.5 var(--stad-vk-sans); color: var(--stad-vk-stil); }
.stad-redactieregel strong { color: var(--stad-vk-tekst); font-weight: 600; }
.stad-redactieregel a { color: var(--stad-vk-link); text-decoration: underline; }
.stad-redactieregel a:hover { color: var(--stad-vk-linkhover); }

@media (max-width: 640px) {
    .stad-vk-omslag { height: 200px; }
    .stad-vk-inhoud { padding: 0 18px 20px; }
    .stad-vk-logo { width: 84px; height: 84px; margin-top: -40px; border-radius: 20px; }
    .stad-vk-logo span { font-size: 28px; }
    .stad-vk-badge { margin-left: 0; }
    .stad-blok { padding: 20px 18px; }
    .stad-kort { padding: 20px 18px 14px; }
    .stad-fotos-grid { grid-auto-rows: 120px; }
    /* Vier lege tegels onder elkaar is op een telefoon een halve schermlengte niets; twee zeggen
       hetzelfde. */
    .stad-fotos-grid.is-leeg { grid-template-columns: repeat(2, 1fr); }
    .stad-fotos-grid.is-leeg .stad-foto-plaats:nth-child(n+3) { display: none; }
}

/* De rechterkolom: de club die open staat (`aria-current="page"`, gezet door de rails) krijgt zijn
   kleur en een stip. Het gedeelde dorpsblad heeft voor `aria-current` al een tint en een gele
   linkerrand; deze regel komt later in de pagina en wint dus bewust, met de clubkleur in plaats van
   geel. De stip is een eigen flex-kind, dus de regel lijnt links uit en het pijltje gaat met een
   auto-marge naar rechts. */
.fr-clubs a[aria-current="page"] {
    justify-content: flex-start;
    background: var(--stad-club-tint);
    font-weight: 700;
    border-radius: 10px;
    border-left-color: var(--stad-club);
}
.fr-clubs a[aria-current="page"] .fr-clubs-stip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--stad-club); }
.fr-clubs a[aria-current="page"] .fr-pijl { margin-left: auto; }

/* Beheermodus (v014.11.341, ontwerp §7 stap 4): een balk boven de kaart, een bewerk-chip
   rechtsboven in elk blok en een "nog leeg"-vak voor wat er nog niet staat. Alleen voor wie de
   pagina mag bijhouden; de pagina zelf blijft wat bezoekers zien. De balk is bewust een lichte
   notitiekleur in dag én nacht: hij hoort niet bij de pagina, hij ligt erop. */
.stad-beheerbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    background: #fff7dc;
    border: 1px solid #ecd48a;
    border-radius: 14px;
    padding: 12px 16px;
    font: 400 14px/1.5 var(--stad-vk-sans);
    color: #1f2430;
}
.stad-beheerbalk p { margin: 0; flex: 1 1 280px; }
.stad-beheerbalk-pil {
    flex: none;
    font: 800 11px/1 var(--stad-vk-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: #1f2430;
    color: #fff;
    padding: 5px 9px;
    border-radius: 999px;
}
.stad-beheerbalk-uit { flex: none; font-weight: 700; color: #1f2430; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.stad-beheerbalk-uit:hover { color: #8c6612; }
/* De aan-knop is een gewone knop (geen badge: die heeft margin-left:auto en zou de echte badge
   uit positie duwen), met de gestippelde rand van de chips zodat hij als "beheer" leest. */
.stad-vk-beheerknop { border-style: dashed; border-color: var(--fr-knop, #1f2430); color: var(--fr-knop, #1f2430); }
/* De chip ligt op de hoek van zijn blok; daarvoor moet het blok een eigen positie hebben. */
.stad-profiel.is-beheer .stad-vk,
.stad-profiel.is-beheer .stad-vk-inhoud,
.stad-profiel.is-beheer .stad-blok { position: relative; }
.stad-chip {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    background: var(--stad-vk-kaart);
    border: 1.5px dashed var(--fr-knop, #1f2430);
    color: var(--fr-knop, #1f2430);
    font: 700 12.5px/1.2 var(--stad-vk-sans);
    padding: 6px 11px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.stad-chip:hover { background: var(--fr-knop, #1f2430); color: var(--fr-knoptekst, #fff); border-style: solid; }
/* In de kop van agenda en foto's staat de chip naast de link, niet in de hoek erover. */
.stad-blok-kop-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stad-blok-kop .stad-chip { position: static; }
.stad-vk > .stad-chip { top: 14px; right: 14px; }
.stad-leegblok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    border: 1.5px dashed var(--stad-vk-lijn);
    border-radius: 18px;
    padding: 22px 26px;
    min-width: 0;
}
.stad-leegblok-tekst { flex: 1 1 260px; min-width: 0; }
.stad-leegblok-tekst p + p { margin: 8px 0 0; font: 400 14.5px/1.5 var(--stad-vk-sans); color: var(--stad-vk-stil); max-width: 60ch; }
.stad-leeg-tekst { flex: 1 1 380px; }
.stad-leeg-gegevens { flex: 1 1 260px; }
@media (max-width: 640px) {
    /* Op een smal scherm staat de chip boven de inhoud van zijn blok, anders ligt hij over het
       kopje; en minstens 44 px hoog, want daar raakt een vinger hem. */
    .stad-blok > .stad-chip, .stad-vk-inhoud > .stad-chip { position: static; margin: 0 0 12px; }
    .stad-vk-inhoud > .stad-chip { margin: 16px 0 0; }
    .stad-chip { min-height: 44px; padding: 10px 14px; }
}

/* Het palet, dezelfde acht als VerenigingsprofielService::PALET. Witte tekst haalt op elk ervan
   4,5:1; daarom is er geen vrije kleurkiezer. Eén klasse, dus lage specificiteit, maar ná de
   :root-standaard en op het element zelf: daarmee wint hij van de overerving. (Klassen en geen
   attribuut met een waarde: de CSS-audit leest alle waarden van één attribuut als dezelfde selector.) */
.stad-kleur-groen { --stad-club: #2f7d4f; --stad-club-ink: #fff; }
.stad-kleur-oranje { --stad-club: #c4501a; --stad-club-ink: #fff; }
.stad-kleur-rood { --stad-club: #b42318; --stad-club-ink: #fff; }
.stad-kleur-roze { --stad-club: #b03a8c; --stad-club-ink: #fff; }
.stad-kleur-blauw { --stad-club: #1d4ed8; --stad-club-ink: #fff; }
.stad-kleur-paars { --stad-club: #6d28d9; --stad-club-ink: #fff; }
.stad-kleur-zeegroen { --stad-club: #0f766e; --stad-club-ink: #fff; }
.stad-kleur-oker { --stad-club: #8a6a12; --stad-club-ink: #fff; }

/* De tint: eerst een terugval voor een browser zonder color-mix, daarna het mengsel. Op de
   elementen zelf en na alles hierboven, zie het commentaar bij :root. */
.stad-profiel,
.fr-clubs a[aria-current="page"] { --stad-club-tint: var(--fr-tint, rgba(128, 128, 128, 0.12)); }
@supports (color: color-mix(in oklab, red 10%, white)) {
    .stad-profiel,
    .fr-clubs a[aria-current="page"] { --stad-club-tint: color-mix(in oklab, var(--stad-club) 12%, var(--fr-kaart, #fff)); }
}

/* ── Claimen en beheren (v014.11.340) ─────────────────────────────────────────
   De badge op het visitekaartje ("Beheerd door de vereniging" of "Nog niet geclaimd") en de
   pagina "Beheer je deze vereniging?". Zelfde tokens en bouwstenen als de rest. */
.stad-vk-badge a { color: var(--stad-vk-link); text-decoration: underline; }
.stad-vk-badge a:hover { color: var(--stad-vk-linkhover); }
.stad-claim {
    --stad-vk-kaart: var(--fr-kaart, #fff);
    --stad-vk-lijn: var(--fr-rand, #e2e4e8);
    --stad-vk-tekst: var(--fr-tekst, #1f2430);
    --stad-vk-stil: var(--fr-stil, #5f6472);
    --stad-vk-link: var(--fr-link, #1d4ed8);
    --stad-vk-linkhover: var(--fr-messingdonker, #8c6612);
    --stad-vk-serif: var(--fr-serif, Georgia, "Times New Roman", serif);
    --stad-vk-sans: var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
    --stad-vk-mono: var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    --stad-club: var(--fr-knop, #1f2430);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 720px;
    font: 400 15px/1.5 var(--stad-vk-sans);
    color: var(--stad-vk-tekst);
}
.stad-claim-terug { margin: 0; font: 600 13.5px/1.5 var(--stad-vk-sans); }
.stad-claim-terug a { color: var(--stad-vk-link); text-decoration: none; }
.stad-claim-terug a:hover { text-decoration: underline; }
.stad-claim-kop h1 { margin: 8px 0; font: 700 clamp(26px, 3.5vw, 34px)/1.15 var(--stad-vk-serif); letter-spacing: -0.01em; text-wrap: balance; }
.stad-claim-intro { margin: 0; font: 400 16px/1.55 var(--stad-vk-sans); color: var(--stad-vk-stil); max-width: 62ch; }
.stad-claim-blok p { margin: 0 0 12px; }
.stad-claim-blok .stad-blok-titel { margin: 0 0 10px; }
.stad-claim-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0 0 !important; }
.stad-claim-form { padding: 0; }
.stad-claim-form .stad-veld > span { color: var(--stad-vk-stil); }
.stad-claim-form .stad-veld input,
.stad-claim-form .stad-veld textarea { border-color: var(--stad-vk-lijn); background: var(--stad-vk-kaart); color: var(--stad-vk-tekst); border-radius: 12px; }
.stad-claim-form .stad-veld input:focus,
.stad-claim-form .stad-veld textarea:focus { outline: 2px solid var(--stad-club); outline-offset: 1px; }
.stad-claim-form button.stad-vk-knop { border: 0; cursor: pointer; font-family: var(--stad-vk-sans); }

.stad-venster-bediening { position: relative; height: 36px; margin: -12px -10px 8px; }
.stad-venster-bediening .stad-venster-kruis { top: 0; right: 0; }
.stad-swipekop { display: none; }
.stad-venster-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.stad-venster-nav button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--fr-rand, #ddd); border-radius: 8px; background: var(--fr-kaart, #fff); color: var(--fr-tekst, #111827); }
.stad-venster-nav button:disabled { opacity: .4; cursor: default; }
.stad-venster-nav span { font-size: 13px; }
@media (max-width: 1024px) {
    .stad-venster { z-index: 1400; padding: 0; align-items: flex-end; }
    /* De vaste overlay volgt het scherm ook bij de letterschaal; dvh zou nogmaals meezoomen. */
    .stad-venster-kaart { max-width: 100%; max-height: calc(100% - 12px); padding: 0 18px max(18px, env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
    .stad-venster-bediening { position: sticky; top: 0; z-index: 2; height: 44px; margin: 0 -18px 6px; background: var(--fr-kaart, #fff); }
    .stad-venster-bediening .stad-venster-kruis { right: 8px; }
    .stad-venster-kicker { margin-right: 0; font-size: 12px; }
    .stad-venster-kop { font-size: 18px; line-height: 1.35; margin-bottom: 14px; }
    .stad-venster-lijst { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 12px; font-size: 14px; line-height: 1.45; }
    .stad-venster-lijst dt, .stad-venster-lijst dd { padding: 7px 0; border-bottom: 1px solid var(--fr-rand, #e5e7eb); overflow-wrap: anywhere; }
    .stad-venster-lijst dd { font-weight: 500; }
    .stad-venster-nav { position: sticky; bottom: calc(-1 * max(18px, env(safe-area-inset-bottom))); z-index: 1; margin: 14px -18px calc(-1 * max(18px, env(safe-area-inset-bottom))); padding: 10px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--fr-rand, #e5e7eb); background: var(--fr-kaart, #fff); }
    .stad-venster-nav button { padding: 8px 10px; font: 600 14px/1.3 var(--fr-sans, system-ui, sans-serif); white-space: nowrap; }
    .stad-venster-nav span { font-size: 12px; white-space: nowrap; }
    .stad-swipekop { display: flex; align-items: center; justify-content: center; height: 44px; margin: 0 60px; touch-action: none; }
    .stad-swipekop > span[aria-hidden] { width: 42px; height: 4px; border-radius: 2px; background: var(--fr-rand, #ddd); pointer-events: none; }
    .stad-venster-kruis { min-width: 44px; min-height: 44px; }
    body:has(.dorps-onderbalk) .fr-rubriek-melding .fr-rubriek-kop h1 { font-size: 28px; line-height: 1.15; }
    body:has(.dorps-onderbalk) .fr-rubriek-melding .fr-rubriek-intro { font-size: 14px; line-height: 1.4; margin: 8px 0 12px; }
    body:has(.dorps-onderbalk) .fr-rubriek-melding .fr-filters { gap: 6px; margin-bottom: 12px; }
    body:has(.dorps-onderbalk) .fr-rubriek-melding .fr-chip { min-height: 44px; padding: 8px 12px; }
}

.stad-veeg-status:empty { display: none; }
.stad-veeg-status { position: absolute; z-index: 3; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; padding: 10px 18px; border-radius: 24px; background: var(--fr-tekst, #17212b); color: var(--fr-kaart, #fff); white-space: nowrap; pointer-events: none; }
@media (max-width: 1024px) {
    .stad-venster { overflow: hidden; }
    .stad-venster-kaart.cms-swipe-dragging, .stad-venster-kaart.stad-veeg-gereed { animation: none; }
    .stad-venster-kaart [data-swipe-handle] { touch-action: none; user-select: none; -webkit-user-select: none; }
    .stad-veeg-voorbeeld { position: absolute; bottom: 0; left: 0; animation: none; pointer-events: none; }
}

.stad-nieuwskaart-beeld img.nieuws-bronlogo {
    object-fit: contain;
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
}