:root{
    --graphite:#161009;--surface:#211a12;--surface-2:#2c2318;--line:#40331f;
    --copper:#d0894f;--copper-bright:#f2ad63;--copper-hi:#ffdca6;--copper-deep:#7d4526;
    --gold:#f0bd63;--patina:#7fbf9a;--patina-dim:#274a3a;--flame:#ef8a3a;
    --win:#84d094;--win-dim:#264a33;--rust:#c85a3e;--rust-dim:#4a271f;
    --text:#f4ebdd;--muted:#a99a86;--muted-2:#7a6a55;
    --metal:linear-gradient(160deg,var(--copper-hi) 0%,var(--copper) 42%,var(--copper-deep) 100%);
    --display:'Fredoka',system-ui,sans-serif;--body:'Nunito',system-ui,sans-serif;--mono:'Space Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:radial-gradient(1100px 560px at 50% -8%, #3a2a18 0%, #211710 42%, var(--graphite) 78%);color:var(--text);font-family:var(--body);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
  .wrap{max-width:760px;margin:0 auto;padding:22px 18px 64px}
  header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px;flex-wrap:wrap}
  .brand{font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:17px}
  .brand b{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand small{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.26em;color:var(--muted-2);margin-top:3px}
  .stats{display:flex;align-items:center;gap:12px}
  .lvl{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--gold)}
  .lvl .badge{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 7px;border-radius:9px;background:var(--metal);color:#231205;font-size:15px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.4)}
  .xpwrap{width:150px}
  .xpbar{height:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
  .xpbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--copper-hi));transition:width .5s cubic-bezier(.2,.8,.2,1)}
  .xptext{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted-2);margin-top:3px}
  .panel{background:linear-gradient(180deg,var(--surface),#1c150e);border:1px solid var(--line);border-radius:12px;padding:22px}
  .stack{display:flex;flex-direction:column;gap:18px}
  h1{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:.02em;margin:0 0 6px;text-transform:uppercase}
  .lead{color:var(--muted);font-size:15px;margin:0 0 4px}
  .crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase;margin-bottom:10px}
  .crumb b{color:var(--copper-bright)}
  .srcbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin-bottom:16px}
  .srcbar .info{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
  .srcbar .info b{color:var(--copper-bright)}
  .modes{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
  @media(min-width:560px){.modes{grid-template-columns:1fr 1fr}}
  .mode{text-align:left;cursor:pointer;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:16px 14px;color:var(--text);transition:border-color .15s,transform .05s;font-family:inherit;width:100%}
  .mode:hover:not(:disabled){border-color:var(--copper)}
  .mode:active:not(:disabled){transform:translateY(1px)}
  .mode:disabled{cursor:not-allowed;opacity:.5}
  .mode .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--copper-bright);text-transform:uppercase}
  .mode.dim .tag{color:var(--muted-2)}
  .mode .t{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.03em;margin:8px 0 4px;text-transform:uppercase}
  .mode .d{font-size:12.5px;color:var(--muted)}
  /* Avatar-Auswahl */
  .avgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
  .avcard{cursor:pointer;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s,transform .06s}
  .avcard:hover{border-color:var(--copper)}
  .avcard:active{transform:translateY(1px)}
  .avcard.sel{border-color:var(--gold);box-shadow:0 0 0 2px rgba(240,189,99,.25)}
  .avcard svg{width:74px;height:56px}
  .avcard .n{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
  /* Weg / Pfad */
  .pathwrap{position:relative;margin:6px auto 0;max-width:420px}
  .node{position:absolute;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;border:none;cursor:pointer;font-family:var(--display);font-weight:700;font-size:22px;color:#231205;display:flex;align-items:center;justify-content:center;background:var(--metal);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -6px 10px rgba(0,0,0,.28),0 6px 14px rgba(0,0,0,.4)}
  .node .lbl{position:absolute;top:80px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
  .node.locked{background:#2a2117;color:var(--muted-2);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
  .node.done{background:linear-gradient(160deg,var(--win) 0%,#3f7d55 100%);color:#0e2417}
  .node.current{animation:ring 1.6s ease-in-out infinite}
  @keyframes ring{0%,100%{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 0 0 0 rgba(240,189,99,.55)}50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 0 0 12px rgba(240,189,99,0)}}
  .avatar{position:absolute;transform:translate(-50%,-118%);width:52px;height:40px;z-index:5;transition:left .9s cubic-bezier(.5,.05,.3,1),top .9s cubic-bezier(.5,.05,.3,1);filter:drop-shadow(0 4px 5px rgba(0,0,0,.5))}
  .avatar.hop{animation:hop .9s ease}
  @keyframes hop{0%,100%{margin-top:0}50%{margin-top:-16px}}
  .track{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
  .bar{flex:1;height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden}
  .bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--copper-hi));transition:width .35s cubic-bezier(.2,.8,.2,1)}
  .count{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
  .count b{color:var(--text)}
  .streak{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--flame);letter-spacing:.04em;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.8)}
  .streak.on{opacity:1;transform:scale(1)}
  .streak .fl{filter:drop-shadow(0 0 6px rgba(239,138,58,.6))}
  .flip{perspective:1200px}
  .flip .flip-inner{position:relative;width:100%;aspect-ratio:16/9;transition:transform .6s;transform-style:preserve-3d}
  .flip .flip-front,.flip .flip-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8px;overflow:hidden}
  .flip.flipped .flip-inner{transform:rotateX(180deg)}
  .flip .flip-back{transform:rotateX(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--surface-2);border:1px solid var(--win-dim)}
  .flip.win .flip-front{animation:pulse .5s ease}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(132,208,148,0)}30%{box-shadow:0 0 0 5px rgba(132,208,148,.6)}100%{box-shadow:0 0 0 0 rgba(132,208,148,0)}}
  .sample{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:repeating-linear-gradient(45deg,#2a2016 0 14px,#221910 14px 28px);display:flex;align-items:center;justify-content:center;text-align:center}
  .sample img{width:100%;height:100%;object-fit:cover;display:block}
  .sample .corner{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--copper-bright);border:1px solid var(--copper);border-radius:4px;padding:3px 7px;background:rgba(20,17,14,.72);z-index:2}
  .rv-tick{font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--win);font-size:15px}
  .rv-name{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:.02em;text-transform:uppercase;color:var(--text);padding:0 16px;text-align:center}
  .q{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.02em;margin:18px 0 14px;text-transform:uppercase}
  .q .hint{display:block;font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:4px}
  .opts{display:grid;gap:10px}
  .opts.metals{grid-template-columns:1fr 1fr}
  .opt{display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:13px 14px;color:var(--text);font-family:inherit;font-size:15px;transition:border-color .12s,background .12s,transform .05s}
  .opt:hover:not(:disabled){border-color:var(--copper)}
  .opt:active:not(:disabled){transform:translateY(1px)}
  .opt:disabled{cursor:default}
  .opt.correct{border-color:var(--win);background:var(--win-dim)}
  .opt.wrong{border-color:var(--rust);background:var(--rust-dim)}
  .opt.missed{border-color:var(--win)}
  .opt .box{width:19px;height:19px;border:1px solid var(--muted-2);border-radius:5px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:#231205;background:transparent}
  .opt.sel{border-color:var(--copper)}
  .opt.sel .box{border-color:var(--copper);background:var(--copper)}
  .opt.correct .box,.opt.missed .box{border-color:var(--win);background:var(--win)}
  .opt.wrong .box{border-color:var(--rust);background:var(--rust)}
  .free{display:flex;gap:10px;flex-wrap:wrap}
  .free input{flex:1;min-width:200px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:inherit;font-size:16px;padding:13px 14px}
  .free input:focus{outline:2px solid var(--copper);outline-offset:1px}
  .btn{background:var(--metal);color:#231205;border:none;border-radius:8px;padding:0 20px;font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px;cursor:pointer;min-height:44px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.35)}
  .btn:hover{filter:brightness(1.06)}
  .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
  .btn.ghost:hover{border-color:var(--copper);background:transparent}
  .btn.sm{min-height:38px;font-size:12px;padding:0 14px}
  .fb{margin-top:16px;border-radius:8px;padding:15px 16px;border:1px solid var(--line);background:var(--surface-2)}
  .fb.ok{border-color:var(--win-dim)}
  .fb.no{border-color:var(--rust-dim)}
  .fb .verdict{font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;display:flex;align-items:center;gap:10px}
  .fb.ok .verdict{color:var(--win)}
  .fb.no .verdict{color:var(--rust)}
  .xpchip{font-family:var(--mono);font-size:12px;font-weight:700;color:#231205;background:var(--metal);padding:3px 9px;border-radius:99px;display:inline-block;animation:popc .45s cubic-bezier(.2,1.4,.4,1)}
  @keyframes popc{0%{transform:scale(.4) translateY(6px);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
  .fb .truth{margin-top:6px;font-size:13px;color:var(--muted)}
  .fb .truth b{color:var(--text)}
  .fb .flag{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);border-top:1px dashed var(--line);padding-top:9px}
  .levelup{margin-top:12px;border:1px solid var(--gold);border-radius:8px;padding:12px 14px;background:linear-gradient(160deg,rgba(240,189,99,.16),rgba(200,121,65,.06));font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;animation:popc .5s cubic-bezier(.2,1.4,.4,1)}
  .row{display:flex;justify-content:flex-end;margin-top:16px;gap:10px;flex-wrap:wrap}
  .reward{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
  .rcard{flex:1;min-width:120px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:14px}
  .rcard .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
  .rcard .v{font-family:var(--display);font-weight:700;font-size:28px;color:var(--gold);margin-top:4px}
  .disclaimer{margin-top:22px;font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.03em;color:var(--muted-2);border-top:1px solid var(--line);padding-top:14px}
  .kbd{font-family:var(--mono);font-size:11px;color:var(--muted)}
  .loading{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em;padding:8px 0}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


  /* ===== scrapIQ Visual Upgrade v0.15: Straße exakt entlang der Level-Schlangenlinie ===== */
  :root{
    --graphite:#14161b;--surface:#242a31;--surface-2:#303841;--line:#596372;
    --copper:#d8793f;--copper-bright:#ffb66f;--copper-hi:#ffe0b5;--copper-deep:#7e331d;
    --gold:#ffd36f;--patina:#76d6bd;--patina-dim:#234b45;--flame:#ff8a36;
    --win:#87df86;--win-dim:#1f4d36;--rust:#ef6b4d;--rust-dim:#532922;
    --text:#fff6e8;--muted:#c8bea9;--muted-2:#8fa1a6;
    --metal:linear-gradient(145deg,#fff2b4 0%,#ffd36f 21%,#d08735 52%,#7d431c 100%);
    --brass:linear-gradient(145deg,#fff4b5 0%,#ffd15e 24%,#c27b22 55%,#6d4317 100%);
    --aluminium:linear-gradient(145deg,#ffffff 0%,#cfd8df 34%,#8d9ca6 63%,#4e5962 100%);
    --vehicle-copper:linear-gradient(145deg,#ffe3bb 0%,#e48343 32%,#a94728 67%,#5d2518 100%);
    --zinc:linear-gradient(145deg,#eef7ff 0%,#aebec8 35%,#738891 70%,#3f4e56 100%);
  }
  body{background:radial-gradient(900px 520px at 50% -8%,rgba(101,190,179,.18),transparent 62%),linear-gradient(180deg,#1e2830 0%,#18181b 48%,#111015 100%)}
  .wrap{max-width:860px}
  header{border-bottom-color:rgba(255,255,255,.12)}
  .panel,.srcbar,.mode,.avcard,.fb,.rcard{box-shadow:0 18px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
  .panel{background:linear-gradient(180deg,rgba(50,58,67,.94),rgba(31,36,43,.98));border-color:rgba(255,255,255,.12)}
  .srcbar{background:linear-gradient(135deg,rgba(66,78,88,.92),rgba(39,46,54,.95));border-color:rgba(255,255,255,.13)}
  .mode{background:linear-gradient(150deg,rgba(61,74,83,.95),rgba(39,45,52,.98));border-color:rgba(255,255,255,.12)}
  .mode:hover:not(:disabled){border-color:#ffd36f;transform:translateY(-1px)}
  .btn{border-radius:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 7px 16px rgba(0,0,0,.28)}
  .btn.ghost{border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.04)}
  .avgrid{gap:16px}
  .avcard{position:relative;overflow:hidden;min-height:164px;background:radial-gradient(120px 70px at 50% 28%,rgba(255,255,255,.16),transparent 72%),linear-gradient(145deg,rgba(67,81,91,.96),rgba(34,40,47,.98));border-color:rgba(255,255,255,.14)}
  .avcard::before{content:"";position:absolute;inset:auto 22px 36px;height:16px;border-radius:50%;background:rgba(0,0,0,.28);filter:blur(4px)}
  .avcard:hover{border-color:#ffd36f;transform:translateY(-2px)}
  .avcard.sel{border-color:#ffdf76;box-shadow:0 0 0 2px rgba(255,211,111,.24),0 18px 38px rgba(0,0,0,.24)}
  .avcard svg{position:relative;z-index:1;width:126px;height:92px;filter:drop-shadow(0 10px 8px rgba(0,0,0,.38))}
  .avcard .n{position:relative;z-index:1;color:#fff6e8;text-shadow:0 2px 0 rgba(0,0,0,.18)}

  .pathwrap{position:relative;margin:8px auto 0;max-width:560px;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.16);background:
    radial-gradient(88px 56px at 14% 18%,rgba(117,214,189,.14),transparent 70%),
    radial-gradient(160px 86px at 86% 84%,rgba(255,211,111,.12),transparent 70%),
    linear-gradient(180deg,#31424a 0%,#253339 48%,#202931 100%);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.06),inset 0 -40px 80px rgba(0,0,0,.18),0 22px 44px rgba(0,0,0,.28)}
  .pathwrap::before{content:"";position:absolute;inset:0;z-index:0;opacity:.48;background-image:
    linear-gradient(30deg,rgba(255,255,255,.035) 12%,transparent 12%,transparent 50%,rgba(255,255,255,.035) 50%,rgba(255,255,255,.035) 62%,transparent 62%,transparent 100%),
    radial-gradient(circle at 20% 25%,rgba(0,0,0,.15) 0 2px,transparent 3px),
    radial-gradient(circle at 82% 54%,rgba(0,0,0,.12) 0 2px,transparent 3px);
    background-size:32px 32px,88px 88px,116px 116px;pointer-events:none}
  .yardroad{position:absolute;inset:0;z-index:2;overflow:visible}
  .road-edge{fill:none;stroke:#534532;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 10px 7px rgba(0,0,0,.30))}
  .road-main{fill:none;stroke:url(#roadGrad);stroke-width:11;stroke-linecap:round;stroke-linejoin:round}
  .road-ruts{fill:none;stroke:rgba(74,57,41,.5);stroke-width:5.5;stroke-linecap:round;stroke-dasharray:1 13;stroke-linejoin:round}
  .road-center{fill:none;stroke:rgba(255,243,205,.28);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:3 12}
  .road-shadow{fill:none;stroke:rgba(0,0,0,.14);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}
  .yardmark{position:absolute;z-index:1;border-radius:18px;border:1px dashed rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(0,0,0,.09));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
  .yardmark::after{content:attr(data-title);position:absolute;left:12px;top:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(233,244,247,.42)}
  .deco{position:absolute;z-index:1;pointer-events:none;transform-origin:center;filter:drop-shadow(0 8px 6px rgba(0,0,0,.28))}
  .bulkbox{width:96px;height:58px;border-radius:10px 10px 15px 15px;background:linear-gradient(165deg,#647986,#2f424c);border:2px solid rgba(255,255,255,.16);box-shadow:inset 0 12px 0 rgba(255,255,255,.07),inset 0 -12px 0 rgba(0,0,0,.22)}
  .bulkbox::before{content:"";position:absolute;inset:8px 10px 16px;border-radius:9px;background:radial-gradient(circle at 30% 35%,#ffb66f 0 6px,transparent 7px),radial-gradient(circle at 68% 55%,#d8793f 0 8px,transparent 9px),linear-gradient(135deg,#8d5d3e,#4c3829)}
  .bulkbox::after{content:attr(data-label);position:absolute;right:8px;bottom:3px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.62);letter-spacing:.08em}
  .container{width:118px;height:48px;border-radius:9px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 16px),linear-gradient(145deg,#2ec8a6,#17735f);border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 10px 0 rgba(255,255,255,.09),inset 0 -10px 0 rgba(0,0,0,.22)}
  .container.orange{background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 16px),linear-gradient(145deg,#ff9a4e,#9a3e24)}
  .container.blue{background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 16px),linear-gradient(145deg,#74b7ff,#2c5a86)}
  .scrap{width:86px;height:44px;border-radius:50% 50% 42% 42%;background:radial-gradient(circle at 25% 38%,#f7d16c 0 7px,transparent 8px),radial-gradient(circle at 56% 45%,#bd8b62 0 8px,transparent 9px),radial-gradient(circle at 70% 30%,#cbd6dc 0 6px,transparent 7px),linear-gradient(180deg,#7f6a58,#403632);border-bottom:5px solid rgba(0,0,0,.28)}
  .cone{width:26px;height:34px;background:conic-gradient(from 225deg at 50% 80%,#ff7a2f 0 25%,#ffe0b5 0 34%,#ff7a2f 0 59%,#9b351d 0 100%);clip-path:polygon(50% 0,96% 100%,4% 100%);opacity:.9}
  .pallet{width:76px;height:34px;border-radius:7px;background:repeating-linear-gradient(90deg,#9b7044 0 10px,#644a31 10px 15px);border:2px solid rgba(255,255,255,.12)}
  .beacon{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff2be 0 15%,#ff9f42 33%,#a7471f 72%,#491c10 100%);box-shadow:0 0 0 5px rgba(255,159,66,.08);animation:beaconBlink 2.8s ease-in-out infinite}
  @keyframes beaconBlink{0%,100%{opacity:.6;box-shadow:0 0 0 4px rgba(255,159,66,.06)}50%{opacity:1;box-shadow:0 0 0 10px rgba(255,159,66,.16)}}
  .minidigger{width:92px;height:78px}
  .minidigger svg{width:100%;height:100%;overflow:visible}
  .minidigger .arm-a{transform-origin:60px 38px;animation:miniDig 4.8s ease-in-out infinite}
  .minidigger .bucket-a{transform-origin:87px 22px;animation:miniBucket 4.8s ease-in-out infinite}
  .minidigger .dust{animation:miniDust 4.8s ease-in-out infinite;opacity:.1}
  @keyframes miniDig{0%,100%{transform:rotate(-6deg)}40%{transform:rotate(7deg)}70%{transform:rotate(2deg)}}
  @keyframes miniBucket{0%,100%{transform:rotate(5deg)}40%{transform:rotate(-14deg)}70%{transform:rotate(-8deg)}}
  @keyframes miniDust{0%,52%,100%{opacity:.06;transform:translate(0,0) scale(.75)}64%{opacity:.45;transform:translate(3px,-2px) scale(1)}84%{opacity:0;transform:translate(8px,-10px) scale(1.35)}}
  .node{z-index:6;width:62px;height:62px;border:4px solid rgba(255,250,220,.22);background:radial-gradient(circle at 35% 24%,#fff4bd 0%,#ffd36f 24%,#cc7e2e 62%,#6e3a1c 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -8px 13px rgba(0,0,0,.27),0 10px 16px rgba(0,0,0,.33)}
  .node::before{content:"";position:absolute;inset:-18px -20px -42px -20px;border-radius:28px}
  .node::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dashed rgba(70,42,18,.42)}
  .node span:first-child{position:relative;z-index:1}
  .node .lbl{top:65px;background:rgba(24,29,34,.8);border:1px solid rgba(255,255,255,.11);border-radius:99px;padding:3px 8px;color:#e9dbc1;backdrop-filter:blur(5px)}
  .node.locked{background:radial-gradient(circle at 35% 24%,#69737d 0%,#333d45 62%,#1f252b 100%);color:#9eb0b3;border-color:rgba(255,255,255,.09)}
  .node.done{background:radial-gradient(circle at 35% 24%,#eaffbd 0%,#87df86 31%,#3f965e 70%,#206241 100%);color:#0d2a18}
  .node.current{animation:ring 1.8s ease-in-out infinite, bobstation 2.4s ease-in-out infinite}
  @keyframes bobstation{0%,100%{margin-top:0}50%{margin-top:-4px}}
  .avatar{z-index:8;width:92px;height:68px;transform:translate(-50%,-50%) rotate(var(--heading,0deg));filter:drop-shadow(0 13px 9px rgba(0,0,0,.42));cursor:pointer}
  .avatar::before{content:"";position:absolute;left:17%;right:17%;bottom:8px;height:14px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(4px);animation:shadowDrift 3.4s ease-in-out infinite}
  .avatar.can-start:hover{filter:drop-shadow(0 14px 11px rgba(0,0,0,.46)) drop-shadow(0 0 8px rgba(255,211,111,.18))}
  .avatar svg{position:relative;z-index:1;width:100%;height:100%;display:block;transform-origin:center;animation:idleMachine 2.8s ease-in-out infinite}
  .avatar.drive svg{animation:driveWobble .42s ease-in-out infinite}
  @keyframes idleMachine{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-1.8px) rotate(.5deg)}}
  @keyframes driveWobble{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(-3px) rotate(1.6deg)}}
  @keyframes shadowDrift{0%,100%{transform:scale(1)}50%{transform:scale(.92)}}
  .smoke{position:absolute;z-index:0;left:8px;bottom:15px;width:9px;height:7px;border-radius:50%;background:rgba(220,228,227,.58);opacity:0;filter:blur(.8px);transform:scale(.4)}
  .smoke.s2{left:0;bottom:20px;width:11px;height:8px;animation-delay:1.2s!important}.smoke.s3{left:12px;bottom:24px;width:7px;height:6px;animation-delay:2.2s!important}
  .avatar.idle-fume .smoke{animation:idlePuff 5.6s ease-out infinite}
  .avatar.drive .smoke{animation:puff 1.4s ease-out infinite}
  @keyframes idlePuff{0%,78%{opacity:0;transform:translate(2px,2px) scale(.34)}88%{opacity:.28}100%{opacity:0;transform:translate(-14px,-10px) scale(1.1)}}
  @keyframes puff{0%{opacity:0;transform:translate(10px,4px) scale(.35)}22%{opacity:.5}100%{opacity:0;transform:translate(-22px,-14px) scale(1.45)}}
  .pathtip{position:absolute;right:18px;bottom:16px;z-index:7;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:rgba(18,24,29,.72);border:1px solid rgba(255,255,255,.09);color:rgba(235,241,243,.66);backdrop-filter:blur(4px)}
  .sample{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.07),transparent 45%),repeating-linear-gradient(45deg,#35424b 0 14px,#29333b 14px 28px)}
  @media(max-width:560px){.avgrid{grid-template-columns:1fr}.pathwrap{max-width:100%}.deco{transform:scale(.84)}.yardmark{transform:scale(.88)}.node .lbl{font-size:9px}.avatar{width:82px;height:60px}.pathtip{display:none}}



/* ===== v0.16 Abschnitts-Design ===== */
.pathpanel{padding:14px}
.pathscreen{display:flex;justify-content:center}
.pathwrap.section-map{
  --nodeMetalLight:#d9e1e8;--nodeMetalDark:#73818d;--accentGlow:rgba(255,255,255,.18);
  position:relative;margin:10px auto 0;max-width:420px;width:100%;overflow:hidden;border-radius:30px;
  border:1px solid rgba(255,255,255,.18);background-color:#1b2227;background-size:cover;background-position:center center;
  box-shadow:0 24px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.1)
}
.pathwrap.section-map::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(10,12,14,.06),rgba(8,10,12,.18));pointer-events:none}
.pathwrap.section-map::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 24%,transparent 74%,rgba(0,0,0,.12))}
.pathwrap.section-map .yardmark,.pathwrap.section-map .deco,.pathwrap.section-map .pathtip{display:none!important}
.pathwrap.section-map[data-group="cu"]{--nodeMetalLight:#e4a066;--nodeMetalDark:#8a3f22;--accentGlow:rgba(243,145,79,.28)}
.pathwrap.section-map[data-group="al"]{--nodeMetalLight:#eef4f9;--nodeMetalDark:#889ba8;--accentGlow:rgba(220,237,248,.26)}
.pathwrap.section-map[data-group="pb"]{--nodeMetalLight:#9d978f;--nodeMetalDark:#544d48;--accentGlow:rgba(184,178,172,.22)}
.pathwrap.section-map[data-group="zn"]{--nodeMetalLight:#d6dde5;--nodeMetalDark:#717f8b;--accentGlow:rgba(215,223,228,.22)}
.pathwrap.section-map[data-group="ni"]{--nodeMetalLight:#cfd8dc;--nodeMetalDark:#55646d;--accentGlow:rgba(215,223,228,.2)}
.section-head{position:absolute;z-index:5;left:16px;right:16px;top:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.section-title{padding:10px 14px;border-radius:18px;background:rgba(10,14,18,.64);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.section-title .small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#d6dde2;opacity:.82}
.section-title .big{display:block;margin-top:4px;font-family:var(--display);font-size:19px;color:#fff6e5;line-height:1.15}
.section-progress{padding:10px 12px;border-radius:16px;background:rgba(10,14,18,.64);border:1px solid rgba(255,255,255,.16);min-width:82px;text-align:center;backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.section-progress .num{display:block;font-family:var(--display);font-size:28px;line-height:1;color:#fff3cf}
.section-progress .lab{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#d6dde2;opacity:.8}
.pathwrap.section-map .node{z-index:6;width:72px;height:72px;border-radius:24px;border:3px solid rgba(255,248,230,.28);background:linear-gradient(165deg,var(--nodeMetalLight),var(--nodeMetalDark));color:#f8fbff;box-shadow:0 14px 20px rgba(0,0,0,.34),inset 0 2px 0 rgba(255,255,255,.36),inset 0 -10px 12px rgba(0,0,0,.22);transition:transform .28s ease, box-shadow .28s ease, filter .28s ease;overflow:visible}
.pathwrap.section-map .node::before{content:"";position:absolute;inset:-10px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 50% 50%, var(--accentGlow), transparent 70%);opacity:.65;z-index:0}
.pathwrap.section-map .node::after{display:none}
.pathwrap.section-map .node:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.04)}
.pathwrap.section-map .node span:first-child{position:relative;z-index:2;font-size:26px;line-height:1;font-family:var(--display);text-shadow:0 2px 6px rgba(0,0,0,.24)}
.pathwrap.section-map .node .lvlsub{position:absolute;left:50%;top:45px;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.pathwrap.section-map .node .lbl{top:78px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;padding:4px 9px;border-radius:999px;background:rgba(10,14,18,.74);border:1px solid rgba(255,255,255,.12);color:#f4ead2;backdrop-filter:blur(6px);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.pathwrap.section-map .node.locked{background:linear-gradient(180deg,#67737d,#293038);color:#b0bcc5;border-color:rgba(255,255,255,.09);box-shadow:0 10px 18px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.08)}
.pathwrap.section-map .node.locked .lvlsub{color:#c1ccd4}
.pathwrap.section-map .node.done{background:linear-gradient(180deg,#fff6ca,#d6a233);color:#58370b;border-color:rgba(255,246,207,.76);box-shadow:0 16px 24px rgba(0,0,0,.34),0 0 0 6px rgba(255,222,133,.14), inset 0 2px 0 rgba(255,255,255,.65)}
.pathwrap.section-map .node.done .lvlsub,.pathwrap.section-map .node.done .lbl{color:#4a3511}
.pathwrap.section-map .node.done .lbl{background:rgba(255,243,210,.88);border-color:rgba(156,112,36,.24)}
.pathwrap.section-map .node.current{animation:pathPulse 1.7s ease-in-out infinite;box-shadow:0 16px 26px rgba(0,0,0,.36),0 0 0 10px rgba(255,255,255,.12),0 0 0 18px rgba(255,222,133,.1)}
.pathwrap.section-map .node.current:not(.done){filter:brightness(1.08)}
.pathwrap.section-map .node.fresh-done{animation:levelClear 1.05s ease both}
.pathwrap.section-map .node.crown-node{width:84px;height:76px;border-radius:0 0 22px 22px;clip-path:polygon(0 100%,0 43%,18% 43%,28% 8%,50% 37%,72% 8%,82% 43%,100% 43%,100% 100%);padding-top:6px}
.pathwrap.section-map .node.crown-node::before{inset:-8px -10px -10px -10px;border-radius:0 0 24px 24px}
.pathwrap.section-map .node.crown-node .lvlsub{top:44px}
.pathwrap.section-map .node.crown-node .lbl{top:82px}
.pathwrap.section-map .crownsvg{width:32px;height:32px;display:block;position:relative;z-index:2;margin:0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.pathwrap.section-map .avatar{z-index:8;width:82px;height:112px;filter:drop-shadow(0 16px 11px rgba(0,0,0,.34));transform:translate(-50%,-50%) rotate(var(--heading,0deg));cursor:pointer}
.pathwrap.section-map .avatar::before{content:"";position:absolute;left:16%;right:16%;bottom:10px;height:16px;border-radius:50%;background:rgba(0,0,0,.2);filter:blur(5px);animation:shadowDrift 1.8s ease-in-out infinite}
.pathwrap.section-map .avatar svg{width:100%;height:100%;display:block;animation:idleMachine 2.3s ease-in-out infinite}
.pathwrap.section-map .avatar.drive svg{animation:driveWobble .32s ease-in-out infinite}
.pathwrap.section-map .avatar.can-start:hover{filter:drop-shadow(0 18px 12px rgba(0,0,0,.38)) drop-shadow(0 0 8px rgba(255,220,135,.18))}
.pathwrap.section-map .dust{position:absolute;z-index:0;left:50%;bottom:10px;width:12px;height:8px;border-radius:50%;background:rgba(200,192,176,.55);opacity:0;filter:blur(1px);transform:translateX(-50%) scale(.35)}
.pathwrap.section-map .dust.d2{left:42%;bottom:18px;width:10px;height:7px;animation-delay:.28s!important}
.pathwrap.section-map .dust.d3{left:58%;bottom:20px;width:9px;height:6px;animation-delay:.55s!important}
.pathwrap.section-map .avatar.drive .dust{animation:pathDust .82s ease-out infinite}
.pathwrap.section-map .avatar.idle-fume .dust{animation:pathDustIdle 3.4s ease-out infinite}
@keyframes pathPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes levelClear{0%{transform:translate(-50%,-50%) scale(1);background:linear-gradient(165deg,var(--nodeMetalLight),var(--nodeMetalDark));color:#f8fbff}55%{transform:translate(-50%,-50%) scale(1.11);background:linear-gradient(180deg,#ffeaa7,#f0bf48);color:#5b3907}100%{transform:translate(-50%,-50%) scale(1);background:linear-gradient(180deg,#fff6ca,#d6a233);color:#58370b}}
@keyframes pathDust{0%{opacity:0;transform:translate(-50%,0) scale(.3)}18%{opacity:.55}100%{opacity:0;transform:translate(-50%,-24px) scale(1.3)}}
@keyframes pathDustIdle{0%,72%{opacity:0;transform:translate(-50%,0) scale(.3)}80%{opacity:.28}100%{opacity:0;transform:translate(-50%,-16px) scale(1.05)}}
@media(max-width:560px){.pathpanel{padding:10px}.section-title .big{font-size:17px}.section-progress .num{font-size:24px}.pathwrap.section-map .node{width:64px;height:64px}.pathwrap.section-map .node span:first-child{font-size:23px}.pathwrap.section-map .node .lvlsub{top:39px;font-size:9px}.pathwrap.section-map .node .lbl{top:69px;font-size:8px;max-width:112px;padding:3px 8px}.pathwrap.section-map .node.crown-node{width:76px;height:70px}.pathwrap.section-map .node.crown-node .lvlsub{top:40px}.pathwrap.section-map .node.crown-node .lbl{top:75px}.pathwrap.section-map .avatar{width:72px;height:98px}}


/* ===== Fahrzeug-PNGs v0.16.2 ===== */
.avcard{padding:14px 12px 12px}
.avcard .vehpick{width:118px;height:110px;object-fit:contain;display:block;filter:drop-shadow(0 10px 10px rgba(0,0,0,.22))}
.avcard .n{margin-top:2px}
.pathwrap.section-map .avatar{width:98px;height:134px;transform:translate(-50%,-50%) rotate(var(--heading,0deg));}
.pathwrap.section-map .avatar .vehimg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;transform-origin:center;animation:idleMachine 2.3s ease-in-out infinite}
.pathwrap.section-map .avatar.drive .vehimg{animation:driveWobble .32s ease-in-out infinite}
@media(max-width:560px){.avcard .vehpick{width:96px;height:96px}.pathwrap.section-map .avatar{width:84px;height:116px}}


/* ===== Lernmodus / Abschnittsmodus v0.16.3 ===== */
.journey-panel{margin-bottom:16px}
.journey-map{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 16px}
.jstep{border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center;background:var(--surface-2);min-height:72px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.jstep .num{font-family:var(--display);font-size:20px;color:var(--gold);line-height:1}
.jstep .name{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.jstep .state{font-size:10px;color:var(--muted-2)}
.jstep.done{border-color:rgba(255,211,111,.7);background:linear-gradient(180deg,rgba(255,211,111,.22),rgba(142,94,30,.18))}
.jstep.current{border-color:var(--copper-bright);box-shadow:0 0 0 2px rgba(216,121,63,.18)}
.jstep.locked{opacity:.5}
.modecard{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface-2);margin-top:12px}
.modecard h2{font-family:var(--display);text-transform:uppercase;margin:0 0 5px;font-size:20px;letter-spacing:.03em}
.modecard p{margin:0;color:var(--muted);font-size:13px}
@media(max-width:560px){.journey-map{grid-template-columns:1fr}.jstep{min-height:auto;align-items:center;flex-direction:row;justify-content:space-between;padding:10px 12px}.jstep .name{font-size:10px}}


/* ===== scrapIQ v0.17.1: PIN-Gate im Kupfer-Style ===== */
body.gate-locked{overflow:hidden}
.access-gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(900px 540px at 50% 20%,rgba(199,116,59,.28),transparent 62%),linear-gradient(160deg,#0c0906 0%,#17100a 45%,#060504 100%);color:#fff6e8;font-family:var(--body);transition:opacity .22s ease,transform .22s ease;overflow:hidden}
.access-gate.gate-leave{opacity:0;transform:scale(1.015);pointer-events:none}
.gate-bg-orb{position:absolute;border-radius:50%;filter:blur(28px);opacity:.55;pointer-events:none}
.gate-bg-orb.orb-a{width:280px;height:280px;left:-80px;top:16%;background:rgba(208,137,79,.3)}
.gate-bg-orb.orb-b{width:340px;height:340px;right:-140px;bottom:6%;background:rgba(255,211,111,.14)}
.gate-card{position:relative;width:min(410px,100%);border:1px solid rgba(255,211,111,.32);border-radius:28px;padding:30px 22px 24px;background:linear-gradient(180deg,rgba(42,31,22,.9),rgba(18,13,9,.96));box-shadow:0 28px 90px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);text-align:center;backdrop-filter:blur(12px)}
.gate-card:before{content:"";position:absolute;inset:10px;border-radius:22px;border:1px solid rgba(255,255,255,.05);pointer-events:none}
.gate-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--copper-bright);margin-bottom:12px}
.gate-card h1{font-family:var(--display);font-size:54px;line-height:.95;margin:0;text-transform:uppercase;letter-spacing:.04em;color:#f7efe2;text-shadow:0 8px 22px rgba(0,0,0,.45)}
.gate-card h1 span{color:#19e0ef;text-shadow:0 0 14px rgba(25,224,239,.35)}
.gate-lead{margin:14px 0 16px;color:#d8c9b4;font-size:16px}
.pin-dots{display:flex;justify-content:center;gap:10px;margin:0 0 12px}
.pin-dots i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,211,111,.6);background:rgba(255,211,111,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.pin-dots i.on{background:linear-gradient(145deg,#ffe0a7,#c7743b);border-color:#ffd36f;box-shadow:0 0 16px rgba(255,180,90,.45)}
.pin-error{height:22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#ff927d;text-transform:uppercase}
.gate-card.shake{animation:gateShake .24s ease}
@keyframes gateShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px auto 0;max-width:286px}
.pin-pad button{height:58px;border-radius:18px;border:1px solid rgba(255,211,111,.24);background:linear-gradient(180deg,rgba(65,45,29,.92),rgba(31,22,15,.96));color:#fff1dd;font-family:var(--display);font-size:22px;font-weight:700;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.26);touch-action:manipulation}
.pin-pad button:hover{border-color:rgba(255,211,111,.55);filter:brightness(1.08)}
.pin-pad button:active{transform:translateY(1px);filter:brightness(.98)}
.pin-pad .pin-action{font-size:18px;color:var(--copper-bright)}
.gate-foot{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8f7c68}
@media(max-width:420px){.access-gate{padding:14px}.gate-card{padding:26px 16px 20px;border-radius:24px}.gate-card h1{font-size:46px}.pin-pad{gap:9px;max-width:270px}.pin-pad button{height:54px;border-radius:16px}}
@media (prefers-reduced-motion:reduce){.access-gate,.gate-card.shake{transition:none!important;animation:none!important}}