/*
 * Sammelkarten und Spieler-Avatare 2026, portiert aus der App (style.css,
 * Commits 52e8e00 bis 6f3ab38 vom 28.09.2026). Nur NFL-Fotos: ohne Stoff-Trikot
 * (PL), ohne Feuer der heissen Karte und ohne Pack-Vorzeichen; die kommen mit
 * dem Pack nach. Bei Aenderungen in der App diese Datei nachziehen.
 */
:root { --pill: #B7F34D; }
.avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avatar.small { width: 34px; height: 34px; font-size: 11px; }
/* Icon-Spieler (Tier 1): goldener Schein um den Avatar; Goldrahmen und
   Regenbogen-Folie kommen wie bei allen Stufen aus .av-frame / .av-holo */
.avatar.icongold { box-shadow: 0 0 12px rgba(245, 179, 1, 0.45), 0 3px 10px rgba(0, 0, 0, 0.4); }

/* Folie und Rahmen der Sammelkarte im Avatar (Leonhard, 28.09.2026). Die Folie
   bewegt sich per transform (Compositor, auch in langen Listen guenstig);
   isolation, damit die Mischmodi nur mit dem Avatar rechnen. */
.avatar.avt1, .avatar.avt2 { isolation: isolate; }
.av-holo { position: absolute; inset: 0; z-index: 2; border-radius: 50%; overflow: hidden; pointer-events: none;
  -webkit-mask: radial-gradient(circle, rgba(0,0,0,.15) 14%, #000 52%); mask: radial-gradient(circle, rgba(0,0,0,.15) 14%, #000 52%); }
.av-holo::before { content: ''; position: absolute; left: -100%; top: -100%; width: 300%; height: 300%;
  animation: avholo 7s ease-in-out infinite alternate; animation-delay: var(--hd, 0s); }
.avt1 > .av-holo { mix-blend-mode: color-dodge; opacity: .55; }
.avt1 > .av-holo::before { background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(115deg, #ff2e88 0%, #ffd23a 5%, #3dffb5 10%, #37b6ff 15%, #b04dff 20%, #ff2e88 25%); }
.avt2 > .av-holo { mix-blend-mode: screen; opacity: .9; }
.avt2 > .av-holo::before { background:
    repeating-linear-gradient(115deg, transparent 0 12%, rgba(183,243,77,.75) 15%, rgba(233,255,194,.95) 16%, rgba(61,255,181,.6) 17.5%, transparent 21%, transparent 25%); }
/* Fotos (NFL): die Folie liegt hinter dem freigestellten Spieler, das Gesicht
   bleibt ungefaerbt */
.avatar > .avimg { z-index: 1; }
.avatar:not(.kitav) > .av-holo { z-index: 0; -webkit-mask: none; mask: none; }
/* hinter dem Foto etwas leiser (Leonhard, 28.09.2026: "nur ganz leicht schwaecher") */
.avt1:not(.kitav) > .av-holo { opacity: .45; }
.avt2:not(.kitav) > .av-holo { opacity: .75; }
@keyframes avholo { from { transform: translate(-16%, -9%); } to { transform: translate(16%, 9%); } }
.av-frame { position: absolute; inset: 0; z-index: 3; border-radius: 50%; padding: 4%; pointer-events: none;
  background: linear-gradient(160deg, #f4f5f7, #cfd4da);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.avt2 > .av-frame { padding: 5%; background: conic-gradient(from 210deg, #ffffff, #9aa6b4, #f1f4f8, #6f7b8a, #e3e8ee, #8a96a4, #ffffff); }
.avt1 > .av-frame { padding: 6%; background: conic-gradient(from 210deg, #fff3c4, #d99a0f, #fff0b0, #a86f00, #ffe08a, #8a5c00, #fff3c4); }
@media (prefers-reduced-motion: reduce) { .av-holo::before { animation: none; } }
/* ---------- Sammelkarte (tc) ---------- */
.tc { position: relative; perspective: 900px; --f: 0deg; }
.tc.open { --f: 180deg; }
/* perspective am Elternteil der 3D-Ebenen, sonst wirkt der Flip flach (App b9761f8) */
.tc-card { position: relative; container-type: inline-size; aspect-ratio: 63 / 88; width: 100%; perspective: 900px; }
/* Neigung und Umdrehen auf zwei Ebenen (App 9051d85): sonst startet jede
   Lichtaktualisierung den Uebergang der Drehung neu und der Flip ruckelt */
.tc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3,1.35,.45,1); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
/* Flip 1 s und sichtbar: halbe Zeit quer, am Ende kleine Feder (App b9761f8) */
.tc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.5,0,.2,1.06); transform: rotateY(var(--f)); }
.tc-face { position: absolute; inset: 0; border-radius: 4.6cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 26px rgba(0,0,0,.5); text-align: left; color: #F2F5FA; }
.tc-front { transform: rotateY(180deg); background: #0d0f13; }
/* Rueckseite: Guilloche, Spielfeld-Zahlen (NFL), Wappen mit DI */
.tc-back { background: radial-gradient(90% 70% at 50% 42%, #1a2130 0%, #0c0e13 75%); }
.tc-bk-rings { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 42%, rgba(255,255,255,.06) 0 .35cqw, transparent .35cqw 2.6cqw); }
.tc-bk-rays { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(183,243,77,.10) 0deg 2deg, transparent 2deg 7deg);
  -webkit-mask: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%); mask: radial-gradient(circle at 50% 42%, #000 0%, transparent 70%); }
.tc-bk-field { position: absolute; top: 11cqw; bottom: 11cqw; width: 7cqw; display: flex; flex-direction: column; justify-content: space-between; align-items: center; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 3.2cqw; color: rgba(255,255,255,.28); }
.tc-bk-field.l { left: 6.5cqw; } .tc-bk-field.r { right: 6.5cqw; }
.tc-bk-field::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.22) 0 .35cqw, transparent .35cqw 2.4cqw);
  -webkit-mask: linear-gradient(90deg, transparent 38%, #000 38% 62%, transparent 62%); mask: linear-gradient(90deg, transparent 38%, #000 38% 62%, transparent 62%); }
.tc-bk-field span { position: relative; background: #0f1218; padding: .6cqw 0; }
.tc-bk-frame { position: absolute; inset: 3.2cqw; border-radius: 3.2cqw; padding: .9cqw; background: linear-gradient(135deg, #e9ffb8, #7fae1c 25%, #f4ffd6 45%, #4f7410 65%, #cdef82 85%, #6f9a16);
  background-size: 200% 200%; background-position: var(--hx, 50%) var(--hy, 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tc-bk-frame.in { inset: 5.4cqw; padding: .3cqw; opacity: .45; border-radius: 2cqw; }
.tc-bk-emb { position: absolute; left: 50%; top: 42%; width: 44cqw; height: 52cqw; transform: translate(-50%, -50%); clip-path: polygon(50% 0, 100% 13%, 100% 60%, 50% 100%, 0 60%, 0 13%);
  background: linear-gradient(135deg, #f4ffd9, #8fbf22 28%, #efffc4 48%, #54790f 68%, #d8f79a 88%); background-size: 220% 220%; background-position: var(--hx, 50%) var(--hy, 50%);
  display: grid; place-items: center; filter: drop-shadow(0 2cqw 4cqw rgba(0,0,0,.6)); }
.tc-bk-emb::before { content: ''; position: absolute; inset: 1.4cqw; clip-path: inherit; background: radial-gradient(100% 80% at 50% 20%, #222a38, #0a0c11); }
.tc-bk-mono { position: relative; font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 19cqw; letter-spacing: -.06em; line-height: 1; margin-top: -3cqw; padding: 0 2.5cqw 0 1cqw;
  background: linear-gradient(100deg, #6f9a16, #f4ffd6 30%, #b7f34d 50%, #f4ffd6 70%, #6f9a16); background-size: 200% 100%; background-position: var(--hx, 50%) 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.tc-bk-word { position: absolute; left: 0; right: 0; top: 73%; text-align: center; font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; font-size: 8cqw; letter-spacing: -.02em; color: #fff; }
.tc-bk-word b { color: var(--pill); font-weight: 900; }
.tc-bk-series { position: absolute; left: 0; right: 0; top: 82.5%; text-align: center; font-size: 2.9cqw; font-weight: 800; letter-spacing: .3em; color: rgba(255,255,255,.5); }
.tc-bk-glare { position: absolute; inset: 0; mix-blend-mode: overlay; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.5), transparent 50%); }
/* Vorderseite */
.tc-art { position: absolute; inset: 0; background:
    linear-gradient(155deg, transparent 52%, color-mix(in srgb, var(--c2) 70%, transparent) 52.3% 57%, transparent 57.3%),
    radial-gradient(110% 80% at 50% 30%, color-mix(in srgb, var(--c1) 92%, white 8%) 0%, color-mix(in srgb, var(--c1) 55%, black) 75%); }
.tc-art::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3.2cqw); }
.tc-num { position: absolute; right: -4cqw; top: 8cqw; font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 62cqw; line-height: .8; letter-spacing: -.06em; color: rgba(255,255,255,.12); }
.tc-ph { position: absolute; left: 50%; bottom: 31%; width: 128%; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 4cqw 5cqw rgba(0,0,0,.55)); }
.tc-ini { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 26cqw; color: rgba(255,255,255,.85); }
/* Karten-Hintergrund hinter dem Trikot (Leonhard, 28.09.2026: "die Karten sehen
   so cool aus, die Avatare nicht"): Vereinsfarben-Licht wie .tc-art, der schraege
   Streifen in der Zweitfarbe, Nadelstreifen und ein Glanz wie das Kartenglas */
.avatar.jersey.kitav, .avatar.ph { background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    linear-gradient(155deg, transparent 56%, color-mix(in srgb, var(--c2) 80%, transparent) 56% 66%, transparent 66%),
    radial-gradient(110% 95% at 50% 22%, color-mix(in srgb, var(--c1) 90%, white 10%) 0%, color-mix(in srgb, var(--c1) 50%, black) 82%); }
.avatar.kitav::before, .avatar.ph::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 28% 16%, rgba(255,255,255,.3), transparent 42%), linear-gradient(125deg, transparent 55%, rgba(255,255,255,.1) 62%, transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 -3px 6px rgba(0,0,0,.35); }
/* NFL-Fotos wie die Karte (Leonhard, 28.09.2026): Karten-Hintergrund, blasse
   Rueckennummer hinter dem Spieler (.tc-num), Schatten unter dem Foto (.tc-ph).
   Die Initialen hinter dem Foto schienen durch die freigestellten Stellen. */
.avatar.ph { isolation: isolate; }
.avatar.ph > .avimg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.avatar.ph > .avimg + span { display: none; }
.av-num { position: absolute; right: -10%; top: -4%; font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 2.9em;
  line-height: 1; letter-spacing: -.06em; color: rgba(255,255,255,.17); pointer-events: none; }
.tc-plate { position: absolute; left: 0; right: 0; bottom: 0; height: 36%; padding: 4cqw 7cqw 0; background: linear-gradient(180deg, rgba(8,9,12,0) 0%, rgba(8,9,12,.92) 18%, #0a0b0e 100%); }
.tc-nm { font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 8.4cqw; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Schriftgroesse kommt inline aus der Namenslaenge (Leonhard, 28.09.2026:
   "Christian McCaffrey" war abgeschnitten); Auslassung nur als Notnagel */
/* Zeilen unter dem Namen groesser (App 8a19d17) */
.tc-meta { display: flex; align-items: center; gap: 1.6cqw; font-size: 5.4cqw; font-weight: 800; letter-spacing: .07em; color: rgba(255,255,255,.62); margin-top: 2cqw; white-space: nowrap; overflow: hidden; }
.tc-meta .injchip, .tc-meta .formchip { font-size: 3.4cqw; padding: .4cqw 1.6cqw; margin: 0; letter-spacing: .02em; }
.tc-meta .formchip svg { width: 3.2cqw; height: 3.2cqw; }
.tc-meta .sos-g, .tc-meta .sos-y, .tc-meta .sos-r, .tc-meta .bye { padding: .4cqw 1.8cqw; border-radius: 99px; letter-spacing: .02em; }
.tc-meta .sos-g { background: rgba(74,222,128,.18); }
.tc-meta .sos-y { background: rgba(250,204,21,.16); }
.tc-meta .sos-r { background: rgba(255,107,107,.16); }
.tc-plate .dppg { margin-top: 2.6cqw; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 8.6cqw; line-height: 1; font-variant-numeric: tabular-nums; color: #F2F5FA; }
.tc-plate .dppg span { font-family: 'Manrope', sans-serif; font-size: 3.2cqw; font-weight: 800; letter-spacing: .1em; color: rgba(255,255,255,.55); margin-left: 1cqw; }
.tc-plate .dsub { font-size: 5cqw; font-weight: 700; color: rgba(255,255,255,.5); margin-top: 1.6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-pos { position: absolute; left: 6.2cqw; top: 6.2cqw; background: var(--pc); color: #101218; font-weight: 900; font-size: 4.4cqw; letter-spacing: .06em; padding: 1.2cqw 3.2cqw; border-radius: 99px; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.4); z-index: 3; }
.tc-tb { position: absolute; right: 6.2cqw; top: 6.2cqw; font-weight: 900; font-size: 3.8cqw; letter-spacing: .08em; text-transform: uppercase; padding: 1.2cqw 2.8cqw; border-radius: 99px; z-index: 3; }
.tc-frame { position: absolute; inset: 0; border-radius: 4.6cqw; padding: var(--fw, 2.6cqw); z-index: 2; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tc-holo, .tc-glare { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tc-glare { mix-blend-mode: overlay; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.7), transparent 45%); }
.tc-t3 .tc-frame { --fw: 2.4cqw; background: linear-gradient(160deg, #f4f5f7, #cfd4da); }
.tc-t3 .tc-tb { background: rgba(0,0,0,.45); color: #d7dbe2; }
.tc-t3 .tc-holo { display: none; }
.tc-t2 .tc-frame { --fw: 3cqw; background: linear-gradient(135deg, #ffffff 0%, #9aa6b4 22%, #f1f4f8 42%, #6f7b8a 60%, #e3e8ee 80%, #8a96a4 100%); }
.tc-t2 .tc-tb { background: linear-gradient(135deg, #E2E8EF, #A9B5C3); color: #2f3843; }
.tc-t2 .tc-holo { mix-blend-mode: screen; opacity: .55;
  -webkit-mask: radial-gradient(ellipse 31% 26% at 50% 33%, transparent 58%, #000 100%); mask: radial-gradient(ellipse 31% 26% at 50% 33%, transparent 58%, #000 100%);
  background: linear-gradient(115deg, transparent 38%, rgba(183,243,77,0) 40%, rgba(183,243,77,.55) 45%, rgba(233,255,194,.7) 47%, rgba(61,255,181,.45) 50%, transparent 55%),
    linear-gradient(115deg, transparent 58%, rgba(183,243,77,.25) 61%, rgba(61,255,181,.2) 63%, transparent 66%);
  background-size: 260% 100%, 260% 100%; background-position: var(--hx, 50%) 0, var(--hx, 50%) 0; }
.tc-t1 .tc-frame { --fw: 3.4cqw; background: linear-gradient(135deg, #fff3c4 0%, #d99a0f 20%, #fff0b0 40%, #a86f00 58%, #ffe08a 78%, #8a5c00 100%); }
.tc-t1 .tc-tb { background: linear-gradient(135deg, #FFE7A0, #E0A300); color: #3d2e00; }
.tc-t1 .tc-holo { mix-blend-mode: color-dodge; opacity: .4;
  -webkit-mask: radial-gradient(ellipse 31% 26% at 50% 33%, transparent 58%, #000 100%); mask: radial-gradient(ellipse 31% 26% at 50% 33%, transparent 58%, #000 100%);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 1px, transparent 1px 1.6cqw), repeating-linear-gradient(115deg, #ff2e88 0%, #ffd23a 7%, #3dffb5 14%, #37b6ff 21%, #b04dff 28%, #ff2e88 35%);
  background-size: auto, 300% 300%; background-position: 0 0, var(--hx, 50%) var(--hy, 50%); }
.tc-t1 .tc-front { box-shadow: 0 0 22px rgba(245,179,1,.35), 0 0 0 1px rgba(255,255,255,.08), 0 14px 26px rgba(0,0,0,.5); }
/* Target */
.tc-tgt { position: absolute; left: 6.2cqw; top: 17cqw; width: 8cqw; height: 8cqw; border-radius: 50%; background: #6D4DD6; color: #F3EEFF; display: grid; place-items: center; z-index: 3; box-shadow: 0 0 0 .8cqw rgba(0,0,0,.35), 0 0 4cqw rgba(139,92,246,.8); }
.tc-tgt svg { width: 5cqw; height: 5cqw; }
.tc-tgtcard .tc-front { box-shadow: 0 0 0 2px rgba(167,139,250,.85), 0 0 26px rgba(139,92,246,.55), 0 0 0 1px rgba(255,255,255,.08), 0 14px 26px rgba(0,0,0,.5); }
.tc-glint .tc-front::before { content: ''; position: absolute; inset: -20%; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%); animation: tcglint .8s ease-out forwards; }
@keyframes tcglint { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.tc-pop .tc-card { animation: tcpop .7s cubic-bezier(.2,1.5,.4,1); }
@keyframes tcpop { 0% { scale: 1; } 35% { scale: var(--ps, 1.06); } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .tc-flip, .tc-tilt { transition-duration: .01s !important; } }

/* ---------- Stoff-Trikot der Premier League (App style.css, 28.09.2026) ---------- */
.avatar.jersey {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 58%, #1B1E24), color-mix(in srgb, var(--c2) 58%, #1B1E24));
  color: var(--ink, #fff);
}
/* Stoff-Trikot im Avatar-Kreis (Listen, Kader, Sheets, Story). Alle Ebenen in
   .ka-kit: das Trikot schwebt verkleinert mit Schatten vor dem Karten-Hintergrund,
   Platte und Druck sitzen relativ zum Trikot, multiply mischt nur mit dem Trikot. */
.avatar.kitav > .ka-kit { position: absolute; left: 9%; top: 11%; width: 82%; height: 82%; isolation: isolate; font-size: .87em;
  filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.6)); }
.ka-kit > img, .ka-kit > .ka-col { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ka-kit > .ka-col { background: var(--c1); mix-blend-mode: multiply;
  -webkit-mask: url(img/kit-back.webp) center / contain no-repeat; mask: url(img/kit-back.webp) center / contain no-repeat; }
.ka-kit > .ka-col.kit-stripes { background: repeating-linear-gradient(90deg, var(--c1) 0 7.5%, var(--c2) 7.5% 15%); }
.ka-kit > .ka-col.kit-hoops { background: repeating-linear-gradient(180deg, var(--c1) 0 8%, var(--c2) 8% 16%); }
.ka-kit > .ka-col.kit-sash { background: linear-gradient(118deg, var(--c1) 42%, var(--c2) 42% 56%, var(--c1) 56%); }
.ka-kit > .ka-shade { mix-blend-mode: multiply; opacity: .4; }
.ka-kit > .ka-panel { position: absolute; left: 28.7%; right: 28.7%; top: 34%; height: 44.7%; border-radius: 8%; background: #f4f4f1; }
.ka-kit > .ka-print { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 6.5%; line-height: 1;
  font-family: 'Archivo', sans-serif; font-weight: 900; -webkit-text-stroke: .08em var(--kout); paint-order: stroke fill; }
.ka-kit .ka-name { letter-spacing: .06em; white-space: nowrap; margin-bottom: .12em; -webkit-text-stroke-width: .03em; }
.ka-kit .ka-num { font-size: .86em; letter-spacing: -.02em; }
.avatar.kitav.jbig .ka-print { font-size: 1.4em; }
/* Stoff-Trikot (PL): weisses Foto-Trikot + Vereinsfarbe multipliziert +
   Flock-Druck + Faltenschatten ueber dem Druck. url() absolut, weil der
   Release-Build style.css nach rel/ verschiebt. */
.tc-kit { position: absolute; left: 50%; bottom: 24%; width: 104cqw; aspect-ratio: 1; transform: translateX(-50%); isolation: isolate; filter: drop-shadow(0 3cqw 5cqw rgba(0,0,0,.55)); }
.tc-kit > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-kit-base, .tc-kit-shade { object-fit: contain; }
.tc-kit-col { background: var(--k1); mix-blend-mode: multiply;
  -webkit-mask: url(img/kit-back.webp) center / contain no-repeat; mask: url(img/kit-back.webp) center / contain no-repeat; }
.tc-kit.kit-stripes .tc-kit-col { background: repeating-linear-gradient(90deg, var(--k1) 0 7.5%, var(--k2) 7.5% 15%); }
.tc-kit.kit-hoops .tc-kit-col { background: repeating-linear-gradient(180deg, var(--k1) 0 8%, var(--k2) 8% 16%); }
.tc-kit.kit-sash .tc-kit-col { background: linear-gradient(118deg, var(--k1) 42%, var(--k2) 42% 56%, var(--k1) 56%); }
.tc-kit-print { display: flex; flex-direction: column; align-items: center; padding-top: 24%; color: var(--kink); font-family: 'Archivo', sans-serif; font-weight: 900; text-shadow: 0 .3cqw 0 rgba(0,0,0,.18);
  -webkit-text-stroke: .5cqw var(--kout); paint-order: stroke fill; }
.tc-kit-print .n { letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.tc-kit-print .d { font-size: 30cqw; line-height: .9; margin-top: 1.5cqw; letter-spacing: -.03em; }
.tc-kit-shade { mix-blend-mode: multiply; opacity: .4; }
/* Nummern-Platte auf Streifen/Ringeln (die Falten liegen per shade darueber) */
.tc-kit > .tc-kit-panel { left: 28%; right: 28%; top: 21%; bottom: auto; width: auto; height: 40%; border-radius: 1.6cqw; background: #f4f4f1; box-shadow: 0 0 0 .5cqw rgba(0,0,0,.08); }