@charset "utf-8";
/* Alleen voor de weergavepagina; het bestaande coincard.css blijft behouden.
 * Alle schermen gebruiken dezelfde kaarten met voor-/achterkant en tekst eronder.
 */
/* De browser verzorgt het scrollen; er zijn geen frames of binnen-scrollvakken.
 * Deze html-regel staat alleen in het stylesheet van de weergavepagina.
 */
html { width: 100%; min-width: 0; height: auto; min-height: 100%; margin: 0; padding: 0; overflow: auto; }
/* De vertrouwde pc-pagina wordt direct weergegeven, zonder buitenste iframe. */
body[data-weergave-mode="pc"] { width: 100%; min-width: 0; margin: 0; padding: 0; overflow: visible; }
body[data-weergave-mode="pc"] #kader_site { margin-left: auto; margin-right: auto; position: relative; }
.weergave-herdenking { width: 100%; max-width: 100%; min-width: 0; height: auto;
    margin: 0; padding: 0; overflow: visible; color: #e2dede; font-family: "Economica", sans-serif; }
.weergave-mobiel { display: block; width: 100%; max-width: 1500px; min-width: 0;
    margin: 0 auto; padding: 16px; }
.weergave-mobiel, .weergave-mobiel * { box-sizing: border-box; }
.weergave-kop { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; }
.weergave-logo { flex: 0 0 auto; }
.weergave-logo img { display: block; max-width: 100%; height: auto; }
.weergave-kop h1 { color: var(--weergave-titel-kleur, #f69522); font: inherit;
    font-size: var(--weergave-kop-letter, 18px); line-height: 1.4; overflow-wrap: anywhere; }
.weergave-kop p { margin-top: 6px; font-size: var(--weergave-kop-letter, 18px); line-height: 1.4; }
.weergave-navigatie { margin-bottom: 16px; font-size: 18px; }
.weergave-navigatie summary { width: fit-content; min-height: var(--weergave-knop-hoogte, 40px);
    padding: 4px 10px; line-height: calc(var(--weergave-knop-hoogte, 40px) - 10px);
    border: 1px solid #ee9f16; border-radius: 5px; cursor: pointer; }
.weergave-menulinks { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.weergave-menulinks a { display: flex; align-items: center; min-height: var(--weergave-knop-hoogte, 40px); padding: 4px 10px;
    background: #303030; border: 1px solid #606060; border-radius: 5px; }
.weergave-navigatie p { margin-top: 8px; line-height: 1.4; }
.weergave-typemenu { flex-basis: 100%; }
.weergave-typelinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; padding: 8px 0; }
.weergave-typelinks a { min-width: 0; overflow-wrap: anywhere; }
.weergave-typelinks a[aria-current="page"] { border-color: #ee9f16; color: #f69522; background: #262017; }
.weergave-typeoverzicht { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.weergave-typeoverzicht a { display: flex; align-items: center; min-height: var(--weergave-knop-hoogte, 40px);
    padding: 8px 12px; border: 1px solid #ee9f16; border-radius: 5px;
    background: #303030; font-size: 18px; overflow-wrap: anywhere; }

/* Zo veel kolommen als passen. Ook een grotere ingestelde foto past op de telefoon. */
.weergave-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--weergave-item-breedte, 225px)), 1fr));
    gap: 24px 16px; align-items: stretch; }
.weergave-item { display: flex; flex-direction: column; width: var(--weergave-item-breedte, 225px); max-width: 100%;
    min-width: 0; justify-self: center; }
.weergave-fotovlak { position: relative; display: flex; align-items: center; justify-content: center;
    width: var(--weergave-vak-breedte, 225px); max-width: 100%; align-self: center; height: var(--weergave-vak-hoogte, 140px); background: var(--weergave-foto, url("F1/thumb/L.webp")) center / 100% 100%; }
.weergave-afbeelding { max-width: min(100%, var(--weergave-foto-breedte, 215px));
    max-height: var(--weergave-foto-hoogte, 131px); width: var(--weergave-foto-breedte, 215px); height: var(--weergave-foto-hoogte, 131px); object-fit: fill; }
.weergave-placeholder { width: var(--weergave-vak-breedte, 225px); height: var(--weergave-vak-hoogte, 140px); max-width: 100%; max-height: var(--weergave-vak-hoogte, 140px); }
.weergave-beeldknop { display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.weergave-beeldknop:disabled { cursor: default; opacity: 1; }
.weergave-fotovlak > [aria-hidden="true"] { pointer-events: none; }
.weergave-zijde { margin-top: 5px; color: #edd00d; font-size: 18px; line-height: 1.4; }
.weergave-wisselknop, .weergave-extraknop, .weergave-extralink { display: flex; align-items: center; justify-content: center;
    width: 100%; min-width: 0; min-height: var(--weergave-knop-hoogte, 40px); margin: 0; padding: 4px 6px;
    font: 18px "Economica", sans-serif; color: #e2dede; background: #303030;
    line-height: 1.2; text-align: center; overflow-wrap: anywhere;
    border: 1px solid #ee9f16; border-radius: 5px; cursor: pointer; }
.weergave-wisselknop { grid-column: 1; }
.weergave-extraknop, .weergave-extralink { grid-column: 2; }
.weergave-wisselknop:disabled, .weergave-extraknop:disabled { display: none; }
.weergave-extraknop[aria-pressed="true"] { border-color: #2ac3de; background: #23383a; }
.weergave-extralink { text-align: center; }
/* Eén gelijke knoppenrij voor iedere kaart, zonder een extra lege rij eronder. */
.weergave-acties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; gap: 6px; min-height: var(--weergave-knop-hoogte, 40px); margin-top: 5px; }
.weergave-info { width: 100%; flex-grow: 1; margin-top: 6px; padding: 10px; min-height: var(--weergave-tekst-hoogte, 140px);
    background: var(--weergave-tekst, url("F1/thumb/KL.webp")) center / 100% 100%;
    font-size: var(--weergave-info-letter, 16px); line-height: 1.25; overflow-wrap: normal; padding: 8px; }
.weergave-galerijbeeld { display: flex; align-items: center; justify-content: center;
    height: var(--weergave-vak-hoogte, 140px); width: var(--weergave-vak-breedte, 225px); max-width: 100%; align-self: center; background: var(--weergave-foto, url("F1/thumb/L.webp")) center / 100% 100%; }
.weergave-galerijfoto { max-width: 100%; max-height: var(--weergave-foto-hoogte, 131px); width: var(--weergave-foto-breedte, 215px); height: var(--weergave-foto-hoogte, 131px); object-fit: fill; }
.weergave-terugknop { display: inline-flex; align-items: center; min-height: var(--weergave-knop-hoogte, 40px); margin: 12px 0;
    padding: 4px 10px; border: 1px solid #ee9f16; border-radius: 5px;
    background: #303030; color: #e2dede; font-size: 18px; }
.weergave-caption { margin-top: 4px; min-height: 50.4px; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.weergave-caption a { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; vertical-align: middle; }
.weergave-voet { margin-top: 28px; border-top: 1px solid #606060; padding-top: 12px;
    font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.weergave-voet p + p { margin-top: 8px; }
.weergave-voet a { color: #f69522; text-decoration: underline; }
.weergave-skip { position: absolute; top: -100px; left: 16px; padding: 12px;
    background: #151515; color: #f69522; z-index: 1000; }
.weergave-skip:focus { top: 8px; }
@media (max-width: 520px) {
    .weergave-kop { flex-direction: column; align-items: flex-start; gap: 12px; }
    .weergave-logo { width: var(--weergave-logo-breedte, 140px); }
}
@media (max-width: 256px) {
    .weergave-typelinks { grid-template-columns: minmax(0, 1fr); }
    .weergave-grid { grid-template-columns: minmax(0, 1fr); }
    .weergave-item { width: 100%; }
}

/* Help en zoeken gebruiken hetzelfde menu zonder een breed binnenframe. */
.weergave-zoekformulier { display: grid; grid-template-columns: minmax(0, 420px); gap: 8px; font-size: 18px; margin-bottom: 20px; }
.weergave-zoekformulier input, .weergave-zoekformulier select { width: 100%; min-width: 0; min-height: 40px; padding: 6px 8px; font: inherit; color: #e2dede; background: #303030; border: 1px solid #606060; border-radius: 5px; }
.weergave-zoekformulier button { margin: 0; font: inherit; }
.weergave-helptekst { max-width: 100%; overflow-wrap: anywhere; font-size: 18px; line-height: 1.4; }
.weergave-helptekst table { width: 100%; max-width: 100%; table-layout: auto; }
.weergave-helptekst img { max-width: 100%; height: auto; }
.weergave-helptekst input, .weergave-helptekst textarea { max-width: 100%; box-sizing: border-box; }
.weergave-helptekst iframe { max-width: 100%; position: static !important; }
.weergave-zoekpaginas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
@media (max-width: 900px) {
    .weergave-helptekst table, .weergave-helptekst tbody, .weergave-helptekst tr, .weergave-helptekst td { display: block; width: 100%; height: auto; text-align: left; }
    .weergave-helptekst td { padding: 3px 0; }
    .weergave-helptekst input, .weergave-helptekst textarea { width: 100%; }
}

/* De geselecteerde zijden blijven herkenbaar tijdens scrollen. */
.weergave-wisselknop[aria-pressed="true"] { border-color: #d785ef; background: #38243f; }
.weergave-info [class*="_16"], .weergave-info [class*="_18"] { font-size: var(--weergave-info-letter, 16px); }
.weergave-info .weergave-itemcode { font-size: calc(var(--weergave-info-letter, 16px) - 1px); white-space: nowrap; }

.weergave-helptekst, .weergave-helptekst * { min-width: 0; overflow-wrap: anywhere; white-space: normal !important; }
.weergave-helptekst table { max-width: 100% !important; }
.weergave-contactlayout { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 600px); gap: 32px; }
.weergave-contactformulier { display: grid; gap: 8px; }
.weergave-contactformulier input, .weergave-contactformulier textarea { width: 100%; min-height: 40px; padding: 8px; font: inherit; border: 1px solid #606060; border-radius: 5px; }
.weergave-contactformulier label { color: #f69522; }
.weergave-antispam { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.weergave-antispam button { min-height: 40px; padding: 6px 10px; font: inherit; }
.weergave-contactuitleg img { margin-top: 16px; width: 100%; max-width: 600px; height: auto; }
.weergave-links-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.weergave-links-lijst > h2 { grid-column: 1 / -1; }
.weergave-linkkaart { padding: 12px; border: 1px solid #606060; border-radius: 5px; }
.weergave-linkkaart h2 { font: inherit; color: #f69522; }
@media (max-width: 900px) {
    .weergave-contactlayout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .weergave-helptekst td { width: 100% !important; max-width: 100%; }
}

.weergave-zoekresultaatkop { margin: 12px 0 20px; line-height: 1.4; }

.weergave-galerijfoto.weergave-placeholder { width: var(--weergave-vak-breedte, 225px); height: var(--weergave-vak-hoogte, 140px); max-height: var(--weergave-vak-hoogte, 140px); }

/* Status boven op biljet in MEMO EURO AFWEZIG, ook op smalle schermen. */
.weergave-fotovlak > .afwezig2, .weergave-fotovlak > .onbekend2 { z-index:4; pointer-events:none; background-repeat:no-repeat; }