@font-face{font-family:'FinBold';src:url('fonts/spyagency3_2boldital.ttf') format('truetype');font-display:swap}
@font-face{font-family:'FinCond';src:url('fonts/spyagency3_2cond.ttf') format('truetype');font-display:swap}

:root{
  --core:#ffffff; --accent:#ff8c8c; --support:#ffffff;
  --edge:#c0e1ff; --laser:#2ff3d6;
}
*{box-sizing:border-box}
html,body{margin:0;background:transparent;overflow:hidden}

.overlay{position:relative;width:400px;height:136px;transform-origin:0 0}

.frame{position:absolute;left:48px;top:13px;width:324px;height:87px;border-radius:30px;
  background-color:transparent;

  background-image:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.065) 0,rgba(255,255,255,0) 1.8px,rgba(255,255,255,0) 5px),
    linear-gradient(180deg,rgba(39,39,39,.9),rgba(20,20,20,.9));
  background-size:auto,100% 100%;
  box-shadow:
    inset 0 0 0 1.5px var(--edge),
    inset 0 3px 8px rgba(0,0,0,.3),
    inset 0 -2px 5px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(0,0,0,.4),
    0 7px 16px rgba(0,0,0,.45);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--edge) 35%,transparent))}
.frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%)}

.overlay[data-rim="glass"] .frame{
  background:rgba(18,22,28,.72);
  -webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -8px 20px rgba(0,0,0,.22),0 8px 22px rgba(0,0,0,.4);
  filter:none}
.overlay[data-rim="glass"] .frame::before{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 42%)}

.overlay[data-rim="neon"] .frame{
  background:rgba(8,10,14,.88);
  box-shadow:inset 0 0 0 1.5px var(--edge),
    inset 0 0 9px color-mix(in srgb,var(--edge) 28%,transparent),
    0 0 4px var(--edge),
    0 0 9px color-mix(in srgb,var(--edge) 60%,transparent),
    0 6px 16px rgba(0,0,0,.5);
  filter:none}
.overlay[data-rim="neon"] .frame::before{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%)}

.overlay[data-rim="clean"] .frame{
  background:rgba(8,10,14,.82);
  box-shadow:none;
  filter:none}
.overlay[data-rim="clean"] .frame::before{background:none}

.overlay[data-rim="brushed"] .frame{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,rgba(0,0,0,.05) 1px 2px),
    linear-gradient(180deg,rgba(60,65,71,.9),rgba(35,39,44,.9) 52%,rgba(48,53,59,.9));
  background-size:2px 100%,100% 100%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 6px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.45);
  filter:none}
.overlay[data-rim="brushed"] .frame::before{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 50%)}

.overlay[data-rim="angular"] .frame{border-radius:0;
  clip-path:polygon(40px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,14px 100%,0 calc(100% - 14px),0 40px);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.28),0 7px 16px rgba(0,0,0,.45);
  filter:none}
.overlay[data-rim="angular"] .frame::before{border-radius:0;
  clip-path:polygon(40px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,14px 100%,0 calc(100% - 14px),0 40px);
  background:
    linear-gradient(135deg,var(--edge) 0 13px,transparent 13px) left top/44px 44px no-repeat,
    linear-gradient(315deg,var(--edge) 0 13px,transparent 13px) right bottom/44px 44px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 45%)}
.overlay[data-rim="angular"] .comet .p{
  offset-path:path("M1.5 60 L1.5 40 L40 1.5 L322.5 1.5 L322.5 47 L284 85.5 L14 85.5 L1.5 73 Z")}

.overlay[data-rim="aglass"] .frame{border-radius:0;
  clip-path:polygon(40px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,14px 100%,0 calc(100% - 14px),0 40px);
  background:rgba(18,22,28,.72);
  -webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);
  box-shadow:inset 0 -8px 20px rgba(0,0,0,.22);
  filter:none}
.overlay[data-rim="aglass"] .frame::before{border-radius:0;
  clip-path:polygon(40px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,14px 100%,0 calc(100% - 14px),0 40px);
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 42%)}
.overlay[data-rim="aglass"] .comet .p{
  offset-path:path("M1.5 60 L1.5 40 L40 1.5 L322.5 1.5 L322.5 47 L284 85.5 L14 85.5 L1.5 73 Z")}

