/* Card styles, copied unchanged from reference/teamplaatjes-demo.html (lines 118-204, 208).
   Drawn by static/js/card.js; all sizes are cqw (1cqw = 1/100 of the card width), so a card
   looks the same at any size, on screen and in print. Needs the --font-* variables from style.css. */
/* De kaart: 55 x 85 mm. Alles schaalt mee met de breedte (1cqw = 1/100 kaartbreedte, hoogte = 154,5cqw).
   Onderaan staat een tekstblok van variabele hoogte; de foto vult automatisch alle ruimte erboven. */
.card{container-type:inline-size;position:relative;aspect-ratio:55/85;font-family:var(--font-label);text-align:left}
.card .cd{position:absolute;inset:0;overflow:hidden;border-radius:2.4cqw;color:var(--on1);background:var(--c1);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;box-shadow:0 1px 2px rgba(0,0,0,.25),0 10px 24px -12px rgba(0,0,0,.45)}
.card .ph{position:relative;min-height:0;overflow:hidden;background:color-mix(in srgb,var(--c1) 78%,#000)}
.card .ph img,.card .ph svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.card .ph img{object-fit:cover;object-position:50% 22%}
.card .ph svg{color:var(--c2);opacity:.4}
/* Watermark over the photo of an on-screen preview (card.js option `watermark`); never in the print export. */
.card .ph .wm{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='120'%3E%3Ctext x='85' y='64' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='15' fill='white' fill-opacity='.5' stroke='black' stroke-opacity='.28' stroke-width='.7' transform='rotate(-28 85 60)'%3EWE ARE ALL STARS%3C/text%3E%3C/svg%3E");background-size:50cqw auto;background-repeat:repeat}
.card .nr{position:absolute;font-family:var(--font-display);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.card .info{position:relative;display:flex;flex-direction:column;gap:2.6cqw;min-width:0}
.card .pos{font-weight:600;font-size:3.4cqw;letter-spacing:.14em;text-transform:uppercase;opacity:.85;line-height:1.2}
.card .nm{font-family:var(--font-display);font-weight:800;font-size:9cqw;line-height:.95;text-transform:uppercase;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.8cqw}
.card .sts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;padding-top:2cqw;border-top:.7cqw solid currentColor}
.card .st b{display:block;font-family:var(--font-display);font-weight:800;font-size:6.8cqw;line-height:1;font-variant-numeric:tabular-nums}
.card .st span{display:block;font-weight:500;font-size:2.9cqw;letter-spacing:.08em;text-transform:uppercase;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ft{display:flex;justify-content:space-between;gap:3cqw;font-weight:500;font-size:2.8cqw;letter-spacing:.12em;text-transform:uppercase;opacity:.8;white-space:nowrap}
.card .ft span:first-child{overflow:hidden;text-overflow:ellipsis}

/* Sjabloon: Klassiek (lijst om de hele kaart, nummerlabel rechtsonder in de foto) */
.t-klassiek .cd{padding:7cqw 7cqw 0}
.t-klassiek .cd::before{content:"";position:absolute;inset:3.2cqw;border:.9cqw solid var(--c2);border-radius:.6cqw;pointer-events:none;z-index:2}
.t-klassiek .ph{border-radius:0}
.t-klassiek .nr{right:0;bottom:0;padding:1.8cqw 3.6cqw;font-size:10cqw;background:var(--c3);color:var(--on3)}
.t-klassiek .info{padding:3.6cqw 2cqw 7.5cqw}

/* Sjabloon: Diagonaal (origineel): foto over de bovenste twee derde, schuin vlak in de tweede kleur.
   Het vlak hoort bij de naam en is net zo hoog als de naam nodig heeft. De tekst staat van onderaf gestapeld. */
.t-diagonaal .cd{display:block}
.t-diagonaal .ph{position:absolute;left:0;right:0;top:0;height:94cqw;z-index:0}
.t-diagonaal .nr{top:3cqw;right:6cqw;font-size:26cqw;color:transparent;-webkit-text-stroke:.9cqw var(--c3);z-index:3}
.t-diagonaal .info{position:absolute;left:0;right:0;bottom:5.5cqw;padding:0 8cqw;gap:0;z-index:3}
.t-diagonaal .id{margin:0 -8cqw;padding:21cqw 8cqw 12cqw;background:var(--c2);color:var(--on2);clip-path:polygon(0 14cqw,100% 0,100% calc(100% - 14cqw),0 100%)}
.t-diagonaal .sts{position:relative;z-index:1;margin-top:-4cqw;padding-top:7.3cqw}
.t-diagonaal .ft{margin-top:2.6cqw}

/* Sjabloon: Schuinrand (foto over de hele kaart, schuin tekstvlak in de tweede kleur) */
.t-schuinrand .ph{grid-row:1 / 3;grid-column:1}
.t-schuinrand .nr{top:4cqw;right:6cqw;font-size:22cqw;color:var(--c3);text-shadow:0 .7cqw 0 rgba(0,0,0,.35)}
.t-schuinrand .info{grid-row:2;grid-column:1;background:var(--c2);color:var(--on2);padding:11cqw 8cqw 6.5cqw;clip-path:polygon(0 8cqw,100% 0,100% 100%,0 100%)}

/* Sjabloon: Donker (foto loopt onderaan uit in zwart, kleur als accent) */
.t-donker .cd{background:#10141b;color:#fff}
.t-donker .cd::before{content:"";position:absolute;left:0;right:0;top:0;height:2.4cqw;background:linear-gradient(90deg,var(--c1),var(--c2));z-index:3}
.t-donker .ph{grid-row:1 / 3;grid-column:1;background:#1a202b;-webkit-mask-image:linear-gradient(#000 60%,transparent 93%);mask-image:linear-gradient(#000 60%,transparent 93%)}
.t-donker .ph svg{color:#fff;opacity:.12}
.t-donker .nr{left:7cqw;top:8cqw;font-size:16cqw;color:var(--acc)}
.t-donker .info{grid-row:2;grid-column:1;padding:6cqw 8cqw 6.5cqw}
.t-donker .pos{color:var(--acc);opacity:1}
.t-donker .sts{border-color:var(--acc)}

/* Sjabloon: Retro (jaren 70 ruilkaart: witte rand, gekleurde lijst, wimpel met teamnaam over de foto) */
.t-retro .cd{background:#fff;color:#15181d;padding:4.5cqw 4.5cqw 5.5cqw;grid-template-rows:minmax(0,1fr) auto auto auto}
.t-retro .info{display:contents}
.t-retro .ph{grid-row:1;border:1.4cqw solid var(--c1)}
.t-retro .nr{left:2.5cqw;bottom:5cqw;width:14cqw;height:14cqw;display:grid;place-items:center;border-radius:50%;background:var(--c3);color:var(--on3);font-size:7.5cqw;border:.8cqw solid #fff}
.t-retro .ft{grid-row:2;justify-self:start;position:relative;z-index:2;margin:-3.4cqw 0 0 -.6cqw;padding:1.5cqw 6cqw 1.5cqw 3cqw;background:var(--c1);color:var(--on1);opacity:1;clip-path:polygon(0 0,100% 0,94% 100%,0 100%);font-size:3cqw;gap:3cqw}
.t-retro .id{grid-row:3;padding:2.8cqw 1cqw 0}
.t-retro .sts{grid-row:4;margin:2.8cqw 1cqw 0;border-top-color:#15181d}

/* Sjabloon: Foil (glanzende metaalrand, donker tekstvlak, lichtstreep over de kaart) */
.t-foil .cd{padding:4cqw;color:#fff;background:linear-gradient(135deg,var(--c1) 0%,color-mix(in srgb,var(--c2) 60%,#fff) 24%,var(--c1) 44%,var(--c2) 68%,color-mix(in srgb,var(--c1) 60%,#fff) 86%,var(--c1) 100%)}
.t-foil .cd::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.38) 44%,transparent 58%);pointer-events:none;z-index:4}
.t-foil .ph{border:.7cqw solid rgba(255,255,255,.85)}
.t-foil .nr{top:2.5cqw;right:3cqw;font-size:13cqw;color:var(--c3s,#fff);text-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.6)}
.t-foil .info{margin-top:3cqw;background:rgba(8,10,14,.8);padding:3.4cqw 4cqw 4cqw}
.t-foil .pos{color:var(--acc);opacity:1}
.t-foil .sts{border-top-color:rgba(255,255,255,.5)}

/* Sjabloon: Stadion (foto over de hele kaart, onderaan in de teamkleur, grote naam) */
.t-stadion .ph{grid-row:1 / 3;grid-column:1;background:color-mix(in srgb,var(--c1) 70%,#000)}
.t-stadion .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--c1) 0%,color-mix(in srgb,var(--c1) 88%,transparent) 26%,transparent 62%)}
.t-stadion .nr{top:3cqw;left:6cqw;font-size:20cqw;color:var(--c3);text-shadow:0 .7cqw 0 rgba(0,0,0,.35);z-index:2}
.t-stadion .info{grid-row:2;grid-column:1;padding:6cqw 7cqw 6.5cqw;z-index:2}
.t-stadion .nm{font-size:12cqw;line-height:.9}

/* Sjabloon: Sticker (gestreepte achtergrond, bandje met teamnaam, witte naamplaat over de foto) */
.t-sticker .cd{padding:4cqw;grid-template-rows:auto minmax(0,1fr) auto auto;background:repeating-linear-gradient(135deg,var(--c1) 0 5cqw,color-mix(in srgb,var(--c1) 86%,var(--c2)) 5cqw 10cqw)}
.t-sticker .info{display:contents}
.t-sticker .ft{grid-row:1;opacity:1;background:var(--c2);color:var(--on2);padding:1.8cqw 3cqw;margin-bottom:3cqw;clip-path:polygon(0 0,100% 0,97% 100%,0 100%)}
.t-sticker .ph{grid-row:2;border:1cqw solid #fff}
.t-sticker .nr{right:0;bottom:0;padding:1.6cqw 3.4cqw;font-size:10cqw;background:var(--c3);color:var(--on3)}
.t-sticker .id{grid-row:3;position:relative;z-index:2;background:#fff;color:#111;margin:-5cqw 7cqw 0 0;padding:2.4cqw 3cqw}
.t-sticker .sts{grid-row:4;margin-top:3cqw}

/* Clublogo: standaard linksboven in de foto; waar het rugnummer daar staat, rechtsboven */
.card .ph img.lg{inset:auto;top:3.5cqw;left:3.5cqw;width:15cqw;height:15cqw;object-fit:contain;object-position:center;z-index:4;filter:drop-shadow(0 .4cqw .9cqw rgba(0,0,0,.5))}
.t-donker .ph img.lg,.t-stadion .ph img.lg{left:auto;right:5cqw;top:6cqw}
.card .nr:empty{display:none}

/* The optional third colour (--c3, falls back to the second colour; --c3s only exists when chosen)
   is for details: the shirt number everywhere, and the accent (--acc: position, first name, ...)
   in the dark templates. */
/* ===== Templates added after the demo ==========================================
   Inspired by collectible-card designs (own designs, nothing copied: no brands,
   logos or emblems). Same markup as the others (card.js); colours come only from
   the team's two colours. Extras available to every template:
   .sn (serial "07/20", hidden unless a template shows it), .nm .fn / .nm .ln
   (first name / surname), --nl / --nt on .nm (name lengths, for fitting long names:
   font-size: min(cap, calc(width / (--nl * glyph-width-in-em)))), and
   data-season / data-team on .cd (content: attr(...)). */
.card .sn{display:none;position:absolute;z-index:6;font-family:var(--font-label);font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.card .sn:empty{display:none!important}
.card .d1,.card .d2{display:none;position:absolute;pointer-events:none}

/* --- Holo: dark glass, angled tabs (no outline, no cut corner: the photo runs to the edge and the card is a plain rounded rectangle, easy to print and cut) --- */
.t-holo .cd{color:#fff;background:color-mix(in srgb,var(--c1) 20%,#070a14)}
.t-holo .ph{grid-row:1/3;grid-column:1;background:#10162a;-webkit-mask-image:linear-gradient(#000 58%,transparent 90%);mask-image:linear-gradient(#000 58%,transparent 90%)}
.t-holo .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 18%,color-mix(in srgb,var(--c2) 40%,transparent) 36%,rgba(255,255,255,.28) 46%,color-mix(in srgb,var(--c1) 45%,transparent) 58%,transparent 76%);mix-blend-mode:screen;opacity:.7}
.t-holo .ph svg{color:#fff;opacity:.12}
.t-holo .nr{left:0;top:0;width:24cqw;padding:4.5cqw 0 16cqw;text-align:center;font-size:11cqw;color:var(--acc);background:color-mix(in srgb,var(--c1) 55%,#070a14);clip-path:polygon(0 0,100% 0,100% 62%,0 100%);z-index:3}
.t-holo .ph img.lg{left:6cqw;top:4.5cqw;width:12cqw;height:12cqw;z-index:4}
/* With a club logo the coloured tab holds the logo on top and the number below it
   (and stays when there is a logo but no number). */
.t-holo .ph:has(img.lg) .nr{padding-top:18cqw}
.t-holo .ph:has(img.lg) .nr:empty{display:block;padding-bottom:10cqw}   /* no number: a little room below the logo (about the space above it), not the full number space */
.t-holo .cd::after{content:attr(data-season);position:absolute;top:0;right:0;width:11cqw;height:34cqw;box-sizing:border-box;padding:5cqw 3.6cqw 0 0;writing-mode:vertical-rl;font-family:var(--font-label);font-weight:600;font-size:3.6cqw;letter-spacing:.2em;color:#fff;background:color-mix(in srgb,var(--c2) 50%,#070a14);clip-path:polygon(0 0,100% 0,100% 100%,0 80%);z-index:3}
.t-holo .cd[data-season=""]::after{display:none}
.t-holo .info{grid-row:2;grid-column:1;padding:0 7.5cqw 9cqw;gap:1.2cqw;z-index:2}
.t-holo .sts{order:-1;border-top:0;padding:0;gap:0;margin-bottom:1.2cqw}
.t-holo .st{display:flex;flex-direction:column-reverse;gap:.3cqw;padding:0 3cqw}
.t-holo .st:first-child{padding-left:0}
.t-holo .st+.st{border-left:.35cqw solid rgba(255,255,255,.25)}
.t-holo .st b{font-family:var(--font-label);font-weight:600;font-size:5.4cqw;letter-spacing:.02em}
.t-holo .st span{font-size:2.6cqw;opacity:.6}
.t-holo .pos{color:var(--acc);opacity:1}
.t-holo .nm{display:block;margin-top:.4cqw;line-height:1}
.t-holo .fn,.t-holo .ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.t-holo .fn{font-family:var(--font-display);font-weight:900;font-size:min(9.5cqw,calc(78cqw / (var(--nl) * .5)));letter-spacing:.02em}
.t-holo .ln{font-family:var(--font-body);font-weight:400;font-size:min(10.5cqw,calc(78cqw / (var(--nl) * .66)));letter-spacing:.03em}
/* A single name (no first name) is the bold one, not the light surname style. */
.t-holo .ln:only-child{font-family:var(--font-display);font-weight:900;font-size:min(11.5cqw,calc(78cqw / (var(--nl) * .5)));letter-spacing:.02em}
.t-holo .ft{margin-top:2.4cqw;align-self:flex-start;max-width:100%;padding:1.5cqw 4.5cqw;border-radius:99px;background:color-mix(in srgb,var(--c1) 72%,#000);box-shadow:inset 0 0 0 .35cqw var(--c2);color:#fff;opacity:1;font-size:2.9cqw;font-weight:600}
.t-holo .ft span:first-child{overflow:hidden;text-overflow:ellipsis}
.t-holo .ft span:last-child{display:none}
.t-holo .sn{display:block;right:7.5cqw;bottom:9.6cqw;font-size:3.2cqw;color:rgba(255,255,255,.6)}

/* --- Honingraat: honeycomb pattern, photo in a shield shape, big outlined-style number --- */
.t-honingraat .cd{border-radius:3.4cqw;color:var(--on1);background:linear-gradient(160deg,color-mix(in srgb,var(--c1) 62%,#fff) 0%,var(--c1) 42%,color-mix(in srgb,var(--c1) 78%,#000) 100%)}
.t-honingraat .cd::before{content:"";position:absolute;inset:0;background:var(--on1);opacity:.22;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='black' stroke-width='3'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");-webkit-mask-size:12cqw auto;mask-size:12cqw auto;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.t-honingraat .ph{grid-row:1;grid-column:1;background:none}
.t-honingraat .ph img:not(.lg),.t-honingraat .ph svg{inset:auto;left:6cqw;top:15cqw;width:88cqw;height:calc(100% - 15cqw);clip-path:polygon(0 0,100% 0,100% 90%,50% 100%,0 90%);object-position:50% 20%}
.t-honingraat .ph svg{color:var(--on1);opacity:.25}
.t-honingraat .nr{left:7cqw;bottom:6cqw;font-size:19cqw;color:var(--c3);text-shadow:0 .7cqw 0 rgba(0,0,0,.35);z-index:3}
.t-honingraat .ph img.lg{left:auto;right:6cqw;top:4.5cqw;width:13cqw;height:13cqw}
.t-honingraat .cd::after{content:attr(data-season);position:absolute;left:6.5cqw;top:5.5cqw;font-family:var(--font-label);font-weight:600;font-size:3.6cqw;letter-spacing:.14em;opacity:.85}
.t-honingraat .sn{display:block;left:6.5cqw;top:10.2cqw;font-size:4.4cqw}
.t-honingraat .info{grid-row:2;grid-column:1;padding:3.4cqw 7cqw 6cqw;gap:1.4cqw}
.t-honingraat .pos{opacity:.8}
.t-honingraat .nm{display:block;line-height:.95;margin-top:0}
.t-honingraat .fn{display:block;font-family:var(--font-label);font-weight:600;font-size:4.2cqw;letter-spacing:.22em;text-transform:uppercase;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-honingraat .ln{display:block;font-family:var(--font-display);font-weight:900;font-size:min(13cqw,calc(86cqw / (var(--nl) * .5)));text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-honingraat .sts{padding-top:2.2cqw;border-top-width:.4cqw;gap:3cqw}
.t-honingraat .st{display:flex;flex-direction:column-reverse;gap:.4cqw}
.t-honingraat .st b{font-size:5.6cqw}
.t-honingraat .ft span:last-child{display:none}

/* --- Metaal: brushed metal in the first colour, framed photo, stacked name, hex badge --- */
.t-metaal .cd{color:var(--on1);background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 .5cqw,transparent .5cqw 2.2cqw),linear-gradient(115deg,var(--c1) 0%,color-mix(in srgb,var(--c1) 55%,#fff) 16%,var(--c1) 30%,color-mix(in srgb,var(--c1) 70%,#000) 52%,color-mix(in srgb,var(--c1) 50%,#fff) 72%,var(--c1) 100%)}
.t-metaal .cd::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3) 44%,transparent 58%);pointer-events:none;z-index:4}
.t-metaal .ph{grid-row:1/3;grid-column:1;margin:3.2cqw 3.2cqw 0;border-radius:1.4cqw;box-shadow:0 0 0 .5cqw rgba(255,255,255,.55);background:color-mix(in srgb,var(--c1) 65%,#000);-webkit-mask-image:linear-gradient(#000 60%,transparent 93%);mask-image:linear-gradient(#000 60%,transparent 93%)}
.t-metaal .ph svg{color:var(--on1);opacity:.16}
.t-metaal .nr{left:2cqw;top:2cqw;width:14cqw;height:14cqw;display:grid;place-items:center;font-size:8.5cqw;background:var(--c3);color:var(--on3);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%,0 22%);z-index:3}
.t-metaal .ph img.lg{left:3cqw;top:20cqw;width:12cqw;height:12cqw}
.t-metaal .sn{display:grid;place-items:center;right:5.5cqw;top:5.5cqw;width:16cqw;height:18cqw;background:var(--c2);color:var(--on2);font-size:3.9cqw;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.t-metaal .info{grid-row:2;grid-column:1;padding:6cqw 7.5cqw 6.5cqw;gap:1.8cqw;z-index:2}
.t-metaal .pos{opacity:.85}
.t-metaal .nm{display:block;line-height:.9;margin-top:0}
.t-metaal .fn,.t-metaal .ln{display:block;font-family:var(--font-display);font-weight:900;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:min(13cqw,calc(84cqw / (var(--nl) * .5)));letter-spacing:.01em}
.t-metaal .sts{border-top:.4cqw solid color-mix(in srgb,currentColor 55%,transparent);padding-top:2cqw}
.t-metaal .st{display:flex;flex-direction:column-reverse;gap:.3cqw}
.t-metaal .st b{font-size:5.6cqw}

/* --- Vuur: smouldering colour, white bars, photo on a slant, name running up the side --- */
.t-vuur .cd{display:block;color:#fff;background:linear-gradient(rgba(0,0,0,.32),rgba(0,0,0,.32)),radial-gradient(60% 34% at 20% 12%,color-mix(in srgb,var(--c2) 62%,transparent),transparent 72%),radial-gradient(55% 38% at 86% 38%,color-mix(in srgb,var(--c1) 80%,transparent),transparent 74%),radial-gradient(70% 40% at 40% 78%,color-mix(in srgb,var(--c1) 60%,transparent),transparent 72%),radial-gradient(40% 25% at 95% 8%,color-mix(in srgb,var(--c2) 40%,transparent),transparent 70%),color-mix(in srgb,var(--c1) 28%,#0e0402)}
.t-vuur .cd::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62cqw;background:repeating-linear-gradient(104deg,#fff 0 2.4cqw,transparent 2.4cqw 5cqw);-webkit-mask-image:linear-gradient(32deg,#000 8%,transparent 62%);mask-image:linear-gradient(32deg,#000 8%,transparent 62%);opacity:.92}
.t-vuur .cd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:27cqw;background:#fff;clip-path:polygon(0 30%,100% 0,100% 100%,0 100%);z-index:1}
.t-vuur .ph{position:absolute;inset:0;background:none;z-index:2}
.t-vuur .ph img:not(.lg),.t-vuur .ph svg{inset:auto;left:4.5cqw;top:4.5cqw;width:66cqw;height:calc(100% - 4.5cqw - 23cqw);clip-path:polygon(0 0,100% 0,100% 93%,0 100%);box-shadow:none}
.t-vuur .ph svg{color:#fff;opacity:.25}
.t-vuur .nr{right:4cqw;top:4cqw;font-size:17cqw;color:var(--c3s,#fff);text-shadow:0 .7cqw 0 rgba(0,0,0,.35)}
.t-vuur .ph img.lg{left:7.5cqw;top:7.5cqw;width:12cqw;height:12cqw}
.t-vuur .info{position:absolute;inset:0;display:block;z-index:3;pointer-events:none}
.t-vuur .id{position:absolute;right:5cqw;top:27cqw;bottom:30cqw;writing-mode:vertical-rl;transform:rotate(180deg)}
.t-vuur .pos{font-size:3.2cqw;opacity:.9;margin-left:1.2cqw}
.t-vuur .id,.t-vuur .nr{text-shadow:0 .3cqw 1.4cqw rgba(0,0,0,.75),0 0 .4cqw rgba(0,0,0,.55)}
.t-vuur .nm{display:block;margin:0;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;font-size:min(11cqw,calc(80cqw / (var(--nt) * .5)))}
.t-vuur .fn{font-weight:600;opacity:.9}
.t-vuur .sts{position:absolute;left:6cqw;bottom:8.5cqw;width:64cqw;padding:0;border-top:0;gap:2cqw;color:#15110e;z-index:3}
.t-vuur .st{display:flex;flex-direction:column-reverse;gap:.3cqw}
.t-vuur .st b{font-size:6cqw}
.t-vuur .ft{position:absolute;left:6cqw;bottom:2.4cqw;font-size:2.5cqw;color:#6b5a50;opacity:1;justify-content:flex-start;gap:2cqw}
.t-vuur .sn{display:block;right:5cqw;bottom:5.6cqw;color:#15110e;font-size:3.4cqw}

/* --- Goudrand: double frame, name plate, season emblem. Plain rounded rectangles all the way (no cut corners: easy to print and cut, and the outer colour can't merge with the paper and make the corners look cut) --- */
.t-goudrand .cd{color:#fff;background:var(--c2)}
.t-goudrand .cd::before{content:"";position:absolute;inset:.9cqw;background:var(--c1);border-radius:1.6cqw}
.t-goudrand .ph{grid-row:1;grid-column:1;margin:4.2cqw 4.2cqw 0;border:.5cqw solid var(--c2);border-bottom:0;background:color-mix(in srgb,var(--c1) 70%,#000)}
.t-goudrand .ph svg{color:var(--c2);opacity:.35}
.t-goudrand .nr{right:2.6cqw;bottom:2.6cqw;width:13cqw;height:13cqw;display:grid;place-items:center;border-radius:50%;background:var(--c3);color:var(--on3);font-size:7cqw;z-index:3}
.t-goudrand .ph img.lg{left:3cqw;top:12cqw;width:12cqw;height:12cqw}
.t-goudrand .cd::after{content:attr(data-season);position:absolute;top:6.5cqw;right:6.5cqw;width:15cqw;height:15cqw;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;background:var(--c1);border:.6cqw solid var(--c2);font-family:var(--font-label);font-weight:600;font-size:3cqw;color:var(--on1);z-index:3}
.t-goudrand .cd[data-season=""]::after{display:none}
.t-goudrand .sn{display:block;left:7.5cqw;top:7.2cqw;padding:.9cqw 2cqw;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font-size:3.1cqw}
.t-goudrand .info{grid-row:2;grid-column:1;margin:0 4.2cqw 4.2cqw;padding:2.6cqw 3.6cqw 2.8cqw;gap:1.2cqw;background:#0b0d12;border:.5cqw solid var(--c2)}
.t-goudrand .pos{color:var(--acc);opacity:1;font-size:3cqw}
.t-goudrand .nm{display:block;margin:0;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;font-size:min(9cqw,calc(78cqw / (var(--nt) * .47)))}
.t-goudrand .fn{font-weight:600;color:var(--acc)}
.t-goudrand .sts{border-top:.3cqw solid color-mix(in srgb,var(--acc) 60%,transparent);padding-top:1.6cqw;gap:2cqw}
.t-goudrand .st b{font-size:5.4cqw}
.t-goudrand .ft span:last-child{display:none}

/* --- Metaal 2: an exact copy of Metaal, to be changed independently (the original stays as it is) --- */
.t-metaal2 .cd{color:var(--on1);background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 .5cqw,transparent .5cqw 2.2cqw),linear-gradient(115deg,var(--c1) 0%,color-mix(in srgb,var(--c1) 55%,#fff) 16%,var(--c1) 30%,color-mix(in srgb,var(--c1) 70%,#000) 52%,color-mix(in srgb,var(--c1) 50%,#fff) 72%,var(--c1) 100%)}
.t-metaal2 .cd::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3) 44%,transparent 58%);pointer-events:none;z-index:4}
.t-metaal2 .ph{grid-row:1/3;grid-column:1;margin:3.2cqw 3.2cqw 0;border-radius:1.4cqw;box-shadow:0 0 0 .5cqw rgba(255,255,255,.55);background:color-mix(in srgb,var(--c1) 65%,#000);-webkit-mask-image:linear-gradient(#000 60%,transparent 93%);mask-image:linear-gradient(#000 60%,transparent 93%)}
.t-metaal2 .ph svg{color:var(--on1);opacity:.16}
.t-metaal2 .nr{right:2cqw;top:2cqw;width:14cqw;height:14cqw;display:grid;place-items:center;font-size:8.5cqw;background:var(--c3);color:var(--on3);clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,0 100%);z-index:3}
.t-metaal2 .ph img.lg{left:2.4cqw;top:2.4cqw;width:16cqw;height:16cqw}
.t-metaal2 .sn{display:block;right:7.5cqw;bottom:6.5cqw;font-weight:500;font-size:2.8cqw;letter-spacing:.12em;text-transform:uppercase;opacity:.8;line-height:1.5}
/* 1. season next to the team name ("TEAM · 2026/27"); room kept on the right for the serial */
.t-metaal2 .ft{justify-content:flex-start;gap:0;max-width:calc(100% - 19cqw)}
.t-metaal2 .ft span:last-child{flex:none}
.t-metaal2 .ft span+span::before{content:"\00b7";margin:0 1.6cqw}
.t-metaal2 .ft span:last-child:empty::before{content:none}
.t-metaal2 .info{grid-row:2;grid-column:1;padding:6cqw 7.5cqw 6.5cqw;gap:1.8cqw;z-index:2}
.t-metaal2 .pos{opacity:.85}
.t-metaal2 .nm{display:block;line-height:.9;margin-top:0}
.t-metaal2 .fn,.t-metaal2 .ln{display:block;font-family:var(--font-display);font-weight:900;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:min(13cqw,calc(84cqw / (var(--nl) * .5)));letter-spacing:.01em}
.t-metaal2 .sts{border-top:.4cqw solid color-mix(in srgb,currentColor 55%,transparent);padding-top:2cqw}
.t-metaal2 .st{display:flex;flex-direction:column-reverse;gap:.3cqw}
.t-metaal2 .st b{font-size:5.6cqw}

/* --- Holo 2: a copy of Holo restyled after a design by Thijs: full photo with a black-to-transparent fade from the bottom, gradient colour tabs, bigger names, team pill with a white ring, club name on the right --- */
.t-holo2 .cd{color:#fff;background:#05070c;--tabh:24.5cqw}   /* height of the left tab: number only */
.t-holo2 .cd:has(img.lg){--tabh:38.5cqw}                      /* logo + number */
.t-holo2 .cd:has(img.lg):has(.nr:empty){--tabh:24cqw}        /* logo only */
.t-holo2 .ph{grid-row:1/3;grid-column:1;background:#10162a}
.t-holo2 .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 16%,rgba(0,0,0,.42) 34%,transparent 58%)}
.t-holo2 .ph svg{color:#fff;opacity:.12}
.t-holo2 .nr{left:0;top:0;width:22cqw;padding:4cqw 0 8cqw;text-align:center;font-family:var(--font-label);font-weight:500;font-size:12.5cqw;line-height:1;color:var(--c3s,var(--on1));z-index:3}
.t-holo2 .ph img.lg{left:5.25cqw;top:4cqw;width:11.5cqw;height:11.5cqw;z-index:4}
.t-holo2 .ph:has(img.lg) .nr{padding-top:18cqw}
.t-holo2 .ph:has(img.lg) .nr:empty{display:block;padding-bottom:6cqw}   /* no number: a little room below the logo (about the space above it), not the full number space */
.t-holo2 .cd::after{content:attr(data-season);position:absolute;top:0;right:0;width:11cqw;height:35cqw;box-sizing:border-box;padding:5cqw 0 0 0;line-height:11cqw;writing-mode:vertical-rl;font-family:var(--font-label);font-weight:500;font-size:3.8cqw;letter-spacing:.14em;color:var(--on2);z-index:3}
.t-holo2 .cd[data-season=""]::after{display:none}
.t-holo2 .info{grid-row:2;grid-column:1;padding:0 7cqw 6.8cqw;gap:1cqw;z-index:2}
.t-holo2 .sts{order:-1;border-top:0;padding:0;gap:0;margin-bottom:1.2cqw}
.t-holo2 .st{display:flex;flex-direction:column-reverse;gap:.3cqw;padding:0 3cqw}
.t-holo2 .st:first-child{padding-left:0}
.t-holo2 .st+.st{border-left:.35cqw solid rgba(255,255,255,.25)}
.t-holo2 .st b{font-family:var(--font-label);font-weight:600;font-size:5.4cqw;letter-spacing:.02em}
.t-holo2 .st span{font-size:2.6cqw;opacity:.6}
.t-holo2 .pos{color:#fff;opacity:.95;font-family:var(--font-body);font-size:4.2cqw;font-weight:500;text-transform:none;letter-spacing:0;line-height:1.2;margin-bottom:1.6cqw}
.t-holo2 .nm{display:block;margin-top:.4cqw;line-height:1}
.t-holo2 .fn,.t-holo2 .ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.t-holo2 .fn{font-family:var(--font-display);font-weight:800;font-size:min(12.3cqw,calc(86cqw / (var(--nl) * .5)));letter-spacing:.02em}
.t-holo2 .ln{font-family:var(--font-body);font-weight:400;font-size:min(11.2cqw,calc(86cqw / (var(--nl) * .66)));letter-spacing:.03em}
.t-holo2 .ln:only-child{font-family:var(--font-display);font-weight:800;font-size:min(12.8cqw,calc(86cqw / (var(--nl) * .5)));letter-spacing:.02em}
.t-holo2 .ft{margin-top:3cqw;align-self:flex-start;max-width:58%;padding:1.5cqw 6cqw;border-radius:99px;background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 70%,#fff),var(--c1));box-shadow:0 0 0 .5cqw #fff;color:var(--on1);opacity:1;font-family:var(--font-body);font-size:4.2cqw;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.15}
.t-holo2 .ft span:first-child{overflow:hidden;text-overflow:ellipsis}
.t-holo2 .ft span:last-child{display:none}
.t-holo2 .sn{display:none}
/* the club name, bottom right, level with the team pill */
.t-holo2 .cd::before{content:attr(data-club);position:absolute;right:7cqw;bottom:8.2cqw;max-width:34cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-family:var(--font-body);font-size:4.2cqw;font-weight:500;line-height:1.2;color:#fff;opacity:.95;z-index:3}
.t-holo2 .cd[data-club=""]::before{display:none}
/* Holo 2: the two colour tabs. The wrapper (.d1/.d2) carries the drop-shadow, its ::before the clipped shape;
   the number and the season are separate text on top, so they stay sharp (vector) in a PDF. */
.t-holo2 .d1,.t-holo2 .d2{display:block;z-index:2;filter:drop-shadow(0 .9cqw 1.4cqw rgba(0,0,0,.5))}
.t-holo2 .d1{left:0;top:0;width:22cqw;height:var(--tabh)}
.t-holo2 .d2{right:0;top:0;width:11cqw;height:35cqw}
.t-holo2 .d1::before,.t-holo2 .d2::before{content:"";position:absolute;inset:0}
.t-holo2 .d1::before{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 78%,#fff),var(--c1));clip-path:polygon(0 0,100% 0,100% 87%,0 100%)}
.t-holo2 .d2::before{background:linear-gradient(180deg,color-mix(in srgb,var(--c2) 85%,#fff),var(--c2));clip-path:polygon(0 0,100% 0,100% 100%,0 83%)}
.t-holo2 .cd:not(:has(img.lg)):has(.nr:empty) .d1{display:none}       /* no logo and no number: no tab */
.t-holo2 .cd[data-season=""] .d2{display:none}                          /* no season: no tab */