/* BitUcation Gurkenjagd – Spielseite v1.4.0 | Stand: 14.11.2026 */
#bitu-wrap-gurke{
  --surface:#ffffff;--surface2:#f0f0f0;--border:#e0e0e0;--border-focus:#cccccc;
  --orange:#ED7807;--orange-dim:rgba(237,120,7,.10);--orange-glow:rgba(237,120,7,.20);
  --text:#1a1a1a;--muted:#888888;--green:#4f8a2b;
  --sans:'Space Grotesk',system-ui,sans-serif;
  --head:'Syne','Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  max-width:760px;margin:0 auto;padding:0;
  display:flex;flex-direction:column;gap:1rem;
  font-family:var(--sans);color:var(--text);font-size:16px;line-height:1.55;
}
#bitu-wrap-gurke *,#bitu-wrap-gurke *::before,#bitu-wrap-gurke *::after{box-sizing:border-box}
#bitu-wrap-gurke [hidden]{display:none!important}
#bitu-wrap-gurke .bgk-card{
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:1.25rem 1.5rem;box-shadow:0 1px 4px rgba(0,0,0,.06);
}
#bitu-wrap-gurke .bgk-a1{animation:bgkUp .6s 0s ease both}
#bitu-wrap-gurke .bgk-a2{animation:bgkUp .6s .1s ease both}
#bitu-wrap-gurke .bgk-a3{animation:bgkUp .6s .2s ease both}
#bitu-wrap-gurke .bgk-a4{animation:bgkUp .6s .3s ease both}
@keyframes bgkUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

#bitu-wrap-gurke .bgk-label{
  display:flex;align-items:center;gap:.45rem;margin:0 0 .75rem;
  font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:700;
}
#bitu-wrap-gurke .bgk-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
#bitu-wrap-gurke .bgk-h1{
  font-family:var(--head);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.1;margin:0 0 .6rem;color:var(--text);
}
#bitu-wrap-gurke .bgk-accent{color:var(--orange)}
#bitu-wrap-gurke .bgk-lead{margin:0 0 .9rem;font-size:1.02rem}
#bitu-wrap-gurke .bgk-status{
  background:var(--surface2);border-radius:12px;padding:.65rem .9rem;font-size:.92rem;
}
#bitu-wrap-gurke .bgk-sim{display:inline-block;margin-top:.35rem;font-size:.78rem;color:#b35900}
#bitu-wrap-gurke p{margin:.5rem 0}
#bitu-wrap-gurke a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#bitu-wrap-gurke a:hover{color:var(--orange)}
#bitu-wrap-gurke .bgk-muted{color:var(--muted);font-size:.9rem}
#bitu-wrap-gurke .bgk-tiny{color:var(--muted);font-size:.72rem;text-align:center;margin-top:.9rem}
#bitu-wrap-gurke .bgk-center{text-align:center}
#bitu-wrap-gurke .bgk-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.6rem}

#bitu-wrap-gurke .bgk-btn{
  display:inline-block;background:none;border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:.45rem .85rem;font:inherit;font-size:.88rem;cursor:pointer;
  text-decoration:none;transition:all .2s ease;
}
#bitu-wrap-gurke .bgk-btn:hover{border-color:var(--orange);color:var(--orange)}
#bitu-wrap-gurke .bgk-btn:focus-visible,#bitu-wrap-gurke [data-tab]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--orange-glow);border-color:var(--orange)}

#bitu-wrap-gurke .bgk-skeleton{height:84px;border-radius:12px;background:linear-gradient(90deg,#f3f3f3 0%,#e9e9e9 50%,#f3f3f3 100%);background-size:200% 100%;animation:bgkShimmer 1.4s linear infinite}
@keyframes bgkShimmer{to{background-position:-200% 0}}

/* Pot */
#bitu-wrap-gurke .bgk-pot{text-align:center;font-family:var(--mono);font-weight:700;line-height:1.1;margin-top:.2rem}
#bitu-wrap-gurke .bgk-pot-sats{font-size:clamp(2rem,8vw,2.8rem);color:var(--orange)}
#bitu-wrap-gurke .bgk-pot-unit{font-size:1rem;color:var(--muted)}
#bitu-wrap-gurke .bgk-pot-eur{text-align:center;font-family:var(--mono);color:var(--muted);margin-top:.25rem}
#bitu-wrap-gurke .bgk-pay{margin-top:1rem;border-top:1px solid var(--border);padding-top:1rem}
#bitu-wrap-gurke .bgk-pay-intro{text-align:center;font-weight:700;margin:0 0 .6rem}
#bitu-wrap-gurke .bgk-tabs{display:flex;justify-content:center;gap:.4rem;margin-bottom:.8rem}
#bitu-wrap-gurke [data-tab]{
  background:none;border:1px solid var(--border);border-radius:8px;padding:.35rem .8rem;
  font:inherit;font-size:.82rem;color:var(--muted);cursor:pointer;transition:all .2s ease;
}
#bitu-wrap-gurke [data-tab][aria-selected="true"]{background:var(--surface2);color:var(--text);border-color:var(--border-focus)}
#bitu-wrap-gurke .bgk-qr{width:180px;max-width:70%;margin:0 auto;padding:6px;background:#fff;border:1px solid var(--border);border-radius:12px}
#bitu-wrap-gurke .bgk-qr svg{display:block;width:100%;height:auto}
#bitu-wrap-gurke .bgk-addr{
  margin:.7rem auto 0;max-width:420px;font-family:var(--mono);font-size:.78rem;word-break:break-all;
  text-align:center;background:var(--surface2);border-radius:10px;padding:.5rem .7rem;
}
#bitu-wrap-gurke .is-cracked{border-color:var(--border-focus)}
#bitu-wrap-gurke .bgk-cracked{font-family:var(--head);font-weight:800;font-size:clamp(1.6rem,6vw,2.2rem);text-align:center;margin:.2rem 0 .6rem}
#bitu-wrap-gurke .bgk-lesson{background:var(--surface2);border-radius:12px;padding:.8rem 1rem}