.overlay[data-rim="chipped"] .frame{border-radius:0;
  clip-path:polygon(30.8px 9.2px,36.0px 6.9px,44.7px 5.9px,46.2px 2.5px,50.6px 0.0px,52.4px -0.2px,56.9px 0.0px,59.0px 3.2px,61.6px 3.5px,63.8px 1.4px,65.5px 0.0px,70.5px 0.0px,71.4px 2.3px,72.5px 2.5px,73.5px 1.0px,74.2px 0.0px,83.0px 0.0px,84.2px 1.9px,85.7px 2.1px,86.9px 0.8px,87.9px 0.0px,97.7px 0.0px,100.0px 3.9px,102.8px 4.3px,105.0px 1.7px,106.9px 0.0px,112.2px 0.2px,134.6px 0.0px,137.7px 3.2px,141.5px 3.6px,144.7px 1.4px,147.2px 0.0px,197.6px 0.2px,207.7px 0.0px,208.9px 7.3px,210.1px 0.0px,231.7px -0.4px,240.1px 0.0px,241.4px 5.4px,242.7px 0.0px,262.8px 0.0px,268.7px 0.6px,274.6px 0.7px,279.6px 0.4px,282.5px 0.0px,287.2px 0.0px,287.7px 1.9px,289.5px 2.1px,289.7px 4.2px,291.8px 4.0px,292.3px 0.0px,299.5px 0.4px,304.6px 0.0px,306.6px 4.0px,309.1px 4.4px,311.2px 1.8px,312.8px 0.0px,317.0px 0.0px,316.3px 2.1px,318.1px 3.6px,318.4px 5.4px,316.2px 7.8px,321.4px 8.5px,324.0px 9.8px,324.0px 12.2px,322.8px 16.4px,322.5px 20.5px,323.3px 24.0px,324.0px 26.0px,324.0px 47.0px,315.8px 55.2px,309.9px 59.5px,304.7px 64.3px,301.0px 69.0px,299.0px 72.0px,284.0px 87.0px,269.6px 87.0px,266.9px 81.4px,263.7px 80.7px,261.0px 84.5px,258.9px 87.0px,257.3px 87.0px,250.5px 86.2px,243.8px 85.9px,238.2px 86.5px,234.8px 87.0px,230.5px 87.0px,229.4px 84.5px,228.0px 84.2px,226.9px 85.9px,226.1px 87.0px,217.0px 87.0px,209.2px 85.5px,201.4px 85.1px,194.8px 86.1px,190.9px 87.0px,177.7px 87.0px,176.4px 85.1px,172.0px 84.8px,171.4px 82.7px,166.3px 82.9px,165.0px 87.0px,159.3px 87.0px,158.4px 78.7px,157.6px 87.0px,156.3px 87.0px,155.6px 85.9px,153.0px 85.8px,152.6px 84.5px,149.6px 84.6px,148.8px 87.0px,143.9px 87.0px,142.2px 82.9px,140.1px 82.4px,138.4px 85.2px,137.1px 87.0px,77.0px 87.4px,41.5px 87.0px,23.4px 87.0px,22.5px 84.7px,18.3px 83.4px,15.2px 81.8px,10.9px 80.5px,6.2px 79.2px,0.0px 73.0px,-0.1px 59.7px,0.0px 40.0px,11.2px 28.8px,12.9px 29.1px,15.4px 26.8px,16.8px 27.5px,19.4px 24.7px,18.1px 21.9px,20.9px 19.1px);
  background:rgba(18,22,28,.72);
  -webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);
  box-shadow:inset 0 -8px 20px rgba(0,0,0,.22);
  filter:none}
