/* 17.10.2026 Roadmap als Level (roadmap.js) */
.lvl { position: relative; margin: 8px auto 0; max-width: 620px; border-radius: 14px; overflow: hidden;
       background-color: #3d6b2c;
       background-image: radial-gradient(#4f8a36 1.5px, transparent 1.6px), radial-gradient(#335c25 1.5px, transparent 1.6px);
       background-size: 22px 22px, 31px 31px; background-position: 0 0, 11px 7px;
       box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35); }
.lvl svg { position: absolute; left: 0; top: 0; }
.lvl .rand { fill: none; stroke: #6b4a22; stroke-width: 34; stroke-linecap: round; }
.lvl .pfad { fill: none; stroke: #c9a86a; stroke-width: 26; stroke-linecap: round; stroke-dasharray: 2 9; }
.lvl .st { position: absolute; display: flex; align-items: flex-end; gap: 12px; width: 50%; }
.lvl .st.l { left: 4%; flex-direction: row; }
.lvl .st.r { right: 4%; flex-direction: row-reverse; text-align: right; }
.lvl .fig { position: relative; flex: none; width: 120px; display: flex; justify-content: center; align-items: flex-end; min-height: 70px; }
.lvl .fig img { image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.lvl .now .fig { width: 175px; justify-content: flex-end; }
.lvl .st.r.now .fig { justify-content: flex-start; }
.lvl .fig .held { position: absolute; left: 0; bottom: 0; }
.lvl .st.r .fig .held { left: auto; right: 0; transform: scaleX(-1); }
.lvl .done .fig img { filter: saturate(.7) brightness(.9) drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.lvl .ok { position: absolute; top: -6px; right: 8px; background: #6fcf7a; color: #10301a; font-weight: 800; font-size: 14px;
           width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lvl .plan .fig img { opacity: .85; }
.lvl .txt { background: rgba(12, 16, 28, .82); color: #f3ead2; border-radius: 10px; padding: 8px 12px; font-size: 15px; line-height: 1.35;
            max-width: 230px; text-align: left; }
.lvl .stand { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.lvl .done .stand { color: #6fcf7a; } .lvl .now .stand { color: #f2b84b; } .lvl .plan .stand { color: #8aa0ff; }
.lvl .now .txt { box-shadow: 0 0 0 2px #f2b84b; }
@media (max-width: 520px) {
  .lvl .st { width: 92%; }
  .lvl .st.l, .lvl .st.r { left: 4%; right: auto; flex-direction: row; text-align: left; }
  .lvl .st.r .fig .held { left: 0; right: auto; transform: none; }
  .lvl .st.r.now .fig { justify-content: flex-end; }
  .lvl .now .fig { width: 140px; }
  .lvl .fig { width: 92px; }
  .lvl .txt { font-size: 14px; }
}