/* Album */
#bitu-wrap-gurke .bgk-progress-head{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.35rem}
#bitu-wrap-gurke .bgk-progress-head span:last-child{font-family:var(--mono);color:var(--muted)}
#bitu-wrap-gurke .bgk-progress{height:8px;border-radius:8px;background:var(--surface2);overflow:hidden;margin-bottom:1rem}
#bitu-wrap-gurke .bgk-progress i{display:block;height:100%;background:var(--green);border-radius:8px;transition:width .6s ease}
#bitu-wrap-gurke .bgk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
@media (max-width:520px){#bitu-wrap-gurke .bgk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
#bitu-wrap-gurke .bgk-slot{
  border:1px dashed var(--border-focus);border-radius:10px;padding:.4rem .5rem;min-height:52px;
  display:flex;flex-direction:column;justify-content:center;background:#fafafa;
}
#bitu-wrap-gurke .bgk-slot span{font-family:var(--mono);font-size:.62rem;color:var(--muted);letter-spacing:.05em}
#bitu-wrap-gurke .bgk-slot strong{font-family:var(--mono);font-size:.88rem;font-weight:700;color:#c4c4c4;overflow-wrap:anywhere}
#bitu-wrap-gurke .bgk-slot.has{border-style:solid;border-color:var(--border);background:var(--surface)}
#bitu-wrap-gurke .bgk-slot.has strong{color:var(--text)}
#bitu-wrap-gurke .bgk-album-wrap{position:relative}
#bitu-wrap-gurke .bgk-grid.is-locked{filter:blur(2px);opacity:.55;pointer-events:none}
#bitu-wrap-gurke .bgk-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1rem;
}
#bitu-wrap-gurke .bgk-overlay p{background:rgba(255,255,255,.92);border-radius:10px;padding:.4rem .8rem;margin:0}
#bitu-wrap-gurke .bgk-overlay .bgk-btn{background:#fff}
#bitu-wrap-gurke .bgk-done{font-weight:700;text-align:center;margin-top:1rem}

/* Gutschein */
#bitu-wrap-gurke .bgk-voucher{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem}
#bitu-wrap-gurke .bgk-voucher-amount{font-family:var(--head);font-weight:800;font-size:2rem}
#bitu-wrap-gurke .bgk-voucher-code{font-family:var(--mono);font-weight:700;font-size:1.1rem;background:var(--surface2);border-radius:10px;padding:.45rem .8rem;letter-spacing:.04em}

/* Tipps */
#bitu-wrap-gurke .bgk-days{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
#bitu-wrap-gurke .bgk-days li{border:1px solid var(--border);border-radius:12px;padding:.6rem .9rem;margin:0}
#bitu-wrap-gurke .bgk-days li.is-found{background:#fafafa}
#bitu-wrap-gurke .bgk-days li.is-found p{color:var(--muted)}
#bitu-wrap-gurke .bgk-days li p{margin:.25rem 0 0;font-size:.93rem}
#bitu-wrap-gurke .bgk-day-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
#bitu-wrap-gurke .bgk-day-date{color:var(--muted);font-size:.82rem}
#bitu-wrap-gurke .bgk-badge,#bitu-wrap-gurke .bgk-badge-ok,#bitu-wrap-gurke .bgk-badge-open{
  margin-left:auto;font-family:var(--mono);font-size:.68rem;font-weight:700;padding:.2rem .5rem;border-radius:8px;border:1px solid;
}
#bitu-wrap-gurke .bgk-badge{background:var(--orange-dim);border-color:var(--orange);color:var(--orange)}
#bitu-wrap-gurke .bgk-badge-ok{background:rgba(79,138,43,.08);border-color:var(--green);color:var(--green)}
#bitu-wrap-gurke .bgk-badge-open{border-color:var(--border);color:var(--muted)}