.overlay[data-rim="chipped"] .frame::before{border-radius:0;
  clip-path:polygon(30.8px 9.2px,36.0px 6.9px,44.7px 5.9px,46.2px 2.5px,50.6px 0.0px,52.4px -0.2px,56.9px 0.0px,59.0px 3.2px,61.6px 3.5px,63.8px 1.4px,65.5px 0.0px,70.5px 0.0px,71.4px 2.3px,72.5px 2.5px,73.5px 1.0px,74.2px 0.0px,83.0px 0.0px,84.2px 1.9px,85.7px 2.1px,86.9px 0.8px,87.9px 0.0px,97.7px 0.0px,100.0px 3.9px,102.8px 4.3px,105.0px 1.7px,106.9px 0.0px,112.2px 0.2px,134.6px 0.0px,137.7px 3.2px,141.5px 3.6px,144.7px 1.4px,147.2px 0.0px,197.6px 0.2px,207.7px 0.0px,208.9px 7.3px,210.1px 0.0px,231.7px -0.4px,240.1px 0.0px,241.4px 5.4px,242.7px 0.0px,262.8px 0.0px,268.7px 0.6px,274.6px 0.7px,279.6px 0.4px,282.5px 0.0px,287.2px 0.0px,287.7px 1.9px,289.5px 2.1px,289.7px 4.2px,291.8px 4.0px,292.3px 0.0px,299.5px 0.4px,304.6px 0.0px,306.6px 4.0px,309.1px 4.4px,311.2px 1.8px,312.8px 0.0px,317.0px 0.0px,316.3px 2.1px,318.1px 3.6px,318.4px 5.4px,316.2px 7.8px,321.4px 8.5px,324.0px 9.8px,324.0px 12.2px,322.8px 16.4px,322.5px 20.5px,323.3px 24.0px,324.0px 26.0px,324.0px 47.0px,315.8px 55.2px,309.9px 59.5px,304.7px 64.3px,301.0px 69.0px,299.0px 72.0px,284.0px 87.0px,269.6px 87.0px,266.9px 81.4px,263.7px 80.7px,261.0px 84.5px,258.9px 87.0px,257.3px 87.0px,250.5px 86.2px,243.8px 85.9px,238.2px 86.5px,234.8px 87.0px,230.5px 87.0px,229.4px 84.5px,228.0px 84.2px,226.9px 85.9px,226.1px 87.0px,217.0px 87.0px,209.2px 85.5px,201.4px 85.1px,194.8px 86.1px,190.9px 87.0px,177.7px 87.0px,176.4px 85.1px,172.0px 84.8px,171.4px 82.7px,166.3px 82.9px,165.0px 87.0px,159.3px 87.0px,158.4px 78.7px,157.6px 87.0px,156.3px 87.0px,155.6px 85.9px,153.0px 85.8px,152.6px 84.5px,149.6px 84.6px,148.8px 87.0px,143.9px 87.0px,142.2px 82.9px,140.1px 82.4px,138.4px 85.2px,137.1px 87.0px,77.0px 87.4px,41.5px 87.0px,23.4px 87.0px,22.5px 84.7px,18.3px 83.4px,15.2px 81.8px,10.9px 80.5px,6.2px 79.2px,0.0px 73.0px,-0.1px 59.7px,0.0px 40.0px,11.2px 28.8px,12.9px 29.1px,15.4px 26.8px,16.8px 27.5px,19.4px 24.7px,18.1px 21.9px,20.9px 19.1px);
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 42%)}
.overlay[data-rim="chipped"] .comet .p{
  offset-path:path("M1.5 60 L1.5 40 L40 1.5 L322.5 1.5 L322.5 47 L284 85.5 L14 85.5 L1.5 73 Z")}
.chip-art{position:absolute;left:48px;top:13px;width:324px;height:87px;overflow:visible;z-index:2;pointer-events:none}

.rim-line{position:absolute;left:48px;top:13px;width:324px;height:87px;overflow:visible;
  z-index:2;pointer-events:none;display:none;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--edge) 55%,transparent))}
.rim-line .rl-out{fill:none;stroke:var(--edge);stroke-width:1.6}
.rim-line .rl-in{fill:none;stroke:color-mix(in srgb,var(--edge) 42%,transparent);stroke-width:1.1}
.overlay[data-rim="angular"] .rim-line{display:block}
.overlay[data-rim="aglass"] .rim-line{display:block;filter:none}
.overlay[data-rim="aglass"] .rim-line .rl-out{stroke:rgba(255,255,255,.3);stroke-width:1}
.overlay[data-rim="aglass"] .rim-line .rl-in{display:none}

.comet{position:absolute;left:48px;top:13px;width:324px;height:87px;z-index:1;pointer-events:none;
  filter:blur(.9px)}
.comet .p{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,var(--laser) 0%,color-mix(in srgb,var(--laser) 45%,transparent) 42%,transparent 70%);
  offset-path:path("M1.2 43.5 L1.2 30 A28.8 28.8 0 0 1 30 1.2 L294 1.2 A28.8 28.8 0 0 1 322.8 30 L322.8 57 A28.8 28.8 0 0 1 294 85.8 L30 85.8 A28.8 28.8 0 0 1 1.2 57 Z");
  offset-rotate:0deg;transform:scale(var(--s,1));opacity:var(--o,1);
  animation:comet var(--laser-dur,12s) linear infinite;
  animation-delay:calc(var(--laser-dur,12s)*var(--d,0))}

