/* Spürpunkte und Level: Abzeichen, Holunderranke, Level-up. Bewegung nur ohne prefers-reduced-motion und ohne „Weniger Bewegung“. */

/* ---------- Abzeichen im Kopf ---------- */
.spur-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:50px;margin-left:.4rem;flex:0 0 auto;text-decoration:none;border-radius:10px}
.spur-chip .abz,.spur-chip .abz-bild{width:40px;height:auto;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.spur-chip-nr{position:absolute;right:-2px;bottom:2px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:#fffaf0;color:#2b2118;font:700 .8rem/20px var(--titel);text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.spur-chip:hover{background:rgba(255,240,210,.18)}
@media (max-width:860px){.spur-chip{margin-left:.2rem}}

/* ---------- Tafel ---------- */
.spur-tafel{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:1rem 1.4rem;align-items:center;margin:.4rem 0 1rem}
.spur-tafel.gross{grid-template-columns:minmax(140px,230px) 1fr}
.spur-abzeichen .abz,.spur-abzeichen .abz-bild{width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(40,25,10,.3));transform:rotate(-4deg)}
.spur-text p{margin:.2rem 0}
.spur-hallo{margin:0;color:var(--holunder)}
.spur-titel{font-family:var(--titel);font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.1}
.spur-titel strong{display:block}
.spur-level{display:inline-block;font:700 .95rem var(--titel);letter-spacing:.06em;text-transform:uppercase;color:var(--rot);border:2px solid currentColor;border-radius:8px;padding:0 .5rem;transform:rotate(-3deg);margin-bottom:.2rem}
.spur-punkte{font-size:1.1rem}
.spur-punkte strong{font:700 1.6rem var(--titel);color:var(--gruen)}
.spur-rest{font-size:1.05rem}
.spur-zahl{font-size:.98rem}
@media (max-width:560px){.spur-tafel,.spur-tafel.gross{grid-template-columns:1fr;text-align:center}.spur-abzeichen{max-width:170px;margin:0 auto}}

/* ---------- Holunderranke ---------- */
.spur-ranke{margin:.4rem 0 .2rem;max-width:560px}
.spur-tafel:not(.gross) .spur-ranke{margin-left:auto;margin-right:auto}
.spur-ranke svg{width:100%;height:auto;display:block;overflow:visible}
.spur-ranke-spur{fill:none;stroke:#b9a988;stroke-width:3;stroke-dasharray:3 7;stroke-linecap:round}
.spur-ranke-trieb{fill:none;stroke:#4f6b34;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1) .2s}
.spur-blatt{opacity:0;transform-box:fill-box;transform-origin:0 0;transition:opacity .35s ease}
.spur-blatt.an{opacity:1}
.spur-dolde{animation:dolde-auf .7s cubic-bezier(.2,1.5,.4,1) 1.5s both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes dolde-auf{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- Abzeichenbuch ---------- */
.spur-kopfblatt{padding-top:1.2rem}
.spur-buch{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.4rem;padding:1.4rem;border-radius:16px;background:linear-gradient(rgba(70,40,20,.12),rgba(70,40,20,.22)),url(../../img/holz.webp) center/500px}
.spur-seite-abz{margin:0;text-align:center;color:#fff6e4;text-shadow:0 1px 2px rgba(0,0,0,.75);font-size:1rem;line-height:1.25}
.spur-seite-abz .abz,.spur-seite-abz .abz-bild{width:120px;height:auto;margin:0 auto .3rem;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.spur-seite-abz:nth-child(odd) .abz{transform:rotate(-4deg)}.spur-seite-abz:nth-child(even) .abz{transform:rotate(3deg)}
.spur-seite-abz.aktuell .abz{filter:drop-shadow(0 0 10px rgba(255,220,140,.8)) drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.spur-seite-abz .leise{color:#f0e2c4}
.spur-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem;align-items:start}
.spur-regeln,.spur-log{list-style:none;margin:.4rem 0;padding:0}
.spur-regeln li,.spur-log li{padding:.3rem 0;border-bottom:1px dashed rgba(43,33,24,.18)}
.spur-wert{display:inline-block;min-width:3.2rem;font:700 1.05rem var(--titel);color:var(--gruen)}
.spur-name-form{margin-top:.6rem}
.spur-tuer{display:grid!important;place-items:center}
.spur-tuer .abz,.spur-tuer .abz-bild{width:110px;height:auto}

/* ---------- +Punkte ---------- */
.spur-plus{position:fixed;right:1rem;top:4.4rem;z-index:81;padding:.4rem .9rem;border-radius:999px;background:#4f6b34;color:#fffaf0;font:700 1.05rem var(--titel);box-shadow:0 6px 16px rgba(0,0,0,.25);opacity:0;transform:translateY(-10px) scale(.9);transition:opacity .3s,transform .4s cubic-bezier(.2,1.5,.4,1)}
.spur-plus.zeigen{opacity:1;transform:none}

/* ---------- Level-up ---------- */
html.spur-offen{overflow:hidden}
.spur-feier{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:1rem;background:rgba(32,22,14,.6);animation:feier-ein .35s ease-out both;overflow:hidden}
.spur-feier.weg{animation:feier-aus .3s ease-in both}
@keyframes feier-ein{from{opacity:0}to{opacity:1}}
@keyframes feier-aus{to{opacity:0}}
.spur-feier-blatt{position:relative;z-index:2;width:min(440px,100%);max-height:calc(100vh - 2rem);overflow:auto;text-align:center;padding:1.4rem 1.4rem 1.2rem;color:#2b2118;animation:blatt-ruck .5s ease-out .62s both}
@keyframes blatt-ruck{0%{transform:none}25%{transform:translateY(5px) rotate(.6deg)}60%{transform:translateY(-2px) rotate(-.3deg)}100%{transform:none}}
.spur-feier-blatt h2{margin:.1rem 0 .3rem;font-size:clamp(1.8rem,6vw,2.5rem);color:var(--holunder)}
.spur-feier-an{margin:.2rem 0 0;font-size:1.6rem}
.spur-siegel{position:relative;width:min(190px,48vw);margin:.2rem auto 0}
.spur-siegel .abz,.spur-siegel .abz-bild{width:100%;height:auto;display:block;transform:rotate(-6deg);animation:stempeln .62s cubic-bezier(.25,.9,.3,1.15) .12s both;filter:drop-shadow(0 8px 8px rgba(40,25,10,.35))}
@keyframes stempeln{0%{opacity:0;transform:translateY(-70px) scale(2.7) rotate(-30deg)}55%{opacity:1;transform:translateY(4px) scale(.9) rotate(-4deg)}75%{transform:scale(1.05) rotate(-7deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
.spur-klecks{position:absolute;left:50%;top:44%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:47% 53% 44% 56%/55% 45% 55% 45%;border:6px solid rgba(43,33,24,.35);opacity:0;animation:klecks .7s ease-out .55s both;pointer-events:none}
@keyframes klecks{0%{opacity:.7;transform:scale(.55)}100%{opacity:0;transform:scale(1.5) rotate(8deg)}}
.spur-feier-ylvi{display:block;width:128px;height:auto;margin:2.6rem auto .4rem;animation:ylvi-sprung .9s ease-in-out .8s 3 both;transform-origin:50% 100%}
@keyframes ylvi-sprung{0%{transform:translate(-34px,0) rotate(0)}40%{transform:translate(0,-38px) rotate(-10deg)}60%{transform:translate(8px,-36px) rotate(-6deg)}100%{transform:translate(34px,0) rotate(0)}}
.spur-konfetti{position:absolute;inset:0;z-index:3;pointer-events:none}
.spur-flocke{position:absolute;top:-6vh;left:var(--x);width:calc(22px * var(--s));height:calc(22px * var(--s));animation:flocke var(--t) cubic-bezier(.35,.1,.6,1) var(--v) both}
.spur-flocke svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
@keyframes flocke{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:1}100%{opacity:.9;transform:translate(var(--d),112vh) rotate(var(--r))}}

/* Weniger Bewegung: alles steht still, das Siegel ist sofort gestempelt */
@media (prefers-reduced-motion:reduce){
  .spur-feier,.spur-feier-blatt,.spur-siegel .abz,.spur-siegel .abz-bild,.spur-feier-ylvi,.spur-dolde{animation:none!important}
  .spur-klecks,.spur-konfetti{display:none}
  .spur-ranke-trieb,.spur-blatt{transition:none!important}
}
html.ruhig .spur-klecks,html.ruhig .spur-konfetti,.spur-feier.ruhig .spur-klecks{display:none}
.spur-feier.ruhig,.spur-feier.ruhig *{animation:none!important}

@media print{.spur-chip,.spur-plus,.spur-feier{display:none!important}}
html[data-zeit="nacht"] .spur-text,html[data-zeit="nacht"] .spur-rest{color:inherit}

/* Holunderbeeren (hq.js, auf jeder Seite) */
.hq-beere-icon{width:auto;height:1.4em;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
/* Beeren in der Kopfleiste */
.hq-chip{display:inline-flex;align-items:center;gap:.2rem;margin-left:.5rem;padding:.15rem .5rem .15rem .2rem;border-radius:999px;background:rgba(255,240,210,.14);color:#fbf1dc;text-decoration:none;font:700 1rem var(--titel);flex:0 0 auto}
.hq-chip:hover{background:rgba(255,240,210,.26)}
.hq-chip .hq-beere-icon{height:28px}
.hq-plus{position:fixed;left:50%;bottom:6.5rem;z-index:90;display:flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border-radius:999px;background:#3b2a5a;color:#fff6e6;font:700 1.15rem var(--titel);
  box-shadow:0 8px 20px rgba(0,0,0,.35);transform:translate(-50%,30px);opacity:0;transition:transform .4s,opacity .4s;pointer-events:none}
.hq-plus.zeigen{transform:translate(-50%,0);opacity:1}
.hq-plus .hq-beere-icon{height:30px;background:#fffaf0;border-radius:50%;padding:2px}

@media print{.hq-chip,.hq-plus{display:none!important}}
@media (prefers-reduced-motion:reduce){.hq-plus{transition:none}}