/* ---------- Kategorie-Sticker ---------- */
.sticker-ic {
  --st: var(--accent);
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--st); color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 1px 2px rgba(60,45,30,.15);
  transform: rotate(-4deg);
}
.sticker-ic svg { width: 16px; height: 16px; stroke-width: 1.6; }
.sticker-ic.sm { width: 20px; height: 20px; }
.sticker-ic.sm svg { width: 12px; height: 12px; }
.sticker-ic.lg { width: 52px; height: 52px; }
.sticker-ic.lg svg { width: 30px; height: 30px; stroke-width: 1.5; }

.chip.kat { display: inline-flex; align-items: center; gap: 7px; padding: 4px 14px 4px 5px; }
.chip.kat.on { background: color-mix(in srgb, var(--accent) 55%, #fff); }
.card .card-kat { position: absolute; right: 10px; top: 10px; }
.card .fav ~ .card-kat { top: 46px; }
.card .card-kat .sticker-ic { width: 32px; height: 32px; }
.card .card-kat .sticker-ic svg { width: 19px; height: 19px; }
.r-tags a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 0; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--tint); }
.guess { font-weight: 500; color: var(--accent-ink); margin-left: 6px; }

.iconpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.iconpick button { border: 2px solid transparent; background: none; border-radius: 16px; padding: 4px; cursor: pointer; display: grid; place-items: center; }
.iconpick button.on, .iconpick button:hover { border-color: var(--accent-ink); background: var(--tint); }

/* ---------- Schrittfotos ---------- */
.step-imgs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.step-imgs img {
  width: min(100%, 260px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px;
  box-shadow: var(--shadow); background: var(--tint); transform: rotate(-.8deg);
  border: 5px solid #fff;
}
.step-imgs img:nth-child(even) { transform: rotate(.9deg); }
.steps li.done .step-imgs img { opacity: .55; }

/* ---------- Eigener Reiter & Hallo-Seite ---------- */
.avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 600 11px/1 var(--sans); letter-spacing: .02em;
  writing-mode: horizontal-tb;
}
.avatar:empty { display: none; }
.tabs a.on .avatar { background: var(--accent-ink); color: #fff; }
.avatar.big { width: 64px; height: 64px; font-size: 22px; margin: 0 auto 8px; box-shadow: 0 0 0 4px #fff, var(--shadow); }
.hello .cover-card { padding-top: 22px; }
.hello h1 { font-size: 48px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.stat {
  display: grid; gap: 2px; text-align: center; text-decoration: none; padding: 14px 8px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
}
.stat:hover { border-color: var(--accent); background: var(--tint); }
.stat b { font: 700 34px/1 var(--hand); color: var(--accent-ink); }
.stat span { font-size: 12.5px; color: var(--muted); }