.ov-icon{position:absolute;left:-4px;top:-11px;width:133px;height:133px;z-index:3;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}

.ov-content{position:absolute;inset:0;left:2px;z-index:2;font-family:'FinCond',sans-serif}

.ov-league{position:absolute;left:114px;top:19px;font-family:'FinBold',sans-serif;
  font-size:27px;line-height:1;letter-spacing:.01em;
  color:var(--core);text-transform:uppercase;white-space:nowrap}
.ov-name{position:absolute;left:114px;top:76px;font-family:'FinCond',sans-serif;
  font-size:11px;letter-spacing:.11em;color:#8b9096;text-transform:uppercase;white-space:nowrap}

.ov-row{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.ov-row.show{opacity:1}
.ov-row .lbl{position:absolute;top:53px;left:114px;font-size:15px;letter-spacing:.03em;
  color:var(--accent);text-transform:uppercase}
.ov-row .val{position:absolute;top:50.5px;font-size:20px;color:var(--core);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ov-row .tag{position:absolute;top:55px;transform:translateY(.2px);font-family:'FinCond',sans-serif;font-size:11px;
  letter-spacing:.14em;color:#7e848b}
.ov-row .arr{position:absolute;top:54.25px;left:293px;width:13px;height:14px}
.ov-row .arr::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.arr.up::before{border-left:5.5px solid transparent;border-right:5.5px solid transparent;border-bottom:9.5px solid currentColor}
.arr.down::before{border-left:5.5px solid transparent;border-right:5.5px solid transparent;border-top:9.5px solid currentColor}
.arr.zero::before{width:9.5px;height:9.5px;border-radius:50%;background:currentColor}
.arr.up::before,.arr.down::before,.arr.zero::before{animation:arrPulse 2.6s ease-in-out infinite}
@keyframes arrPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6;filter:drop-shadow(0 0 0 transparent)}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:1;filter:drop-shadow(0 0 3px currentColor)}}
.ov-row .diff{position:absolute;top:53.5px;left:307px;font-size:15px;color:var(--support);
  font-variant-numeric:tabular-nums}
.up{color:#53e07a}.down{color:#ff5a6a}.zero{color:#8b9096}

.ov-notice{position:absolute;left:48px;top:13px;width:324px;height:87px;z-index:2;padding:0 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px}
.ov-notice-title{font-family:'FinBold',sans-serif;font-size:26px;line-height:1;letter-spacing:.02em;
  color:var(--core);text-transform:uppercase}
.ov-notice-sub{font-family:'FinCond',sans-serif;font-size:13px;letter-spacing:.08em;
  color:#aeb8c0;text-transform:uppercase}
.ov-notice-url{font-family:'FinCond',sans-serif;font-size:13px;letter-spacing:.12em;
  color:var(--edge);text-transform:lowercase}

/* ---- Rotation: Uebergaenge (data-fx) ---- */
.rows{position:absolute;inset:0}
.overlay[data-fx="slide"] .rows{clip-path:inset(44px 0 58px 0)}
.overlay[data-fx="slide"] .ov-row{transform:translateY(28px);opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s}
.overlay[data-fx="slide"] .ov-row.show{transform:none;opacity:1}
.overlay[data-fx="slide"] .ov-row.out{transform:translateY(-28px);opacity:0}

.overlay[data-fx="wipe"] .ov-row{opacity:0;transition:none}
.overlay[data-fx="wipe"] .ov-row.show{opacity:1;animation:wIn .5s cubic-bezier(.6,0,.2,1) forwards}
.overlay[data-fx="wipe"] .ov-row.out{opacity:1;animation:wOut .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes wIn{from{clip-path:polygon(0 0,108px 0,108px 136px,0 136px)}to{clip-path:polygon(0 0,372px 0,372px 136px,0 136px)}}
@keyframes wOut{from{clip-path:polygon(108px 0,400px 0,400px 136px,108px 136px)}to{clip-path:polygon(372px 0,400px 0,400px 136px,372px 136px)}}
.scan{display:none;position:absolute;top:46px;height:30px;left:0;width:2px;z-index:3;opacity:0;
  background:linear-gradient(180deg,transparent,var(--edge) 18%,var(--edge) 82%,transparent);
  box-shadow:0 0 12px 2px var(--edge)}
.scan::before{content:"";position:absolute;right:2px;top:0;bottom:0;width:64px;background:var(--edge);opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.overlay[data-fx="wipe"] .scan{display:block}
.scan.go{animation:scanGo .5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes scanGo{0%{left:107px;opacity:0}10%{opacity:1}50%{opacity:1}82%{opacity:0}100%{left:371px;opacity:0}}

.overlay[data-fx="focus"] .ov-row{transform-origin:50% 62px;filter:blur(8px);opacity:0;transform:scale(1.12);
  transition:filter .55s,opacity .45s,transform .55s ease}
.overlay[data-fx="focus"] .ov-row.show{filter:none;opacity:1;transform:none}
.overlay[data-fx="focus"] .ov-row.out{filter:blur(8px);opacity:0;transform:scale(.9)}

.overlay[data-fx="decode"] .ov-row{transition:opacity .2s}

/* ---- Fortschritt (data-prog) ---- */
.pg,.tm{display:none;position:absolute;z-index:3}
.overlay[data-prog="dots"] .pg{display:flex;left:358px;top:42px;height:31px;flex-direction:column;justify-content:center;gap:8px}
.overlay[data-prog="bar"] .tm{display:block;left:114px;top:94px;width:224px;height:2px;
  background:rgba(255,255,255,.1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pg i{display:block;width:5px;height:5px;transform:rotate(45deg);background:rgba(255,255,255,.22);transition:background .3s,box-shadow .3s}
.pg i.on{background:var(--edge);box-shadow:0 0 6px var(--edge)}
.tm b{display:block;height:100%;width:100%;opacity:.85;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--edge) 80%,transparent);transform:scaleX(0)}
.tm b.run{animation:tmRun var(--rot,5000ms) linear forwards}
@keyframes tmRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* eckige Formen: Punkte hoeher wegen Schraege, Linie schmaler */
.overlay[data-rim="angular"][data-prog="dots"] .pg,
.overlay[data-rim="aglass"][data-prog="dots"] .pg,
.overlay[data-rim="chipped"][data-prog="dots"] .pg{left:354px;top:24px}
.overlay[data-rim="angular"][data-prog="bar"] .tm,
.overlay[data-rim="aglass"][data-prog="bar"] .tm,
.overlay[data-rim="chipped"][data-prog="bar"] .tm{top:91px;width:196px}

/* ---- Style: Split Plate (data-rim="split") ---- */
.overlay[data-rim="split"] .frame{border-radius:0;
  clip-path:polygon(13px 28px,100% 28px,100% calc(100% - 40px),calc(100% - 40px) 100%,14px 100%,0 calc(100% - 14px),0 40px);
  background:rgba(18,22,28,.72);
  -webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);
  box-shadow:none;filter:none}
.overlay[data-rim="split"] .frame::before{border-radius:0;
  clip-path:polygon(13px 28px,100% 28px,100% calc(100% - 40px),calc(100% - 40px) 100%,14px 100%,0 calc(100% - 14px),0 40px);
  background:linear-gradient(180deg,transparent 28px,rgba(255,255,255,.14) 28px,transparent 65px)}
.split-art{position:absolute;left:0;top:0;width:400px;height:136px;overflow:visible;z-index:2;pointer-events:none}
.overlay[data-rim="split"] .comet .p{
  offset-path:path("M1.5 60 L1.5 40 L13.5 28.5 L322.5 28.5 L322.5 47 L284 85.5 L14 85.5 L1.5 73 Z")}
.overlay[data-rim="split"] .ov-league{left:110px;width:190px;text-align:center;top:22px;font-size:17px;letter-spacing:.02em;color:#0c1014}
.overlay[data-rim="split"][data-prog="dots"] .ov-league{width:148px}
.overlay[data-rim="split"][data-prog="bar"] .tm{top:91px;width:196px}
.overlay[data-rim="split"][data-prog="dots"] .pg{left:auto;right:101px;top:28px;height:auto;flex-direction:row;justify-content:flex-start;gap:9px}
.overlay[data-rim="split"] .pg i{width:6px;height:6px;background:rgba(12,16,20,.28);box-shadow:none}
.overlay[data-rim="split"] .pg i.on{background:#0c1014;box-shadow:none}