/* Abzeichen (/abzeichen/, kleine Symbole in der Taverne und unter /meine-charaktere/) */
.guc-abz, .guc-abz-meine, .guc-abz-mini { --abz-gold: var(--wp--preset--color--accent-1, #E2B04A); --abz-card: var(--wp--preset--color--accent-5, #1C1813);
  --abz-line: rgba(205, 191, 164, .22); --abz-soft: var(--wp--preset--color--accent-4, #CDBFA4);
  --abz-b: #c07a3e; --abz-s: #c9d2db; --abz-g: #e2b04a; --abz-ok: #6fd36f; }
.guc-abz *, .guc-abz *::before, .guc-abz *::after, .guc-abz-meine * { box-sizing: border-box; }
.guc-abz h2, .guc-abz h3, .guc-abz h4, .guc-abz-meine h2 { font-family: var(--wp--preset--font-family--vollkorn, serif); }

/* Medaille: rundes WoW-Symbol mit Metallring */
.guc-abz-medal { position: relative; flex: 0 0 auto; display: inline-block; width: 60px; height: 60px; padding: 2px; border-radius: 50%;
  background: #3a2f22; box-shadow: 0 0 0 1px #000, 0 3px 8px rgba(0, 0, 0, .6); }
.guc-abz-medal img { display: block; width: 56px; height: 56px; border-radius: 50%; }
.guc-abz-medal.abz-s1 { background: linear-gradient(145deg, #e3a56b, var(--abz-b) 45%, #6e3f1b); }
.guc-abz-medal.abz-s2 { background: linear-gradient(145deg, #ffffff, var(--abz-s) 45%, #6f7a85); }
.guc-abz-medal.abz-s3 { background: linear-gradient(145deg, #fff0b8, var(--abz-g) 45%, #8a5f14); box-shadow: 0 0 0 1px #000, 0 0 12px rgba(226, 176, 74, .45); }
.guc-abz-medal.is-small { width: 40px; height: 40px; }
.guc-abz-medal.is-small img { width: 36px; height: 36px; }

.guc-abz-group { margin: 1.8rem 0 .4rem; color: var(--abz-gold); }
.guc-abz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: .8rem 0 1.4rem; }
.guc-abz-grid.is-cities { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.guc-abz-card { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; background: var(--abz-card); border: 1px solid var(--abz-line); border-radius: 8px; }
.guc-abz-card.is-mine { border-color: rgba(226, 176, 74, .55); }
.guc-abz-card.is-locked .guc-abz-medal img { filter: grayscale(1) brightness(.7); }
.guc-abz-body { flex: 1; min-width: 0; }
.guc-abz-body h4 { margin: 0 0 .25rem; font-size: 1.05rem; line-height: 1.2; color: var(--abz-gold); overflow-wrap: anywhere; }
.guc-abz-rule { margin: 0 0 .45rem; font-size: .88rem; }
.guc-abz-tiers { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; font-size: .74rem; }
.guc-abz-tiers li { margin: 0; padding: 0 .45rem; border: 1px solid; border-radius: 999px; line-height: 1.5; }
.guc-abz-tiers .t1 { color: var(--abz-b); }
.guc-abz-tiers .t2 { color: var(--abz-s); }
.guc-abz-tiers .t3 { color: var(--abz-g); }
.guc-abz-have { margin: .45rem 0 0; font-size: .85rem; font-weight: 600; color: var(--abz-ok); }
.guc-abz-have .guc-muted { font-weight: 400; }
.guc-abz-count { margin: .35rem 0 0; font-size: .8rem; }

/* Deine Abzeichen */
.guc-abz-row { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin: .8rem 0 1.2rem; padding: 0; list-style: none; }
.guc-abz-row li { display: flex; align-items: center; gap: .55rem; margin: 0; max-width: 100%; }
.guc-abz-row li > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: .9rem; line-height: 1.25; }
.guc-abz-row strong { color: var(--abz-gold); font-family: var(--wp--preset--font-family--vollkorn, serif); }
.guc-abz-row em { font-style: normal; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--abz-soft); }
.guc-abz-row small { font-size: .75rem; }
.guc-abz-next { margin: .6rem 0 1.4rem; padding: 0; list-style: none; }
.guc-abz-next li { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--abz-line); }
.guc-abz-next img { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #5c4a2e; }
.guc-abz-next li > div { flex: 1; min-width: 0; font-size: .9rem; }
.guc-abz-bar { height: 6px; margin: .3rem 0 .15rem; overflow: hidden; background: rgba(0, 0, 0, .45); border-radius: 3px; }
.guc-abz-bar span { display: block; height: 100%; background: linear-gradient(90deg, #a87a2a, var(--abz-gold)); }
.guc-abz-foot { margin-top: 1.6rem; font-size: .85rem; }

/* Klein neben dem Namen (Taverne) */
.guc-abz-mini { display: inline-flex; align-items: center; gap: 3px; margin-left: .35rem; vertical-align: middle; text-decoration: none; line-height: 1; }
.guc-abz-mini img { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #3a2f22; box-shadow: 0 0 0 1px #000; }
.guc-abz-mini img.abz-s1 { border-color: var(--abz-b); }
.guc-abz-mini img.abz-s2 { border-color: var(--abz-s); }
.guc-abz-mini img.abz-s3 { border-color: var(--abz-g); }
.guc-abz-mini .abz-more { font-size: .72rem; color: var(--abz-soft); }

/* /meine-charaktere/ */
.guc-abz-meine { margin-top: 2rem; }

@media (max-width: 480px) {
  .guc-abz-grid, .guc-abz-grid.is-cities { grid-template-columns: 1fr; }
  .guc-abz-card { padding: .8rem; gap: .7rem; }
  .guc-abz-row li { flex: 1 1 100%; }
}