/* file: web/style/components.hannah.css */

/* Lernwoerter */
.learning-page .card{ margin-bottom: 12px; }
.learning-page .card > h2:first-child{
  display:flex;
  align-items:center;
  gap: 8px;
}
.learning-page .card > h2:first-child i{
  margin-right: 2px;
}
.learning-kpi-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
}
.learning-kpi{
  border:1px solid var(--border);
  border-radius:10px;
  background:#f8fbf7;
  padding:8px 10px;
}
.learning-kpi-label{ font-size:12px; color:var(--muted); }
.learning-kpi-num{ font-size:20px; font-weight:800; color:#1f3c19; margin-top:2px; }
.learning-progress{ font-size:13px; color:var(--muted); margin-bottom:8px; }
.learning-current{
  border:1px dashed #b9d6b2;
  border-radius:10px;
  background:#f3faf0;
  padding:10px;
  margin-bottom:10px;
}
.learning-start-card{
  border:1px solid #c8e3bd;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 208, 107, 0.28), transparent 36%),
    radial-gradient(circle at 10% 100%, rgba(121, 199, 255, 0.24), transparent 42%),
    #f7fbf4;
}
.learning-current-label{ font-size:12px; color:var(--muted); }
.learning-current-word{ font-size:26px; font-weight:800; margin-top:3px; }
.learning-answer-form .input{ font-size:26px; font-weight:700; }
.learning-answer-input{
  letter-spacing:0.4px;
  min-height:58px;
}
.learning-answer-form{
  margin-top:14px;
}
.learning-answer-form .label{
  margin-top:8px;
  margin-bottom:8px;
}
.learning-answer-form .btn-group{
  margin-top:14px;
  margin-bottom:14px;
}
.learning-choice-group{
  gap:7px;
  flex-wrap:wrap;
}
.learning-choice-group .learning-choice{
  border-radius:999px;
  border:1px solid #b7d7aa;
  background:#f2f8ef;
  color:#23491c;
  font-weight:700;
}
.learning-choice-group .learning-choice:hover{
  border-color:#90c77d;
  background:#e6f5df;
}
.learning-choice-group .learning-choice.is-active{
  border-color:#2a7f34;
  background:#2f8f3c;
  color:#fff;
}
.learning-start-submit{
  width:100%;
  font-size:20px;
  padding:12px 14px;
  border-radius:14px;
  box-shadow:0 10px 20px rgba(22, 90, 22, 0.2);
}
.learning-answer-feedback{
  border-radius:14px;
  border:2px solid transparent;
  padding:12px 14px;
  margin:8px 0 12px;
}
.learning-answer-feedback.is-correct{
  background:#ebfbe7;
  border-color:#41a843;
  animation: learningCorrectPop 420ms ease-out both;
}
.learning-answer-feedback.is-wrong{
  background:#fff2f2;
  border-color:#d64545;
  animation: learningWrongShake 430ms ease-out both;
}
.learning-answer-feedback-title{
  font-size:28px;
  font-weight:900;
  line-height:1.1;
}
.learning-answer-feedback.is-correct .learning-answer-feedback-title{ color:#1c7f31; }
.learning-answer-feedback.is-wrong .learning-answer-feedback-title{ color:#b12222; }
.learning-answer-feedback-note{
  margin-top:6px;
  font-size:16px;
  font-weight:700;
}
.learning-answer-correct-word{
  margin-top:8px;
  font-size:30px;
  font-weight:900;
  color:#1f8c2f;
  letter-spacing:0.3px;
}
.learning-test-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#164a8d;
  background:#e8f1ff;
  border:1px solid #a8c5f0;
  border-radius:999px;
  padding:7px 12px;
  margin:4px 0 10px;
}
.learning-cancel-form{ margin-top:8px; }
.learning-start-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  margin-bottom:12px;
}
.learning-start-form .learning-start-grid > div{
  border:1px solid #c9dfbf;
  border-radius:12px;
  background:#f7fcf4;
  padding:10px;
}
.learning-start-form .learning-start-grid > div .label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:800;
  color:#234d1e;
  margin-bottom:8px;
}
.learning-start-form .learning-start-grid > div .label i{
  color:#2f7d32;
  width:14px;
  text-align:center;
}
.learning-start-form .learning-choice-group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.learning-start-form .learning-choice-group .learning-choice{
  width:100%;
  justify-content:flex-start;
}
.learning-new-set{ margin-bottom:12px; }
.learning-sets{ display:flex; flex-direction:column; gap:8px; }
.learning-set{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
}
.learning-set.is-selected{
  border-color:#9fcf94;
  background:#f2f9ef;
}
.learning-set-main{ min-width:0; }
.learning-set-link{
  color:#20541a;
  text-decoration:none;
  font-weight:700;
}
.learning-set-link:hover,
.learning-set-link:focus-visible{ text-decoration:underline; }
.learning-set-meta{ font-size:12px; color:var(--muted); }
.learning-set-actions{ display:flex; align-items:center; gap:6px; }
.learning-word-list{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.learning-word-row{
  display:grid;
  grid-template-columns: 74px 1fr 72px auto auto;
  gap:6px;
  align-items:center;
}
.learning-word-article,
.learning-word-order{ width:100%; }
.learning-word-active{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  white-space: nowrap;
}
.learning-word-stat{ font-size:12px; color:var(--muted); }
.learning-mastered{ color:#1f7a2e; font-weight:700; }
.learning-word-del{ margin-top: -2px; margin-bottom: 4px; }
.learning-optional-block{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fbfdfb;
  padding:8px 10px;
}
.learning-optional-block summary{
  cursor:pointer;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
}
.learning-optional-block summary::-webkit-details-marker{ display:none; }
.learning-optional-block[open] summary{ margin-bottom:8px; }
.learning-errors{ display:flex; flex-direction:column; gap:6px; }
.learning-error-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fafcfa;
  padding:7px 9px;
}
.learning-error-row strong{ font-size:15px; color:#325b2c; }
.learning-reward-pop{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:6px 0 2px;
}
.learning-reward-star{
  font-size:18px;
  animation: learningPop 900ms ease-out both;
}
.learning-reward-star:nth-child(1){ animation-delay: 0ms; }
.learning-reward-star:nth-child(2){ animation-delay: 60ms; }
.learning-reward-star:nth-child(3){ animation-delay: 120ms; }
.learning-reward-star:nth-child(4){ animation-delay: 180ms; }
.learning-reward-star:nth-child(5){ animation-delay: 240ms; }
.learning-reward-star:nth-child(6){ animation-delay: 300ms; }
.learning-reward-star:nth-child(7){ animation-delay: 360ms; }
.learning-reward-star:nth-child(8){ animation-delay: 420ms; }
.learning-reward-star:nth-child(9){ animation-delay: 480ms; }
.learning-reward-star:nth-child(10){ animation-delay: 540ms; }
.learning-reward-star:nth-child(11){ animation-delay: 600ms; }
.learning-reward-star:nth-child(12){ animation-delay: 660ms; }
.learning-reward-text{
  margin-top:4px;
  font-weight:700;
  color:#2b6519;
}
@keyframes learningPop{
  0% { transform: translateY(6px) scale(0.5); opacity:0; }
  45% { transform: translateY(-3px) scale(1.1); opacity:1; }
  100% { transform: translateY(0) scale(1); opacity:1; }
}
@keyframes learningCorrectPop{
  0% { transform: scale(0.92); opacity:0; }
  55% { transform: scale(1.03); opacity:1; }
  100% { transform: scale(1); opacity:1; }
}
@keyframes learningWrongShake{
  0% { transform: translateX(0); }
  22% { transform: translateX(-8px); }
  44% { transform: translateX(8px); }
  68% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@media (min-width: 720px){
  .learning-start-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .learning-start-form .learning-start-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .learning-kpi-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .learning-word-row{
    grid-template-columns: 62px 1fr;
    grid-template-areas:
      "article input"
      "order active"
      "stat save";
  }
  .learning-word-row .learning-word-article{ grid-area: article; }
  .learning-word-row .learning-word-input{ grid-area: input; }
  .learning-word-row .learning-word-order{ grid-area: order; }
  .learning-word-row .learning-word-active{ grid-area: active; }
  .learning-word-row .learning-word-stat{ grid-area: stat; }
  .learning-word-row .btn{ grid-area: save; justify-self:end; }
  .learning-answer-form .input{ font-size:22px; }
  .learning-answer-feedback-title{ font-size:24px; }
  .learning-answer-correct-word{ font-size:24px; }
  .learning-answer-form .btn-group{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .learning-answer-form .btn-group .btn{
    width:100%;
    justify-content:center;
  }
  .learning-start-options{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .learning-start-options .btn{
    width:100%;
    justify-content:flex-start;
  }
  .learning-mode-tabs .btn{
    flex:1 1 calc(50% - 4px);
  }
  .learning-start-form .learning-start-grid > div{
    padding:9px;
  }
}
.learning-tts-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.learning-tts-note{ margin-top:6px; }
.learning-spell-output{
  margin-top:8px;
  font-size:15px;
  font-weight:700;
  color:#2b6519;
  background:#eff8ec;
  border:1px dashed #aad3a2;
  border-radius:8px;
  padding:8px 10px;
}
.learning-start-options{
  margin-bottom:10px;
  align-items:center;
}
.learning-start-options .btn{
  gap:6px;
}
.learning-speed-opt{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.learning-speed-opt .select{
  min-width:120px;
  padding:4px 6px;
  height:30px;
}
.learning-word-audio{
  margin:2px 0 8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.learning-word-audio-upload input[type="file"]{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

.learning-mode-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.learning-preview-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.learning-preview-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fbfdfb;
  padding:8px 10px;
}
.learning-preview-word{
  font-weight:700;
  color:#1f3c19;
}
.learning-preview-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

@media (max-width: 680px){
  .learning-preview-row{
    flex-direction:column;
    align-items:flex-start;
  }
}
.schoolplan-page .dash-kpis{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.schoolplan-page .card > h2:first-child,
.wishlist-page .card > h2:first-child{
  display:flex;
  align-items:center;
  gap:8px;
}
.wishlist-page .card{
  border-color:#cfe2c6;
  background:linear-gradient(180deg, #ffffff 0%, #fbfdf8 100%);
  margin-bottom:16px;
}
.wishlist-page .card:last-child{
  margin-bottom:0;
}
.wishlist-headline-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.wishlist-add-top{
  white-space:nowrap;
}
.wishlist-child-switch{
  margin-top:10px;
}
.wishlist-page .admin-card-row{
  border:1px solid #d6e7cf;
  border-left:4px solid #8bbf74;
  border-radius:12px;
  padding:14px;
  background:#ffffff;
  margin-bottom:12px;
}
.wishlist-page .btn-group .btn{
  border-color:#b9d6ad;
}
.wishlist-page .btn-group .btn.btn-action{
  background:#2f7d32;
  border-color:#2f7d32;
}
.wishlist-page [data-choice-group="priority"] .btn.is-active{
  border-color:#cf5a00;
  background:#fff3e8;
  color:#7d2b00;
}
.schoolplan-page .card > h2:first-child i,
.wishlist-page .card > h2:first-child i{
  margin-right:2px;
}
.wishlist-adult-meta{
  margin-top:8px;
  border:1px solid #d9e9d5;
  border-radius:10px;
  background:#f7fbf6;
  overflow:hidden;
}
.wishlist-adult-meta > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:#244e1f;
}
.wishlist-adult-meta > summary::-webkit-details-marker{
  display:none;
}
.wishlist-adult-meta[open] > summary{
  border-bottom:1px solid #d9e9d5;
}
.wishlist-adult-body{
  padding:10px 12px 12px;
}
.wishlist-adult-note{
  margin-top:6px;
  color:var(--text);
  white-space:pre-wrap;
}
.wishlist-adult-form{
  margin-top:8px;
}
.wishlist-adult-grid{
  display:grid;
  gap:10px;
}
.wishlist-currency-input{
  position:relative;
}
.wishlist-currency-input input{
  padding-right:52px;
}
.wishlist-currency-input span{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  pointer-events:none;
}
.wish-sort-label{
  margin-left:.5rem;
}
.wishlist-photo-wrap{
  margin-top:.4rem;
}
.wishlist-photo{
  max-width:220px;
  border-radius:10px;
  border:1px solid var(--line);
}
.wishlist-actions{
  margin-top:10px;
}
.wishlist-page .form .label{
  margin-top:10px;
}
.wishlist-page .form .input,
.wishlist-page .form textarea.input{
  margin-top:6px;
  margin-bottom:10px;
}
.wishlist-page .form .btn-group{
  margin-top:10px;
}
.wishlist-child-row{
  border-left-color:#53a65d;
}
.wishlist-child-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wishlist-child-text{
  flex:1 1 auto;
  min-width:0;
  font-size:34px;
  line-height:1.18;
  color:#193318;
  word-break:break-word;
}
.wishlist-actions-child{
  margin-top:0;
  justify-content:flex-end;
  flex:0 0 auto;
}
.wishlist-actions-child .btn{
  white-space:nowrap;
}
@media (min-width:860px){
  .wishlist-adult-grid{
    grid-template-columns:minmax(170px, 220px) 1fr;
    align-items:end;
  }
}
@media (max-width: 980px){
  .wishlist-child-text{
    font-size:28px;
  }
}
@media (max-width: 700px){
  .wishlist-child-line{
    flex-direction:column;
    align-items:flex-start;
  }
  .wishlist-actions-child{
    width:100%;
    justify-content:flex-start;
  }
  .wishlist-child-text{
    font-size:24px;
  }
}
.schoolplan-today{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.schoolplan-today-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.schoolplan-today-item{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fbfdfb;
  padding:8px 10px;
}
.schoolplan-today-main{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.schoolplan-today-time{
  font-weight:700;
}
.schoolplan-today-subject{
  font-weight:700;
  color:#1f2c1a;
}
.schoolplan-today-teacher{
  font-size:13px;
  color:var(--muted);
}
.schoolplan-today-note{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}
.schoolplan-matrix th.is-today,
.schoolplan-matrix td.is-today{
  background:#f0f8ee;
}
.schoolplan-matrix .schoolplan-select{
  width:100%;
  min-width:120px;
  margin-bottom:4px;
}
.schoolplan-matrix .schoolplan-note{
  width:100%;
  min-width:120px;
}
.schoolplan-break{
  border:1px dashed #b5c8b2;
  border-radius:8px;
  padding:8px 10px;
  background:#f6faf5;
  color:#4d5f4a;
  font-weight:600;
}
.schoolplan-ogs-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:8px;
  margin:10px 0;
}
.schoolplan-ogs-col{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fbfdfb;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.schoolplan-legend{
  margin-top:12px;
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.schoolplan-days{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:8px;
}
.schoolplan-day{
  border:1px solid var(--border);
  border-radius:10px;
  background:#fbfdfb;
  padding:8px;
}
.schoolplan-day.is-today{
  border-color:#2b6519;
  box-shadow: inset 0 0 0 1px rgba(43,101,25,.2);
}
.schoolplan-day-head{
  font-weight:700;
  margin-bottom:6px;
}
/* Mathetrainer */
.math-page .card{ margin-bottom:12px; }
.math-page .card > h2:first-child{
  display:flex;
  align-items:center;
  gap:8px;
}
.math-page .card > h2:first-child i{ margin-right:2px; }
.math-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.math-kpi{
  border:1px solid #cfe2c6;
  border-radius:10px;
  background:#f6fbf3;
  padding:10px;
}
.math-kpi-label{ font-size:12px; color:var(--muted); }
.math-kpi-value{ font-size:28px; font-weight:900; color:#1f4c1c; line-height:1; margin-top:4px; }

.math-mod-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:10px;
}
.math-mod-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-decoration:none;
  border:1px solid #c8dfbe;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f7fcf4);
  padding:12px;
  color:#153317;
  box-shadow:0 4px 12px rgba(40, 82, 31, 0.08);
}
.math-tile-topic{
  align-self:flex-start;
  margin-bottom:2px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.2px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #cfe0c8;
  background:#f4faf0;
  color:#2a5d2f;
}
.math-mod-tile:hover,
.math-mod-tile:focus-visible{
  transform:translateY(-1px);
  border-color:#8ec27a;
}
.math-mod-tile.is-active{
  border-color:#2f8f3c;
  box-shadow:0 0 0 2px rgba(47, 143, 60, 0.15);
}
.math-mod-ico{ font-size:22px; color:#2f7d32; }
.math-mod-title{ font-size:24px; font-weight:900; line-height:1.1; }
.math-mod-desc{ color:#33502f; font-size:14px; }
.math-mod-tile--times{
  background:linear-gradient(180deg,#ffffff,#f4fbf1);
  border-color:#beddc1;
}
.math-mod-tile--times .math-mod-ico{ color:#2c7f38; }
.math-mod-tile--times .math-tile-topic{
  background:#e9f8ea;
  border-color:#b7debc;
  color:#20652e;
}
.math-mod-tile--calc{
  background:linear-gradient(180deg,#ffffff,#f2f7ff);
  border-color:#bfd3ee;
}
.math-mod-tile--calc .math-mod-ico{ color:#2f5fa2; }
.math-mod-tile--calc .math-tile-topic{
  background:#eaf2ff;
  border-color:#bfd2f2;
  color:#244f88;
}
.math-mod-tile--series{
  background:linear-gradient(180deg,#ffffff,#fff7ed);
  border-color:#efd4b7;
}
.math-mod-tile--series .math-mod-ico{ color:#aa6727; }
.math-mod-tile--series .math-tile-topic{
  background:#fff0dd;
  border-color:#efcea7;
  color:#8a541f;
}
.math-mod-tile--missing{
  background:linear-gradient(180deg,#ffffff,#fdf1fb);
  border-color:#ebc7e3;
}
.math-mod-tile--missing .math-mod-ico{ color:#94407f; }
.math-mod-tile--missing .math-tile-topic{
  background:#f9e6f5;
  border-color:#e2b9d8;
  color:#7a2e67;
}
.math-mod-tile--chain{
  background:linear-gradient(180deg,#ffffff,#eefbfd);
  border-color:#bbdee5;
}
.math-mod-tile--chain .math-mod-ico{ color:#1f7488; }
.math-mod-tile--chain .math-tile-topic{
  background:#e2f5f9;
  border-color:#b9dce6;
  color:#1c6171;
}
.math-mod-tile--text{
  background:linear-gradient(180deg,#ffffff,#f7f5ff);
  border-color:#cbc8ef;
}
.math-mod-tile--text .math-mod-ico{ color:#5b4cb0; }
.math-mod-tile--text .math-tile-topic{
  background:#ece9ff;
  border-color:#c9c3ef;
  color:#4b3d98;
}
.math-mod-tile--mixed{
  background:
    radial-gradient(circle at 95% 12%, rgba(255, 217, 122, 0.22), transparent 35%),
    linear-gradient(180deg,#ffffff,#f7fff5);
  border-color:#c9e8be;
}
.math-mod-tile--mixed .math-mod-ico{ color:#2b8f52; }
.math-mod-tile--mixed .math-tile-topic{
  background:#ebfae8;
  border-color:#c3e9ba;
  color:#246d3f;
}
.math-mod-tile--inverse{
  background:linear-gradient(180deg,#ffffff,#fff5f5);
  border-color:#e8c1c1;
}
.math-mod-tile--inverse .math-mod-ico{ color:#a84848; }
.math-mod-tile--inverse .math-tile-topic{
  background:#ffe9e9;
  border-color:#ebc0c0;
  color:#8f3535;
}
.math-tile-challenge{
  position:absolute;
  top:8px;
  right:8px;
  font-size:11px;
  font-weight:800;
  padding:3px 8px;
  border-radius:999px;
  background:#fff3d6;
  border:1px solid #f0d082;
  color:#7d5300;
}

.math-setup-card .btn-group[data-choice-group="task_count"]{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.math-setup-card .btn-group[data-choice-group="task_count"] .btn{
  min-width:64px;
}
.math-setup-card .math-start-btn{ width:100%; font-size:22px; padding:12px 14px; }

.math-run-card{
  border-color:#badab0;
  background:
    radial-gradient(circle at 90% 4%, rgba(255, 212, 120, 0.18), transparent 34%),
    radial-gradient(circle at 6% 100%, rgba(140, 208, 255, 0.18), transparent 35%),
    #fbfef9;
}
.math-progress{ font-size:14px; color:#355232; margin-bottom:10px; }
.math-task-wrap{ border:1px dashed #9bc58f; border-radius:12px; padding:12px; background:#f2fbef; }
.math-timer-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:14px;
  color:#294926;
  margin-bottom:10px;
}
.math-question{
  font-size:56px;
  font-weight:900;
  line-height:1.04;
  color:#193c17;
  letter-spacing:0.4px;
  margin:4px 0 10px;
}
.math-answer-form .label{ font-size:17px; font-weight:800; margin-bottom:8px; display:block; }
.math-answer-input{
  font-size:40px;
  font-weight:900;
  line-height:1.1;
  min-height:66px;
  letter-spacing:0.4px;
}
.math-answer-form .btn-group{ margin-top:12px; margin-bottom:8px; }
.math-check-btn{ font-size:22px; padding:10px 18px; }
.math-cancel-form{ margin-top:10px; }

.math-feedback{
  position:relative;
  border:2px solid transparent;
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:12px;
}
.math-feedback.is-correct{
  border-color:#3fa347;
  background:#e9fbe6;
  animation: mathOkPop 380ms ease-out both;
}
.math-feedback.is-wrong{
  border-color:#d64545;
  background:#fff1f1;
  animation: mathWrongShake 420ms ease-out both;
}
.math-feedback-title{ font-size:44px; font-weight:900; line-height:1; }
.math-feedback-solution{ margin-top:5px; font-size:28px; font-weight:900; color:#1f8f35; }
.math-feedback-note{ margin-top:6px; font-size:18px; font-weight:700; color:#8b2d2d; }

.math-result-pop{
  border-color:#bcdcb2;
  background:#f7fcf4;
}
.math-result-line{ margin-top:4px; }
.math-avatar-unlocks{
  margin-top:10px;
  padding:10px;
  border:1px solid #c8e6be;
  border-radius:10px;
  background:#eefbe9;
}
.math-avatar-unlocks-title{
  font-size:16px;
  font-weight:900;
  color:#1f6f2e;
}
.math-avatar-unlock-item{
  margin-top:4px;
  color:#2b4f2a;
}
.math-avatar-unlock-link{ margin-top:8px; }
.math-head-spacer{ margin-left:auto; }
.math-testmode-inline{
  margin:0;
  display:inline-flex;
  align-items:center;
}
.math-testmode-btn{
  min-height:30px;
  padding:4px 10px;
  font-size:12px;
  border-radius:999px;
  background:#f6f6f6;
  color:#4a4a4a;
}
.math-testmode-btn.is-on{
  background:#fff2a8;
  border-color:#e4c85f;
  color:#6a5400;
  box-shadow:0 0 0 2px rgba(255, 224, 102, 0.35);
}
.math-challenge-card{
  border-color:#bcd5f4;
  background:linear-gradient(180deg,#f5f9ff,#eef6ff);
}
.math-challenge-text{ margin-top:4px; }
.math-streak-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#fff6cf;
  border:1px solid #efd27b;
  color:#7d5300;
  font-size:12px;
  font-weight:800;
}
.math-challenge-done{
  margin-top:8px;
  color:#1b6a2f;
  font-weight:800;
}
.math-challenge-open{
  margin-top:8px;
  color:#1e4f8c;
  font-weight:800;
}
.math-start-form [data-choice-group="difficulty"]{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.math-joker-form{ margin:8px 0 2px; }
.math-joker-btn{
  min-height:34px;
  padding:6px 10px;
  font-size:13px;
  border-radius:999px;
  background:#faf7ff;
  border-color:#d8c7f1;
  color:#5c378f;
}
.math-joker-hint{
  margin-top:6px;
  font-size:13px;
  color:#5c378f;
  font-weight:700;
}
.math-joker-options{
  margin-top:6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.math-joker-option{
  min-width:80px;
  font-size:20px;
  font-weight:900;
  border-color:#cdb5ec;
  background:#f7f2ff;
}
.math-feedback-streak{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
  color:#1e7d30;
}
.math-streak-burst{
  position:absolute;
  right:12px;
  top:8px;
  font-size:24px;
  font-weight:900;
  opacity:0;
  transform:translateY(10px) scale(0.85);
  transition:all 260ms ease;
  pointer-events:none;
}
.math-streak-burst.is-on{
  opacity:1;
  transform:translateY(-4px) scale(1.04);
}

@keyframes mathOkPop{
  0% { transform: scale(0.94); opacity:0; }
  100% { transform: scale(1); opacity:1; }
}
@keyframes mathWrongShake{
  0% { transform: translateX(0); }
  22% { transform: translateX(-8px); }
  44% { transform: translateX(8px); }
  66% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@media (min-width: 760px){
  .math-kpi-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .math-mod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1120px){
  .math-mod-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 700px){
  .math-question{ font-size:44px; }
  .math-answer-input{ font-size:34px; min-height:62px; }
  .math-feedback-title{ font-size:36px; }
  .math-feedback-solution{ font-size:24px; }
  .math-testmode-btn{ font-size:11px; padding:4px 8px; }
  .math-answer-form .btn-group{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .math-answer-form .btn-group .btn{
    width:100%;
    justify-content:center;
  }
  .math-setup-card .btn-group[data-choice-group="task_count"] .btn{
    flex:1 1 calc(50% - 4px);
    min-width:0;
  }
  .math-page .card{
    margin-bottom:14px;
  }
}
/* Hannah Spiele */
.h-games-page .card{ margin-bottom:12px; }
.h-games-page{
  --h-game-accent:#2f8f3c;
  --h-game-soft:#eaf8e7;
  --h-game-ink:#19421b;
}
.h-games-theme-denken{
  --h-game-accent:#2f8f3c;
  --h-game-soft:#eaf8e7;
  --h-game-ink:#19421b;
}
.h-games-theme-tempo{
  --h-game-accent:#1f87b6;
  --h-game-soft:#e9f6fc;
  --h-game-ink:#163d54;
}
.h-games-theme-logik{
  --h-game-accent:#7a6b1f;
  --h-game-soft:#fff9de;
  --h-game-ink:#4b3d0f;
}
.h-games-kpi-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:10px;
}
.h-games-kpi{
  border:1px solid #cfe2c6;
  border-radius:10px;
  background:#f6fbf3;
  padding:10px;
}
.h-games-kpi-label{ font-size:12px; color:var(--muted); }
.h-games-kpi-value{ font-size:28px; font-weight:900; color:#1f4c1c; line-height:1; margin-top:4px; }

.h-games-tiles{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:10px;
}
.h-games-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-decoration:none;
  border:1px solid #c8dfbe;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f7fcf4);
  padding:12px;
  color:#153317;
  border-color:color-mix(in srgb, var(--h-game-accent) 36%, #d4e6cd);
}
.h-games-tile.is-disabled{
  opacity:0.72;
  border-style:dashed;
  background:linear-gradient(180deg,#fbfbfb,#f4f4f4);
}
.h-games-soon{
  position:absolute;
  top:8px;
  right:8px;
  font-size:11px;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #d7d7d7;
  background:#ffffff;
  color:#555;
}
.h-games-tile.is-active{
  border-color:var(--h-game-accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--h-game-accent) 28%, transparent);
}
.h-games-tile-icon{ font-size:24px; color:var(--h-game-accent); }
.h-games-tile-title{ font-size:24px; font-weight:900; line-height:1.1; text-align:left; }
.h-games-tile-desc{ color:color-mix(in srgb, var(--h-game-ink) 85%, #2f2f2f); font-size:14px; text-align:left; }
.h-games-tiles-variants{ grid-template-columns:repeat(1,minmax(0,1fr)); }
.h-games-variant-form{ margin:0; }
.h-games-variant-tile{
  width:100%;
  cursor:pointer;
}
.h-games-variant-points{
  margin-top:4px;
  font-weight:800;
  color:#1f6f2e;
  text-align:left;
}

.h-games-run-note{
  margin-bottom:8px;
  font-weight:700;
  color:var(--h-game-ink);
}
.h-games-run{
  border-color:color-mix(in srgb, var(--h-game-accent) 35%, #c8dfbe);
  background:linear-gradient(180deg,#ffffff,var(--h-game-soft));
}
.h-games-run-top{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.h-games-live{
  border:1px solid color-mix(in srgb, var(--h-game-accent) 40%, #c8dfbe);
  border-radius:12px;
  padding:10px;
  margin:0 0 10px;
  background:color-mix(in srgb, var(--h-game-soft) 72%, #ffffff);
}
.h-games-live-score{
  font-weight:800;
  color:var(--h-game-ink);
}
.h-games-live-delta{
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  opacity:0;
  transform:translateY(0);
}
.h-games-live-delta.is-up{
  color:#1f7d33;
}
.h-games-live-delta.is-down{
  color:#a13a3a;
}
.h-games-live-delta.is-show{
  animation:hGamesLiveDelta 820ms ease-out both;
}
.h-games-combo{
  margin-top:8px;
}
.h-games-combo-track{
  height:10px;
  border-radius:999px;
  background:#e2e8de;
  overflow:hidden;
}
.h-games-combo-fill{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#51b760,var(--h-game-accent));
  transition:width 240ms ease;
}
.h-games-combo-fill.is-hit{
  animation:hGamesComboHit 620ms ease-out;
}
.h-games-combo-text{
  margin-top:4px;
  font-size:13px;
  font-weight:800;
  color:#355533;
}
.h-games-combo-text.is-hit{
  color:#1d6f2f;
}
.h-games-focus-wrap{
  margin:0 0 10px;
}
.h-games-focus-toggle.is-on{
  background:#fff4b8;
  border-color:#e4c85f;
  color:#5b4b0b;
}
.h-games-daily-card{
  border-color:#bcd5f4;
  background:linear-gradient(180deg,#f5f9ff,#eef6ff);
}
.h-games-feedback{
  border:2px solid #c7d8c2;
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:10px;
  font-weight:800;
}
.h-games-feedback.is-ok{
  border-color:#3fa347;
  background:#e9fbe6;
  color:#1c7430;
}
.h-games-feedback.is-bad{
  border-color:#d64545;
  background:#fff1f1;
  color:#842a2a;
}
.h-games-feedback-pop-ok{
  animation:hGamesEventOk 580ms ease-out;
}
.h-games-feedback-pop-bad{
  animation:hGamesEventBad 580ms ease-out;
}

.h-sudoku-board{
  display:grid;
  margin:8px 0 10px;
  border:2px solid #7ea27c;
  border-radius:10px;
  overflow:hidden;
}
.h-sudoku-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:8px;
}
.h-sudoku-toolbar .btn.is-active{
  background:#fff2a8;
  border-color:#e4c85f;
  color:#6a5400;
}
.h-sudoku-board-4{
  grid-template-columns:repeat(4, minmax(0,1fr));
  max-width:380px;
}
.h-sudoku-board-9{
  grid-template-columns:repeat(9, minmax(0,1fr));
  max-width:700px;
}
.h-sudoku-cell{
  position:relative;
  border-top:1px solid #cfe2c6;
  border-left:1px solid #cfe2c6;
  min-height:56px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.h-sudoku-cell.sep-top{ border-top:2px solid #7ea27c; }
.h-sudoku-cell.sep-left{ border-left:2px solid #7ea27c; }
.h-sudoku-cell.is-given{
  background:#eef8ea;
  font-weight:900;
  color:#1f4f1d;
}
.h-sudoku-cell span{
  font-size:28px;
  font-weight:900;
}
.h-sudoku-cell .input{
  border:none;
  border-radius:0;
  text-align:center;
  font-size:28px;
  font-weight:900;
  min-height:56px;
  background:transparent;
  padding:4px;
}
.h-sudoku-cell .input::placeholder{
  color:#c7c7c7;
  opacity:1;
}
.h-sudoku-cell.is-wrong{
  background:#fff2f2;
}
.h-sudoku-cell.is-conflict{
  box-shadow:inset 0 0 0 2px rgba(198, 45, 45, 0.45);
}
.h-sudoku-input.hint-flash{
  background:#ecffe6 !important;
}
.h-sudoku-notes{
  position:absolute;
  inset:3px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  pointer-events:none;
  opacity:0.9;
}
.h-sudoku-notes span{
  font-size:10px;
  line-height:1.1;
  color:#5e6e58;
  font-weight:600;
  align-self:center;
  justify-self:center;
}
.h-sudoku-numpad{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.h-sudoku-actions{ margin-top:8px; }
.h-sudoku-cancel{ margin-top:8px; }
.h-games-result-line{ margin-top:4px; }
.h-games-win-anim{
  animation:hGamesWinPop 700ms ease-out both;
}
.h-games-result-lost{
  border-color:#e4b7b7;
  background:#fff5f5;
}
.h-duel-question{
  font-size:44px;
  font-weight:900;
  line-height:1.06;
  color:#1a3a2b;
  margin:6px 0 10px;
}
.h-duel-answer-input{
  font-size:36px;
  font-weight:900;
  min-height:64px;
}
.h-memory-board{
  --h-memory-card-size:92px;
  display:grid;
  grid-template-columns:repeat(4, var(--h-memory-card-size));
  gap:10px;
  margin:10px 0;
  justify-content:center;
}
.js .h-memory-board[data-memory-board="1"]{
  visibility:hidden;
  opacity:0;
}
.js .h-memory-board[data-memory-board="1"].is-ready{
  visibility:visible;
  opacity:1;
  transition:opacity 120ms ease-out;
}
.h-memory-card{
  min-height:0;
  width:var(--h-memory-card-size);
  height:var(--h-memory-card-size);
  aspect-ratio:1/1;
  border:1px solid #c8dfbe;
  border-radius:12px;
  background:linear-gradient(180deg,#f8fff3,#edf8e8);
  color:#214723;
  font-weight:900;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
}
.h-memory-face i{
  font-size:46px;
  line-height:1;
}
.h-memory-back{
  font-size:34px;
  line-height:1;
}
.h-memory-card.is-open{
  background:#fff9da;
  border-color:#e3c86f;
}
.h-memory-card.is-matched{
  background:#e7f9ea;
  border-color:#72b878;
  color:#1c6a31;
}
.h-memory-card[disabled]{
  opacity:1;
  cursor:default;
}
.h-lab-board{
  display:grid;
  gap:6px;
  margin:10px 0;
}
.h-lab-board-6{ grid-template-columns:repeat(6, minmax(0,1fr)); max-width:520px; }
.h-lab-board-8{ grid-template-columns:repeat(8, minmax(0,1fr)); max-width:620px; }
.h-lab-cell{
  min-height:40px;
  border-radius:10px;
  border:1px solid #cddfc5;
  background:#f6fff2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8aa286;
  font-size:15px;
}
.h-lab-cell.is-wall{
  background:#e2e8e1;
  border-color:#c6d0c5;
  color:#8f9c8d;
}
.h-lab-cell.is-player{
  background:#e6f5ff;
  border-color:#8ebbe6;
  color:#1f63a3;
}
.h-lab-cell.is-goal{
  background:#fff6d7;
  border-color:#e7c86f;
  color:#8b6517;
}
.h-lab-controls{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
@keyframes hGamesWinPop{
  0% { transform:scale(0.96); }
  55% { transform:scale(1.02); }
  100% { transform:scale(1); }
}
@keyframes hGamesEventOk{
  0% { transform:translateY(0) scale(1); }
  45% { transform:translateY(-2px) scale(1.01); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes hGamesEventBad{
  0% { transform:translateX(0); }
  22% { transform:translateX(-2px); }
  44% { transform:translateX(2px); }
  100% { transform:translateX(0); }
}
@keyframes hGamesComboHit{
  0% { filter:brightness(1); }
  45% { filter:brightness(1.2); }
  100% { filter:brightness(1); }
}
@keyframes hGamesLiveDelta{
  0% { opacity:0; transform:translateY(3px); }
  20% { opacity:1; transform:translateY(0); }
  85% { opacity:1; transform:translateY(0); }
  100% { opacity:0; transform:translateY(-2px); }
}

.h-games-page.is-focus-mode .h-games-secondary{
  display:none;
}
.h-games-page.is-focus-mode .h-games-run{
  margin-top:4px;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--h-game-accent) 24%, transparent);
}
.h-games-page.is-focus-mode .h-duel-question{
  font-size:52px;
}
.h-games-page.is-focus-mode .h-duel-answer-input{
  font-size:44px;
  min-height:74px;
}
.h-games-page.is-focus-mode .h-sudoku-cell span,
.h-games-page.is-focus-mode .h-sudoku-cell .input{
  font-size:32px;
}

@media (min-width: 760px){
  .h-games-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .h-games-tiles{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (min-width: 701px) and (max-width: 1100px){
  .h-games-page .card{
    margin-bottom:14px;
  }
  .h-games-page .card h2{
    margin-bottom:10px;
  }
  .h-games-run{
    padding:14px;
  }
  .h-games-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .h-games-tiles{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .h-games-tiles-variants{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .h-games-variant-tile{
    min-height:124px;
  }
  .h-games-run-top{
    gap:10px 14px;
  }
  .h-games-live{
    padding:10px 12px;
  }
  .h-games-live-score{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .h-games-combo{
    margin-top:9px;
  }
  .h-games-focus-wrap{
    margin-bottom:10px;
  }
  .h-games-focus-toggle{
    min-width:180px;
  }
  .h-duel-question{
    font-size:42px;
  }
  .h-duel-answer-input{
    font-size:34px;
    min-height:62px;
  }
  .h-duel-form .btn-row{
    margin-top:10px;
  }
  .h-sudoku-toolbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:8px;
  }
  .h-sudoku-toolbar .muted{
    grid-column:1 / -1;
  }
  .h-sudoku-actions .btn{
    min-width:210px;
  }
  .h-sudoku-cancel .btn{
    min-width:180px;
  }
  .h-memory-board{
    grid-template-columns:repeat(4,var(--h-memory-card-size));
    gap:10px;
  }
  .h-memory-face i{
    font-size:42px;
  }
  .h-lab-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
}
@media (max-width: 700px){
  .h-games-page .card{
    margin-bottom:14px;
  }
  .h-games-page .card h2{
    margin-bottom:10px;
  }
  .h-games-run{
    padding:12px;
  }
  .h-games-run-top{
    gap:8px;
  }
  .h-games-run-top > *{
    width:100%;
  }
  .h-games-run-note{
    margin-bottom:10px;
    line-height:1.35;
  }
  .h-games-live{
    margin-bottom:12px;
    padding:10px;
  }
  .h-games-live-score{
    line-height:1.35;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .h-games-combo{
    margin-top:10px;
  }
  .h-games-focus-wrap{
    margin-bottom:12px;
  }
  .h-games-focus-toggle{
    width:100%;
    justify-content:center;
  }
  .h-games-feedback{
    margin-bottom:12px;
    line-height:1.35;
  }
  .h-games-variant-tile{
    padding:14px;
    min-height:120px;
  }
  .h-duel-form .btn-row{
    margin-top:12px;
  }
  .h-duel-form .btn-row .btn{
    width:100%;
    justify-content:center;
  }
  .h-sudoku-toolbar{
    gap:10px;
  }
  .h-sudoku-toolbar .btn{
    width:100%;
    justify-content:center;
  }
  .h-sudoku-toolbar .muted{
    width:100%;
    display:block;
    margin-top:2px;
  }
  .h-sudoku-actions{
    margin-top:12px;
  }
  .h-sudoku-actions .btn{
    width:100%;
    justify-content:center;
  }
  .h-sudoku-cancel{
    margin-top:10px;
  }
  .h-sudoku-cancel .btn{
    width:100%;
    justify-content:center;
  }
  .h-lab-controls{
    grid-template-columns:repeat(1,minmax(0,1fr));
    gap:10px;
  }
  .h-lab-controls .btn{
    width:100%;
    justify-content:center;
  }
  .h-memory-form{
    margin-top:8px;
  }
  .h-memory-card{
    padding:8px;
  }
  .h-games-tile-title{ font-size:22px; }
  .h-sudoku-cell,
  .h-sudoku-cell .input{
    min-height:48px;
    font-size:24px;
  }
  .h-sudoku-notes span{
    font-size:9px;
  }
  .h-sudoku-numpad{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .h-duel-question{
    font-size:36px;
  }
  .h-duel-answer-input{
    font-size:30px;
    min-height:58px;
  }
  .h-memory-board{
    grid-template-columns:repeat(3,var(--h-memory-card-size));
    gap:8px;
  }
  .h-memory-card{
    aspect-ratio:1/1;
    font-size:18px;
  }
  .h-memory-face i{
    font-size:36px;
  }
  .h-memory-back{
    font-size:28px;
  }
  .h-lab-cell{
    min-height:34px;
    border-radius:8px;
    font-size:13px;
  }
}