#bitu-wrap-gurke .bgk-help-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
#bitu-wrap-gurke .bgk-help-btn{
  background:none;border:1px solid var(--border);border-radius:8px;padding:.25rem .6rem;
  font:inherit;font-size:.78rem;color:var(--muted);cursor:pointer;transition:all .2s ease;
}
#bitu-wrap-gurke .bgk-help-btn:hover{border-color:var(--orange);color:var(--orange)}
#bitu-wrap-gurke .bgk-help{background:var(--surface2);border-radius:10px;padding:.5rem .75rem;margin-top:.45rem}
#bitu-wrap-gurke .bgk-help p{margin:.2rem 0}
#bitu-wrap-gurke .bgk-help-later{font-size:.78rem;color:var(--muted);margin-top:.35rem}

/* Texte */
#bitu-wrap-gurke .bgk-text p{font-size:.95rem}
#bitu-wrap-gurke .bgk-small p{font-size:.85rem;color:#555}
#bitu-wrap-gurke .bgk-steps{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.6rem;font-size:.95rem}
#bitu-wrap-gurke .bgk-steps li{margin:0}
#bitu-wrap-gurke .bgk-mono-note{font-family:var(--mono);font-size:.78rem;background:var(--surface2);border-radius:10px;padding:.5rem .75rem}
#bitu-wrap-gurke .bgk-warn{border-left:4px solid var(--text)}

#bitu-wrap-gurke .bitu-footnote{margin-top:.2rem;font-size:.62rem;color:var(--muted);text-align:center}

@media (prefers-reduced-motion:reduce){
  #bitu-wrap-gurke .bgk-card{animation:none}
  #bitu-wrap-gurke .bgk-skeleton{animation:none}
}
@media (max-width:520px){#bitu-wrap-gurke .bgk-card{padding:1rem 1.1rem}}

/* Geschenk im Pot */
#bitu-wrap-gurke .bgk-gift-row{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin:.2rem 0 .4rem}
#bitu-wrap-gurke .bgk-gift{width:clamp(92px,24vw,128px);height:auto;flex:0 0 auto}
#bitu-wrap-gurke .bgk-gift:not(.is-open){animation:bgkGiftWiggle 5s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bgkGiftWiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-4deg)}92%{transform:rotate(4deg)}95%{transform:rotate(-2deg)}}
#bitu-wrap-gurke .bgk-gift-coin{animation:bgkGiftCoin 3.2s ease-in-out infinite}
@keyframes bgkGiftCoin{0%,100%{transform:translateY(5px)}50%{transform:translateY(-3px)}}
#bitu-wrap-gurke .bgk-gift-side{min-width:0}
#bitu-wrap-gurke .bgk-gift-side .bgk-cracked{margin:0 0 .3rem}
#bitu-wrap-gurke .bgk-gift-note{margin:.45rem 0 0;text-align:center;font-size:.86rem;color:var(--green);font-weight:700}
#bitu-wrap-gurke .bgk-inside{text-align:center}
#bitu-wrap-gurke .bgk-inside span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:700}
#bitu-wrap-gurke .bgk-inside strong{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(1.4rem,6vw,2rem);color:var(--orange);line-height:1.15}
#bitu-wrap-gurke .bgk-inside em{display:block;font-style:normal;font-family:var(--mono);font-size:.84rem;color:var(--muted)}
@media (max-width:420px){#bitu-wrap-gurke .bgk-gift-row{flex-direction:column;gap:.5rem}}

/* Passphrase im Album */
#bitu-wrap-gurke .bgk-pp{margin-top:1rem;padding:.9rem 1rem;border:1px dashed var(--border-focus);border-radius:14px;background:var(--surface2);text-align:center}
#bitu-wrap-gurke .bgk-pp.is-open{border-style:solid;border-color:var(--orange);background:var(--orange-dim)}
#bitu-wrap-gurke .bgk-pp-head{display:flex;align-items:center;justify-content:center;gap:.45rem;font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:700}
#bitu-wrap-gurke .bgk-pp-head svg{width:15px;height:15px}
#bitu-wrap-gurke .bgk-pp.is-open .bgk-pp-head{color:var(--text)}
#bitu-wrap-gurke .bgk-pp p{font-size:.92rem}
#bitu-wrap-gurke .bgk-pp-bar{height:6px;border-radius:999px;background:#dcdcdc;overflow:hidden;max-width:260px;margin:.6rem auto .2rem}
#bitu-wrap-gurke .bgk-pp-bar i{display:block;height:100%;background:var(--green)}
#bitu-wrap-gurke .bgk-pp-value{display:block;margin:.7rem auto .2rem;padding:.7rem .9rem;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;font-family:var(--mono);font-weight:700;font-size:clamp(1rem,4.4vw,1.3rem);color:var(--orange);overflow-wrap:anywhere;user-select:all}
#bitu-wrap-gurke .bgk-btn-solid{background:var(--text);color:#fff;border-color:var(--text);font-weight:700}
#bitu-wrap-gurke .bgk-btn-solid:hover{background:#fff;color:var(--orange);border-color:var(--orange)}
#bitu-wrap-gurke .bgk-btn:disabled{opacity:.55;cursor:default}
@media (prefers-reduced-motion:reduce){#bitu-wrap-gurke .bgk-gift,#bitu-wrap-gurke .bgk-gift-coin{animation:none}}
