.kartenzeile { display: flex; gap: 0.9rem; justify-content: center; align-items: stretch; margin-top: 1rem; }
.karte:has(.kartenzeile) { min-width: 46rem; }
.punkt.wahlkarte { flex: 1 1 0; width: 0; min-width: 0; max-width: 15rem; height: 25rem; box-sizing: border-box;
  padding: 1.1rem 0.9rem; border-radius: 0.875rem; border: 2px solid #333a4c; text-align: center;
  display: grid; grid-template-rows: 1.5rem 1.3rem 5rem 2rem 4rem minmax(2.6rem, auto);
  align-content: center; justify-items: center; gap: 0.4rem; background: linear-gradient(#1b1f2a, #14161d); overflow: visible; }
.punkt.wahlkarte { position: relative; }
.punkt.wahlkarte .kartenupgrade { font-size: 0.95rem; font-weight: 900; letter-spacing: 0.06em; white-space: nowrap; color: #fff; }
.punkt.wahlkarte .kartenicon { width: 100%; height: 5rem; display: flex; align-items: center; justify-content: center; position: relative; }
.punkt.wahlkarte .kartenkunst { width: 5rem; height: 5rem; position: relative; isolation: isolate; overflow: hidden;
  border-radius: 0.65rem; background: #20252d; border: 1px solid rgba(154, 164, 181, 0.16);
  box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.punkt.wahlkarte .kartenkunst::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--kartenmotiv-farbe) 38%, transparent) 0%, transparent 76%); }
.punkt.wahlkarte .kartenmotiv, .punkt.wahlkarte .kartentyp, .punkt.wahlkarte .kartenheld {
  height: 4rem; width: 4rem; object-fit: contain; opacity: 0.96; }
.punkt.wahlkarte .kartenkunst .kartenmotiv, .punkt.wahlkarte .kartenkunst .kartentyp, .punkt.wahlkarte .kartenkunst .kartenheld {
  height: 3.2rem; width: 3.2rem; opacity: 1; }
.punkt.wahlkarte .kartenwaffenname { min-height: 1.3rem; font-size: 0.82rem; font-weight: 700; color: rgba(232, 236, 243, 0.55); }
.punkt.wahlkarte.rang-verdeckt { background: linear-gradient(#262b34, #14161c); border-color: #4a5160; }
.punkt.wahlkarte.rang-gewoehnlich { background: linear-gradient(#2a2f3a, #191c24); border-color: #9aa4b5; }
.punkt.wahlkarte.rang-ungewoehnlich { background: linear-gradient(#1e3320, #141f16); border-color: #5fbf5a; }
.punkt.wahlkarte.rang-selten { background: linear-gradient(#1c2b48, #131d31); border-color: #4a90d9; }
.punkt.wahlkarte.rang-episch { background: linear-gradient(#2d1f45, #1a1329); border-color: #a45fd9; }
.punkt.wahlkarte.rang-legendaer { background: linear-gradient(#40331a, #241c0f); border-color: #e0a63a; }
.punkt.wahlkarte .kartenklee { position: absolute; top: -12.5rem; left: 50%; transform: translateX(-50%);
  width: 15rem; height: 15rem; pointer-events: none; z-index: 4; }

.kartenzeile { position: relative; }
.kartenzeile > .wahlkarte { position: relative; z-index: 2; }
.kartenzeile > .wahlkarte:not(.aktiv) { z-index: 3; }
.punkt.wahlkarte .kartenrang { min-width: 0; max-width: 100%; font-size: 1rem; line-height: 1.2; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 900; overflow-wrap: anywhere; }
.punkt.wahlkarte .kartenwirkung { align-self: start; max-width: 100%; font-size: 1rem; line-height: 1.3; font-weight: 800; color: #5fbf5a;
  overflow-wrap: anywhere; }
.punkt.wahlkarte.aktiv { outline: 2px solid #fff; outline-offset: 2px; filter: brightness(1.25); }
.rang-gewoehnlich .kartenrang { color: #9aa4b5; }
.rang-ungewoehnlich .kartenrang { color: #5fbf5a; }
.rang-selten .kartenrang { color: #4a90d9; }
.rang-episch .kartenrang { color: #a45fd9; }
.rang-legendaer .kartenrang { color: #e0a63a; }
.punkt.wahlkarte.rang-episch { box-shadow: 0 0 1rem #a45fd955; }
.punkt.wahlkarte.rang-legendaer { box-shadow: 0 0 1.375rem #e0a63a77; }