/* Lernhelden – Bewegung reduzieren und kleine Bildschirme. Bleibt bewusst die LETZTE Datei:
   die Regeln überschreiben gleichrangige Regeln aus allen anderen Dateien. */
/* ---------- 12. Bewegung und kleine Bildschirme ---------- */
/* Bewegung reduzieren: Rückfall, falls html[data-bewegung] fehlt – die eigentlichen Regeln stehen in css/bewegung.css */
@media (prefers-reduced-motion:reduce){
  :root{--weg-klein:0px;--huepfen:1;--versatz:0ms;--kurve-feder:ease-out}
  .no-grade .grade-question{outline:3px solid var(--brand)}
  .no-grade .grade-question::after{animation:none}
}

@media (max-width:860px){
  .grade-question{order:3;margin-left:0;width:100%;justify-content:space-between}
  .topbar-tools{margin-left:auto}
}

@media (max-width:760px){
  .app-shell{padding:0 12px 96px}
  .topbar{margin:0 -12px;padding:6px 12px}
  .topbar-row{gap:6px}
  .brand{display:none}
  .timer-chip:not(.running) #timerDisplay{display:none}
  .chip-btn{padding:4px 10px}
  .grade-question{padding:3px 4px 3px 12px;gap:6px}
  .grade-question .grade-picker{gap:4px}
  .panel{padding:18px}
  .welcome{flex-direction:column;align-items:flex-start;padding:20px}
  .welcome-mascot{position:absolute;right:14px;top:10px;font-size:3rem;opacity:.9}
  .welcome #welcomeTitle{padding-right:56px;font-size:clamp(1.25rem,6.5vw,1.7rem)}
  .hero-badges{display:none}
  /* Navigation als feste Leiste unten */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;flex-wrap:nowrap;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    gap:2px;justify-content:space-between;background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08);overflow:visible}
  .tab{flex:1 1 0;flex-direction:column;gap:2px;min-width:0;min-height:56px;padding:6px 0;border:0;border-radius:14px;background:transparent;font-size:10px;letter-spacing:-.01em}
  .tab-icon{font-size:22px}
  .tab-label{display:none}
  .tab-short{display:block;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tab.active{background:var(--soft);color:var(--ink)}
  .training{padding:0}
  .training-card{border-radius:0;min-height:100dvh;padding:0 16px}
  .training-top{top:0;margin:0 -16px;padding:10px 16px 8px;border-radius:0}
  .training-actions{bottom:0;margin:auto -16px 0;padding:10px 16px calc(12px + env(safe-area-inset-bottom));border-radius:0}
  .training-actions #checkAnswer,.training-actions #nextTask{flex:1;min-width:0}
  .match-row{grid-template-columns:1fr}
  .reading-head{display:block}
  .reading-passage{padding:14px}
  .reading-passage p{font-size:1rem;line-height:1.62}
  table.tense-table{min-width:620px}
  .roadmap-row{grid-template-columns:2rem minmax(0,1fr) minmax(40px,60px) auto 1.8rem;gap:6px;padding:8px 10px;font-size:.76rem}
  .roadmap-desc{display:none}
  .timer-alarm-card{padding:24px 18px}
  .wissen{padding:0}
  .wissen-card{border-radius:0;min-height:100dvh;padding:0 16px 90px}
  .wissen-top{top:0;margin:0 -16px 10px;padding:10px 16px 8px;border-radius:0}
  .wissen-btn-text{display:none}
  /* Kopfleiste nicht mit der Klasse-1-Schrift mitwachsen lassen */
  .wissen-top{font-size:15px;gap:8px}
  .wissen-top h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wissen-top .btn{min-height:44px;padding:6px 12px;font-size:15px;white-space:nowrap}
  /* backdrop-filter im Kopf macht ihn zum Bezugsrahmen – daher absolut unter dem Knopf */
  .popover{min-width:min(270px,calc(100vw - 24px))}
  .badge-toast,.info-toast{bottom:84px;white-space:normal;text-align:center;border-radius:20px}
}