/* ============================================================
   uebung.css — interaktive Übungsseiten für /schach/*
   Ergänzt schach.css + board.js
   ============================================================ */

/* ---------- Fortschritt ---------- */
.ueb-fortschritt {
  position: sticky; top: 74px; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  background: rgba(250,246,238,0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 13px 20px; margin: 0 0 30px;
  box-shadow: 0 1px 2px rgba(40,30,25,.06), 0 3px 8px rgba(40,30,25,.07);
}
.ueb-fortschritt .ufo-bar {
  flex: 1; height: 8px; min-width: 90px;
  background: var(--rule); border-radius: 999px; overflow: hidden;
}
.ueb-fortschritt .ufo-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #67b05f, #4a7530);
  border-radius: 999px; transition: width .35s cubic-bezier(.16,1,.3,1);
}
.ueb-fortschritt .ufo-txt {
  font-family: 'Fredoka', Inter, sans-serif; font-weight: 600;
  font-size: 14.5px; color: var(--schach-ink); white-space: nowrap;
}
.ueb-fortschritt.fertig .ufo-txt { color: #4a7530; }
@media (max-width: 560px) { .ueb-fortschritt { top: 66px; padding: 11px 15px; gap: 11px; } }

/* ---------- Aufgabenkarte ---------- */
.ueb {
  background: #fff; border: 1px solid var(--rule); border-radius: 16px;
  padding: 22px 24px 20px; margin: 0 0 20px;
  box-shadow: 0 1px 2px rgba(40,30,25,.06), 0 3px 8px rgba(40,30,25,.07);
  transition: border-color .25s, box-shadow .25s;
}
.ueb.geloest { border-color: #8fc18f; box-shadow: 0 0 0 1px #8fc18f inset, 0 3px 10px rgba(74,117,48,.12); }
.ueb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ueb-nr {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--schach-strong); color: #fff;
  font-family: 'Fredoka', Inter, sans-serif; font-weight: 600; font-size: 13.5px; line-height: 1;
}
.ueb.geloest .ueb-nr { background: #4a7530; }
.ueb-typ {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px; padding: 4px 11px;
}
.ueb-haken { margin-left: auto; font-size: 20px; color: #4a7530; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; }
.ueb.geloest .ueb-haken { opacity: 1; transform: none; }
.ueb-frage { font-size: 16.5px; line-height: 1.55; color: var(--ink); margin-bottom: 14px; }
.ueb-frage b { color: var(--schach-ink); }
.ueb-board { text-align: center; margin: 6px 0 4px; }
.ueb-board .board { --sq-size: 52px; }
@media (max-width: 560px) { .ueb-board .board { --sq-size: 38px; } .ueb { padding: 18px 15px 16px; } }

.ueb-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.ueb-fb { font-size: 14.5px; font-weight: 600; font-family: 'Fredoka', Inter, sans-serif; }
.ueb-fb.ok  { color: #4a7530; }
.ueb-fb.no  { color: #c0392b; }
.ueb-fb.neutral { color: var(--ink-soft); font-weight: 500; }
.ueb-zaehler { font-size: 13px; color: var(--ink-soft); margin-left: auto; font-family: 'Inter', sans-serif; }

.ueb-tipp { margin-top: 12px; border-top: 1px dashed var(--rule); padding-top: 10px; }
.ueb-tipp summary {
  cursor: pointer; font-family: 'Fredoka', Inter, sans-serif; font-weight: 600;
  font-size: 14px; color: var(--info-orange); list-style: none;
}
.ueb-tipp summary::-webkit-details-marker { display: none; }
.ueb-tipp summary::before { content: '💡 '; }
.ueb-tipp[open] summary { margin-bottom: 8px; }
.ueb-tipp .tipp-txt { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Brett-Markierungen ---------- */
.board .sq.ueb-ok { background: var(--sq-move) !important; box-shadow: inset 0 0 0 3px #4a7530; }
.board .sq.ueb-no { background: var(--sq-cap) !important; animation: uebShake .32s ease; }
.board .sq.ueb-sel { box-shadow: inset 0 0 0 4px var(--info-orange); }
.board .sq.ueb-ziel::after {
  content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%;
  background: rgba(74,117,48,.55);
}
.board .sq:focus-visible { outline: 3px solid var(--schach-ink); outline-offset: -3px; z-index: 2; }
@keyframes uebShake { 0%,100%{transform:none} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@media (prefers-reduced-motion: reduce) {
  .board .sq.ueb-no { animation: none; }
  .ueb-fortschritt .ufo-bar i { transition: none; }
  .ueb-haken { transition: none; }
}

/* ---------- Antwort-Optionen ---------- */
.ueb-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.ueb-opt {
  text-align: left; background: var(--bg-soft); border: 1px solid var(--rule);
  border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 15.5px;
  color: var(--ink); cursor: pointer; display: flex; align-items: center; gap: 11px;
  transition: background .18s, border-color .18s, transform .12s;
}
.ueb-opt:hover:not(:disabled) { background: #fff; border-color: var(--schach-strong); transform: translateX(3px); }
.ueb-opt .mark {
  flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%;
  border: 2px solid var(--schach-deep); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-family: 'Inter', sans-serif; color: var(--schach-strong);
}
.ueb-opt.ok  { background: #eaf4e4; border-color: #67b05f; }
.ueb-opt.ok .mark  { background: #4a7530; border-color: #4a7530; color: #fff; }
.ueb-opt.no  { background: #fbeceb; border-color: #e2574c; opacity: .85; }
.ueb-opt.no .mark  { background: #c0392b; border-color: #c0392b; color: #fff; }
.ueb-opt:disabled { cursor: default; }

/* ---------- Zahleneingabe ---------- */
.ueb-zahl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ueb-zahl input {
  width: 110px; padding: 10px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-soft); color: var(--ink);
}
.ueb-zahl input:focus-visible { outline: 2.5px solid var(--schach-strong); outline-offset: 2px; }
.ueb-zahl .einheit { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Abschluss ---------- */
.ueb-ende {
  margin-top: 26px; background: #eaf4e4; border: 1px solid #8fc18f; border-radius: 16px;
  padding: 22px 24px; display: none;
}
.ueb-ende.an { display: block; }
.ueb-ende h3 { font-size: 22px; color: #35571f; margin-bottom: 6px; }
.ueb-ende p { font-size: 15.5px; color: #3f5b33; }

/* ---------- Druck ---------- */
@media print {
  .ueb-fortschritt { position: static; }
  .ueb-bar, .ueb-tipp { display: none; }
  .ueb { break-inside: avoid; box-shadow: none; }
}